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