CSS选择器

css选择器的作用在于 选择你想要的标签

下边分享几种常用的css选择器，包括元素选择器、id选择器、类选择器、群组选择器、属性选择器、后代选择器、子代选择器、兄弟选择器、伪类选择器、伪元素选择器。

元素选择器

最简单的一种样式选择器。可以是div，p，html，body等等；

       html {color:black;}
       p {color:gray;}
       h2 {color:silver;}

---

id选择器

id选择器可以找到html中标有id的指定元素，以"#"来定义。

id元素不可重复

        #apple{color: red;}

---

类选择器

与id选择器相似，类选择器可以找到html标有class的指定元素，以"."来定义。

        .apple{color: red;}

---

群组选择器

想要选择多个标签设置css样式时，可以使用群组选择器，用“,”进行链接

        p,h1{color: red;}

---

属性选择器

如果希望选择有某个属性及属性值的元素，可以使用属性值选择器

[属性名]{ }        标签名[属性名 = “ ”]{ }

        //包含标题（title）的所有元素变为红色        
        *[title] {color:red;}

        //将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
        a[href][title] {color:red;}

        //对所有带有 alt 属性的图像应用样式
        img[alt] {border: 5px solid red;}

        //将指定超链接变成红色
        a[href="http://www.baidu.com"] {color: red;}

        //选择 title 文本包含 "Figure" 的所有图像
        img[title~="Figure"] {border: 1px solid gray;}

        a[href*="baidu.com.cn"] {color: red;}

---

后代选择器

后代选择器的作用是精准选中想要的属性，选择的是div后代中的所有p标签

        <div class="father">
           <p class="son">
               <p class="grandson"></p>
               <p class="grandson"></p>
           </p>
        </div>

         //后代选择器 选中的是.father下的所有后代,包括.son .grandson
        div p{color: red;}

---

子代选择器

与后代选择器相比，子代选择器 选择的是div后代中子元素的标签，而不包括其子标签的后代。

        <div class="father">
           <p class="son">
               <p class="grandson"></p>
               <p class="grandson"></p>
           </p>
        </div>

        //子代选择器此时 选中的是.father下的.son, 不会选中.grandson
        div>p{color: red;}

---

兄弟选择器

兄弟选择器 选择的是紧邻在某个元素的第一个元素

        //兄弟选择器 使div下的紧邻的第一个p标签适应此样式
        div+p{margin-top: 20px;}

---

伪类选择器

可以理解为描述元素的某种状态

a标签伪类（必须按顺序书写）

        a:link      //访问前
        a:visited   //访问后
        a:hover     //鼠标悬停
        a:active    //左键按下

        input:focus     //获取焦点样式，点击input时边框的样式 

        p:first-child           //第一个子级
        p:first-of-type         //特定的第一个子级
        p:last-child            //最后一个子级
        p:last-of-type          //特定的最后一个子级
        p:nth-child(n)          //第n个子元素
        p:nth-of-type(n)        //指定类型的第n个子级元素
        p:nth-last-child(n)     //倒数第n个元素
        p:nth-last-of-type(n)   //指定类型的倒数第n个元素

上边推荐使用 p:nth-of-type(n)

---

伪元素选择器

可以理解为某个元素的子元素，但不存在于html中

        p::after                //在p标签后添加元素
        p::before               //在p标签前添加元素
        p::first-line           //文本第一行样式
        p::first-letter         //文本的首字母，只适用于块元素
        input::placeholder      //只是用于表单元素的提示文本
        input::-webkit-input-placeholder     //（具有兼容性 ）