css选择器

1.属性选择器

<p text="text"></p>

            [text]{
                color:white;
            }
            [text:text]{
                color:white;
            }
            p[text:text]{
                color:white;
            }

2.伪类选择器

  :link    向未被访问的超链接添加样式

  :visited     向已被访问的超链接添加样式

  :active   向被激活的元素添加样式 

  :hover   当鼠标悬停至元素上方是,向该元素添加样式

  :focus    当元素获取焦点时,向该元素添加样式 

 <p>345</p>

            p:foucs{
                color:blue;
            }

3.伪元素选择器

  :first-letter  向文本的第一个字母添加特殊样式。

  :first-line   向文本的首行添加特殊样式。

  :before      在元素之前添加内容。

  :after     在元素之后添加内容。

<p>345</p>

//"first-line" 伪元素用于向文本的首行设置特殊样式。
p:first-line
{
 color:#ff0000;
}

4.通配符选择器

<div id="te">
            <p>345</p>
            <p id="id"></p>
            <p class="class"></p>
            <p text="text"></p>
            <input type="text">
        </div>

            *{
                /*选择页面上的所有元素*/
                color:pink;
            }

            #te*{
                /*选择id为te元素下的所有元素*/
                color:pink;
            }

5.子类选择器

  #te > p{
                /*选择id为te元素下的所有的直接子类p元素*/                    
                color:pink;
            }

6.后代选择器

  #te p{
                /*选择id为te的元素下的所有p元素*/    
                color:pink;
            }

7.相邻兄弟选择器

<div id="te">
            <p>345</p>
            <p id="id"></p>
            <p class="class"></p>
            <p text="text"></p>
            <input type="text">
        </div>

            p + input{
                /*选择紧接在 p 元素后出现的<input>,p 和 input 元素拥有共同的父元素*/
                color:pink;
            }

8.选择器分组

<div id="te">
            <p>345</p>
            <p id="id"></p>
            <p class="class"></p>
            <p text="text"></p>
            <input type="text">
        </div>

            p,input{
                /*选择所有的p和input元素*/
                color:pink;
            }

转载:https://www.cnblogs.com/whalesea/p/10400957.html

上一篇:TE泰科连接器全系列1909763-1 同轴连接器(RF)长期全新原装供应,TE继电器


下一篇:结构体学习笔记6——结构体嵌套