css选择器概述

css选择器种类

• id选择器
• 类选择器、属性选择器、伪类选择器
• 元素选择器、伪元素选择器
• 通配符选择器、子类选择器、后代选择器、相邻兄弟选择器、选择器分组

一、id选择器

            <p id="id"></p>

            #id{
                color:red;
            }

二、类选择器、属性选择器、伪类选择器

　　1、类选择器

            <p class="class"></p>

            .class{
                color:black;
            }

 

　　2、属性选择器

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

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

　　3、伪类选择器

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

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

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

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

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

            <p>345</p>

            p:foucs{
                color:blue;
            }

三、元素选择器、伪类选择器

　　1、元素选择器

            <p>345</p>

            p{
                color:pink;
            }

　　2、伪元素选择器

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

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

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

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

<p>345</p>

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

四、通配符选择器、子类选择器、后代选择器、相邻兄弟选择器、分组选择器

　　1、通配符选择器

        <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;
            }

　　2、子类选择器

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

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

 

　　3、后代选择器

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

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

 

　　4、相邻兄弟选择器

        <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;
            }

 

　　5、选择器分组

　　

        <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;
            }