15.CSS选择器【上】

                                              第十三章  CSS选择器

一、选择总汇

   

          选择器            名称                      例子描述                                    CSS版本

        .<class>          class选择器        选择 class指定类型的所有元素。                      1

        #id           id选择器           选择 id属性的所有元素。                              1

        *           通用选择器         选择所有元素。                                         2

        [attr]系列        属性选择器         选择指定after属性的元素                                2～3

        s1,s2,s3...       分组选择器         选择多个选择器的元素                                     1

        s1 s2             后代选择器                                                                  1

        s1 > s2           子选择器                                                                    2

        s1 + s2           相邻兄弟选择器                                                              2

        s1 ～ s2          普通兄弟选择器                                                              3

        ::first-line      伪元素选择器                                                                1

        ::first-letter    伪元素选择器                                                                1

        ::before          伪元素选择器                                                                2

        ::after           伪元素选择器                                                                2

 

 

   1、通用选择器 ：（不建议使用）这是一把双刃剑，好处是非常方便，坏处是把不必要的元素也配置了。

   2、元素选择器 ：直接使用元素名称作为选择器即可。

          // <p>段落</p>

   3、id选择器 ：   html文档                           CSS文档

          // <p id="abc">段落</p>              #abc{

                                                  color:blue;      

                                               }

   4、类选择器（如果想让其中一个变色，另一个不变，只需把“.abc”改为“b.abc或p.abc即可”）

          // <p class="abc">段落</p>           .abc{

             <b class="abc">加粗</b>              color:blue;

                                               }

   5、属性选择器 ：

       //所需版本 CSS2

       （1）[href]{

               color:blue;

            }

       （2）文本框的背景为红色

            [type="password"]{

               border:1px solid red;

            }

       （3）属性值具有多个值时，匹配其中一个值的属性选择器

            [class～="def"]{...}

       （4）比如html5文档中中有<i lang="en-us">html5</i>时

            [lang|="en"]  

        //所需版本CSS3

       （1）属性值开头匹配的选择器（开头为http的都变成红色）

            [href^="http"]{

               color:red;

            }

       （2）属性值结尾匹配的选择器（结尾为.cn的都变成红色）

             [href$=".cn"]{

               color:red;

             }

       （3）属性值包含指定的字

             [href*="baidu"]{...}

 

二、复合选择器  （把需要变色到元素名称写在前面，并用逗号隔开）

   1、分组选择器 ：

             p,b,i,span{                       #abc,.abc,i,span{

               color:red                         ...

             }                                 }    

   2、后代选择器 ：<p><><b></b><></p>  （这里b元素为p元素的后代,无论第几代）

             p b {color:red;}   //p空格b空格{...}

   3、子选择器   <p><b></b></p>  （这里b必须是p的第二代）

             p > b {...}

   4、相邻兄弟选择器 ：（p元素和b元素必须相邻，中间不能有其他元素）

             p + b {...}

   5、普通兄弟选择器 ：（p元素和b元素中间可以有其他元素）

             p ～ b {...}

三、伪元素选择器：（伪选择器分为两种 第一种是下节伪类选择器，还有一种是伪元素选择器。两种容易混淆，在

-+

CSS3中为了区分，伪元素前置两个冒号（::）,伪类前置一个冒号（:））

   1、::first-line 块级首行 ：（文本的第一行变色）<p>......</p>

             ::first-line{...}    // p::first-line{...}  （p文本里的第一行变色）          

   2、::first-letter 块级首字母 ：块级首字母或字变色

   3、::before 文本前插入 ：<a href="http://www.baidu.com">百度</a>

             a::before{

                content:'点击';     //效果是：“点击百度”

             }

   4、::after 文本后插入 ：<a href="http://www.baidu.com">百度</a>

             a::after{

                content:'搜索';     //效果是：“百度搜索”

             }

   5、::selection  当选择文字时触发选择（支持度不太好，了解一下）

              在页面选择一块儿文字时，触发设定的效果。