CSS常用选择器【持更】

---

一、常用选择器

选择器是CSS语法中重要的部分，一般写在style标签中，通常用于选择相应的元素，并对选择到的元素进行操作

1.元素选择器

       作用：通过元素选择器可以选择页面中的那个（或者那些个）指定的元素。

               语法：标签名 + { 需要对元素进行的操作 }

//该元素选择器选中了页面中所有的p标签并给p标签设置样式
 <style type="text/css"> 
      p{
      color:red;    //标签中的文字颜色设置为红色
      font-size:25px;  //字体大小设置为25像素
      }
 </style>

2.id选择器

       作用：id选择器会根据元素的id属性值选中唯一一个确定的元素

               语法：#+ id属性值 + { 需要对元素进行的操作 }

//该id选择器选中了页面中id属性值为p1的标签并给该标签设置样式
 <style type="text/css"> 
      #p1{
      color:red;    //标签中的文字颜色设置为红色
      font-size:25px;  //字体大小设置为25像素
      }
 </style>

3.类选择器

       作用：类选择器会根据元素的clas属性值选中一组元素。
              我们称class属性值相同的元素为一组元素

               语法：. + class属性值 + { 需要对元素进行的操作 }

//该类选择器选中了页面中一组class属性值为p1的标签并给该组标签设置样式
 <style type="text/css"> 
      .p1{
      color:red;    //标签中的文字颜色设置为红色
      font-size:25px;  //字体大小设置为25像素
      }
 </style>

【注意】：可以同时给一个标签设置多个class属性值，多个值之间使用空格“ ”隔开，因为如果一个标签拥有多个class属性值，那么可以用多个类选择器选中它。
如 <p class = " p2 hello"> I’m a label of p </p>
那么这个p标签可以同时被 .p2{} 和 .hello{} 同时选中

4.并集选择器（选择器分组）

       作用：并集选择器可以同时选中多个选择器对应的元素。

               语法： 选择器1 + ， + 选择器2 + ，+选择器3 +…+选择器N { 需要对元素进行的操作 }

//该并集选择器选中了页面中一组class属性值为p1的标签和h1标签和id属性值为p1的标签并给该组标签设置样式
 <style type="text/css"> 
      #p1, h1, .p1{
      color:red;    //标签中的文字颜色设置为红色
      font-size:25px;  //字体大小设置为25像素
      }
 </style>

5.通配选择器

       作用：通配选择器可以同时选中页面中的所有元素。

               语法： * + { 需要对元素进行的操作 }

//该通配选择器选中了页面中所有的标签并给标签设置样式
 <style type="text/css"> 
      *{
      color:red;    //标签中的文字颜色设置为红色
      font-size:25px;  //字体大小设置为25像素
      }
 </style>

6.交集选择器（复合选择器）

       作用：交集选择器可以选中页面中满足多个选择器的元素。

               语法： 选择器1选择器2…选择器N+ { 需要对元素进行的操作 }

//该交集选择器选中了页面中class属性为p3的span标签并给标签设置样式
 <style type="text/css"> 
      span.p3{
      color:red;    //标签中的文字颜色设置为红色
      font-size:25px;  //字体大小设置为25像素
      }
 </style>

7.后代元素选择器

       作用：后代元素选择器可以选中指定元素的指定后代元素。

               语法： 祖先元素+空格+后代元素+ { 需要对元素进行的操作 }

//该后代元素选择器选中了页面中id属性为p3的后代span标签并给span标签设置样式
 <style type="text/css"> 
      #p3 span{
      color:red;    //标签中的文字颜色设置为红色
      font-size:25px;  //字体大小设置为25像素
      }
 </style>

8.子元素选择器

       作用：子元素选择器可以选中指定元素的指定子元素。

               语法： 父元素>子元素+ { 需要对元素进行的操作 }

//该子元素选择器选中了页面中id属性为p3的子元素span标签并给span标签设置样式
 <style type="text/css"> 
      #p3>span{
      color:red;    //标签中的文字颜色设置为红色
      font-size:25px;  //字体大小设置为25像素
      }
 </style>

---

二、兄弟元素选择器

1.后一个兄弟元素选择器

2.后面所有兄弟元素选择器

---

三、伪类选择器

1.作用

为处于特殊状态的元素设置样式
【伪类】：表示专门用来表示元素特殊状态的量。（如未访问过的链接、访问过的链接、获取焦点的文本框）

2.分类

①普通链接（未访问过的链接）

               语法：

②已经访问过的链接

③鼠标移入超链接的状态

④超链接被激活（点击）的状态

⑤获取焦点

⑥被选中的文本状态

---

四、属性选择器

1.title属性

2.属性选择器分类

①.选取含有指定属性的元素

②.选取含有指定属性值的元素

③.选取属性值以指定内容开头的元素

④.选取属性值以指定内容结尾的元素

⑤.选取属性值含有指定内容的元素

---

五、伪元素

1.定义

2.伪元素分类

①.首字母（首字符）

②.首行

③.指定元素前

④.指定元素后

---

总结