CSS中的选择器

一、基本选择器

       使用简单且频率高的一些选择器归类为基本选择器

       1. 通用选择器

           *{

                  pandding: 0 px;

                  margin: 0 px;

                  border: 0 px;

            }

            " * "号选择器是通用选择器，可以匹配所有html元素的选择器包括html标签和body标签

       2. 元素选择器

            直接使用元素名称作为选择器名

            p{

                color: red;

            }

            <p>我的颜色是红色的吗？</p>

       3. ID选择器

           通过对元素设置全局属性id，然后使用 #id值来选择页面唯一元素

            #content1{

                color: red;

            }

            <p   id = "content1">我的颜色是红色的吗？</p>

       4.  类选择器

            通过对元素设置全局属性class，然后使用.class值选择页面一个或多个元素

            .content1{

                color: red;

            }

            或

             p.content1{

                   color:red;

             }  //限定某种类型的元素

            <p   class = " content1">我的颜色是红色的吗？</p>

       5. 属性选择器

           //css2  直接通过两个中括号里面包含属性名即可

            [href] {

                 color:red;

           }  

           //css2  匹配属性值的属性选择器

           [type="password"]{

                   border: 1px  solid   red;

          }

          //css3   属性值开头匹配的属性选择器

          [href^= "http"]{

                   color:red;

          }

          //css3   属性值结尾匹配的属性选择器

          [href$= ".com"]{

                    color:red;

          }

          //css3   属性值包含指定字符的属性选择器

          [href*= "baidu"]{

                   color:red;

          }

          //css2   属性值具有多个值时，匹配其中一个值的属性选择器

          [class~= "content1"]{

                   font-size: 50 px;

          }

          //css2   属性值具有多个值使用“-”号连接符分割的其中一个值的属性选择器

            <i   lang = "en-us">HTML</i>

             [lang | = "en"]{

                        color:red;

             }

二、复合选择器

        将不同的选择器进行组合形成新的特定匹配，我们称为符合选择器

        1. 分组选择器

            将多个选择器通过逗号分割，同时设置一组样式，还可以使用ID选择器、类选择器、属性选择器混合使用

             p,b,span{

                   color:red;

             }

         2. 后代选择器

             选择p元素内部所有的b元素

             p  b{

                   color:red;

             }

         3. 子选择器

              子选择器类似于后代选择器，而最大的区别就是子选择器只能选择父级元素向下一级的元素，不可以再往下选择

               ul>li{

                       border:1px solid red;

               }

          4. 相邻兄弟选择器

              相邻兄弟选择器匹配和第一个元素相邻的第二个元素

               p + b{

                       color:red;

               }

          5. 普通兄弟选择器

              普通兄弟选择器匹配和第一个后面的所有元素

               p ~ b{

                        color:red;

               }

三、 伪元素选择器

         伪选择器分为伪元素选择器和伪类选择器，伪元素选择器前置两个冒号（：：），伪类选择器前置一个冒号（：）

         1. ::first-line 块级首行

              块级元素如：p div 等的首行文本被选定。如果想限定某种元素，可以加前置 p::first-line

         2. ::first-letter块级首字母

              块级元素的首行字母

         3. ::before文本前插入

              在文本前插入内容

              a::before{

                     content: "点击-"；

              }   

         3. ::after文本后插入

              在文本后插入内容

              a::after{

                     content: "点击-"；

              }   

四、 伪类选择器

         伪类选择器分为四种类型：结构性伪类、UI伪类、动态伪类和其他伪类选择器

         伪类都需要加上前置选择器来限制范围

         1. 结构性伪类选择器

             （1） 根元素选择器

                        匹配文档中的根元素（基本不使用，因为总是返回html元素）

                        :root{

                               border:1px solid red;

                         } 

             （2） 子元素选择器

                        选择第一个子元素

                        ul>li:first-child{

                                color:red;

                        }

                        选择最后一个子元素

                        ul>li:last-child{

                                color:red;

                        }

                        选择只有一个子元素的那个子元素

                        ul>li:only-child{

                                color:red;

                        }

                        选择只有一个指定类型的子元素的那个子元素

                        div>p:only-of-type{

                                color:red;

                        }

              （3） :nth-child(n)系列

                       选择子元素的第二个元素

                       ul>li:nth-child(2){

                             color:red;

                       }

                       选择子元素倒数第二个元素

                       ul>li:nth-last-child(2){

                             color:red;

                       }

                       选择特定子元素的第二个元素

                       div>p:nth-of-type(2){

                             color:red;

                       }

                       选择特定子元素的倒数第二个元素

                       div>p:nth-last-of-type(2){

                             color:red;

                       }

          2. UI伪类选择器

               UI伪类选择器是根据元素的状态匹配元素

               （1） :enabled

                        选择启用状态的元素

                        :enabled{

                              border: 1px  solid  red;

                         }

               （2） :disabled

                           选择禁用状态的元素

               （3）:checked

                        选择勾选的input元素

               （4）:default

                        从一组类似的元素中选择默认元素

                        :default{

                                 display: none ;

                          }

               （5） : valid和:invalid

                         输入验证合法与不合法显示时选择的元素

               （6） :required和:optional

                         根据是否具有required属性选择元素

       3. 动态伪类选择器

          动态伪类选择器根据条件的改变匹配元素

          （1） ：link和visited

                     link表示未访问过的超链接

                     visited表示已经访问过的超链接

          （2） ：hover

                     表示鼠标悬停在超链接上

          （3） ：active

                     表示鼠标按下激活超链接时. 

          （4） ：foucs

                     表示获得焦点时

       4. 其他伪类选择器

           （1） ：not

                       否定选择器，反选

                       a:not([href *= "baidu"]){

                                 color:red;

                       }

           （2） ：empty

                       匹配没有任何内容的元素

           （3） ：lang

                      选择包含lang属性，属性值前缀为 en的元素。和属性选择器匹配结果一致

                      :lang(en){

                              color:red;

                      }

           （4） ：target

                      定位到锚点时选择此元素

                      

            （5） ：：selection

                       这是一个伪元素选择器，当选择文字时触发选择