浅谈你必须知道的CSS选择器有那些

首先要知道html(超文本标记语言)用于展现文本内容，css(层叠式样式表单)是对HTML语言功能的补充，多用于样式，主要是通过对网页中字体、颜色、背景、图像及其他各种元素的控制,使网页能够完全按照设计者的要求来显示。怎么才能从结构层次复杂html的结构中，添加需要样式，那么就需要我们的主角选择器来帮你实现，接下来介绍有哪些选择器。

基础选择器(基本选择器)

1. 通用元素选择器(通配符选择器)

书写格式 * {声明块} 该选择器表示所有标签都使用此样式。适用场景，统一样式

* { margin: 0; padding: 0;}//当前页面下全部元素的margin和padding设为0，最基本的清除默认CSS样式

*选择器是选择页面上的全部元素，一般建议不要轻易使用，因为它会修改页面下全部元素的样式，这会使得浏览器的负担很重。

2. 元素选择器(标签选择器)

书写格式：元素名或者标签名{声明块} 该选择器表示选择同样元素名的元素都使用此样式

p { color: red; } //当前页面下所有p元素的文字颜色为红色

3. 类选择器

书写格式：. 类名{声明块} 小点+自定义类名(html页面里class的值)，前面的小点千万不要被忽略了，不写会导致选择不中哦
html页面代码

<p class="love">
    我是一级标题
</p>
<h1 class="love">
    我是一级标题
</h1>

css页面代码

.love{
color:red;
}

html页面的class的值为love的标签都会被选中并应用字体颜色为红色；
一个页面可以有多个class，并且class可以放在不同的标签中使用

4. ID选择器

代码书写格式：# ID名{声明块} ID名唯一，整个html里id的值不能相同，一般是预留给javascript添加交互效果的
html页面代码

<p  id="love">
    我是一级标题
</p>

css页面代码

#love{
color:red;
}

html页面的id的值为love的标签都会被选中并应用字体颜色为红色；
ID选择器跟类选择器的区别就是相同的id值的样式只能用在一个标签上，类选择器则相同的class值的样式可以应用很多标签。

5. 组合(并集)选择器

书写格式：元素名,元素名1,元素名2{声明块} 前面的元素名可以是id选择器和类选择器，没有顺序要求，以英文逗号分隔

h1,p,span{
      color:red;

当多个标签使用的是相同样式的时候可以使用组合(并集)选择器，减少重复书写，合理运用组合选择器，可以提升代码效率，减少代码量，提升浏览器及服务器响应速度，以此提高用户体验。

层次选择器语法

1.子级选择器

书写格式：父元素X>子元素Y{声明块} 父元素X下面子元素Y都应用相同的样式
html页面代码

<div>
    <p>我是div的子元素p</p>
    <span>我是div的子元素span</span>
</div>

css页面代码

div>p{
  color:skyblue;
}

只修改了div元素下面p元素的字体颜色，但是span元素则没有改变

2.后代选择器

书写格式：祖先元素X 后代元素Y{声明块} （注意书写的时候祖先元素X与后代元素Y之间以空格字符隔开） 祖先元素X的所有后代元素Y都应用相同的样式
html页面代码

<div>
    <p>
         <span>我是div的后代元素span</span>
    </p>
    <span>我是div的子元素span同时也是div的后代元素</span>
</div>

css页面代码

div span{
  color:skyblue;
}

修改div元素所有后代元素span的字体颜色，只要是div的后代就都会应用

3.兄弟选择器

选中相邻胞弟元素
书写格式：元素X+元素Y{声明块} 只能选中X元素后面的Y元素，XY之间不能有其他元素
html页面代码

<div>
        <p>我是X元素</p>
        <span>我是被选中的元素Y</span>
        <span>我是没有被选中的元素W</span>
    </div>

div>p+span{
    color: skyblue;
}

选中p元素后面的第一个span元素
只能选择元素X相邻的同级别的元素Y，并且这个元素Y是元素X的后面第一个元素
选中后续胞弟元素
书写格式：元素X~元素Y{声明块} 选中元素X后面所有的元素Y
html页面代码

<div>
        <p>我是兄长元素X</p>
        <span>我是胞弟1元素Y</span>
        <span>我是胞弟2元素Y</span>
        <p>我虽然是胞弟，但是不是元素Y</p>
        <span>我是胞弟3元素Y</span>
    </div>

div>p~span{
    color: skyblue;
}

选中p元素后面的所有span元素
选中元素X后面同属一个父元素的所有元素Y

三、伪类选择器

1.动态伪类选择器

link：选择未访问链接

a:link
{ 
background-color:skyblue;
}

visited： 选择访问过的链接

a:visited
{ 
background-color:skyblue;
}

hover：选择鼠标在链接上面时

a:hover
{ 
    background-color:skyblue;
}

active：点击某个标签没有松鼠标时

a:active
{ 
background-color:skyblue;
}

focus：是某个标签获得焦点的时候（选择具有焦点的输入元素）

input:focus
{ 
background-color:skyblue;
}

2.结构性伪类选择器

Y>X:first-child 选出Y元素的所有子元素第一个元素，如果这个元素是X则选中满足条件这个X，如果元素X不是第一个就表示条件不满足
Y>X:last-child选出Y元素的所有子元素最后一个元素，如果这个元素是X则选中满足条件这个X，如果元素X不是最后一个就表示条件不满足
Y>X:nth-child(n)（用于匹配索引值为n的子元素。索引值从1开始 ）选出Y元素的所有子元素中的第n个元素，如果这个元素是X则选中满足条件这个X，如果元素X不是第n个元素就表示条件不满足
Y>X:nth-last-child(n)（用于匹配索引值为n的子元素。索引值从1开始 ，但是从后面往前数）选出Y元素的所有子元素中的倒数第n个元素，如果这个元素是X则选中满足条件这个X，如果元素X不是倒数第n个元素就表示条件不满足
html页面代码

     <div>
            <p>我是第一个元素</p>
            <span>我是第二个元素</span>
            <span>我是第三个元素</span>
            <p>我是第四个元素</p>
            <span>我是最后一个元素</span>
    </div>

css的代码

 div>p:first-child{
            color: skyblue;
        }/* 因为我是p元素并且是第一个元素所有我能选中*/
 div>span:first-child{
            color: skyblue;
        }/* 虽然我是span元素但是我不是第一个元素所有条件不满足选不中*/
 div>span:last-child{
            color: skyblue;
        }/* 因为我是span元素并且是最后一个元素所有我能选中 */
  div>p:last-child{
            color: skyblue;
        }/* 虽然我是p元素但是我不是最后一个元素所有条件不满足选不中 */
 div>span:nth-child(2){
            color: skyblue;
        }/* 因为我是span元素,并且我是第二个元素所有我能选中 */
 div>p:nth-child(2){
          color: skyblue;
       }/* 虽然我是p元素但是我不是第二个元素所有条件不满足选不中 */
 div>p:nth-last-child(2){
            color: skyblue;
        }/*因为我是p元素,并且我是倒数第二个元素所有我能选中  */
 div>span:nth-last-child(2){
            color: skyblue;
        }/*虽然我是span元素但是我不是倒数第二个元素所有条件不满足选不中  */

注：如果能选中，是选中满足条件那一个元素X，而不是所有元素X

Y>X:first-of-type 选出Y元素的所有子元素X进行排序，然后选中第一个元素X，如果子元素X个数为0，则条件不满足
Y>X:last-of-type 选出Y元素的所有子元素X进行排序，然后选中最后第一个元素X，如果子元素X个数为0，则条件不满足(注:子元素X个数为1，也会选中，因为即是第一个也是最后一个）
Y>X:nth-of-type(n) （用于匹配索引值为n的子元素。索引值从1开始 ）选出Y元素的所有子元素X进行排序，选出Y元素的所有子元素X中的第n个元素,如果子元素X个数为0，则条件不满足.
Y>X:nth-last-of-type(n) 用于匹配索引值为n的子元素。索引值从1开始 ，但是从后面往前数）选出Y元素的所有子元素中的倒数第n个元素,如果子元素X个数为0，则条件不满足.
html页面代码

     <div>
            <p>我是所有p元素的第一个元素</p>
            <span>我是所有span元素的第一个元素</span>
            <span>我是所有span元素的第二个元素</span>
            <p>我是所有p元素的最后第一个元素</p>
            <span>我是所有span元素的最后第一个元素</span>
    </div>

css的代码

 div>p:first-of-type{
            color: skyblue;
        }/* 因为我是所有p元素的第一个元素所有我被选中*/
  div>p:last-of-type{
            color: skyblue;
        }/* 因为我是所有p元素的最后第一个元素所有我被选中*/
 div>span:nth-of-type(1){
            color: skyblue;
        }/*  我是所有span元素的第一个元素所有我被选中*/
 div>span:nth-last-of-type(3){
          color: skyblue;
       }/* 唉好运来挡都挡不住，因为我既是所有span元素的第一个元素，又是所有span元素的倒数第三个元素，所有我被选中了2次*/

注：如果同一个元素被选中2次并且改变了样式，就是发生了声明冲突会触发层叠机制

Y>X:only-child 如果Y的子元素中，有且仅有元素X一个元素，则选中X，如果Y的子元素不止1个，则选不中
Y>X:only-of-type 如果Y的子元素中，元素X这种元素只有一个则选中X，如果如果Y的子元素中元素X不止1个，则选不中
X:empty 匹配没有任何子元素（包括包含文本）的元素X
html页面代码

       <div>
            <p><span>我是p元素里面，只有一个span</span></p>
            <div></div>
            <span>我是div的子元素里面唯一一个span</span>
        </div>

css的代码

div>div:empty{
            width: 100px;
            height: 10px;
           background-color: skyblue;
        }/* div的子元素div里面是空的，连文本都没有，所有能被选中 */
        div>p>span:only-child{
            color: skyblue;
        }/*因为p元素里面只有一个子元素，这子元素是span，所有能被选中  */
        div>span:only-of-type{
            color: skyblue;
        }/* 因为div元素的所有子元素里面，span元素只有一个，所有能被选中*/

否定选择器
书写格式 X:not() 选择中除开某一个其他都能选中，除开条件写在中括号里面 如果除开某几个 X:not():not():not() 除开条件写在中括号里面
html页面代码

      <div>
            <span>我是第一个元素</span>
            <span>我是第二个元素</span>
            <span>我是第三个元素</span>
            <span>我是第四个元素</span>
            <span>我是第五个元素</span>
        </div>

css的代码

       div>span:not(:last-child):not(:first-child){
            color: skyblue;
        }/* 除开第一个span和最后一个span都能被选中，所有第2，3，4个span改变了颜色*/

伪元素选择器

X::before 创建X的第一个子元素，并且配合content 属性添加内容
X::after 创建X的最后一个子元素，并且配合content 属性添加内容

html页面代码

      <div>
           <p>  我是p </p>
       </div>

css的代码

    div>p::before{
           content: "我在p的前面";
           color: skyblue;
        }/* 我显示的内容在p元素的文本内容的前面*/
        div>p::after{
           content: "我在p的后面";
           color: skyblue;
        }/* 我显示的内容在p元素的文本内容的后面*/

**注：伪元素主要功能是为实现一些功能或者添加一些不重要的内容，没有必须多新建一些标签去单独实现，通常用来向元素添加小图标、清除浮动影响等，在使用伪元素的时候一定要配合content 属性来使用，content可以为空。
**
一些小技巧
像这种nth-of-type(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是正整数值(1,2,3,4)，也可以是表达式(3n、-n+3)或值是关键词(odd(奇数)、even(偶数))，但表达式参数n的起始值0,每次递增1。注-n+3不能写成n-3，这会是表达式失效
html页面代码

    <div>
          <span> 第一 </span>
          <span> 第二</span>
          <span> 第三 </span>
          <span> 第四  </span>
          <span> 第五 </span>
          <span> 第六 </span>
      </div>

css的代码

     div>span:nth-of-type(odd){
           color: skyblue;
       }/* 我可以选中div下面所有span中的奇数项*/
       div>span:nth-of-type(even){
           color: skyblue;
       }/* 我可以选中div下面所有span中的偶数项*/
       div>span:nth-of-type(-n+4){
           color: skyblue;
       }/* 我可以选中div下面span中的第1，2，3，4*/

在选择和使用选择器时，因为选择器的品种繁多，所有要合理使用选择器，才能减少或避免因为选择器的原因造成的声明冲突，从而触发层叠机制，了解好选择器也能在发生声明冲突的时候在比较特殊性的时候，更好解决它。

最后有讲得不对地方，欢迎各位大佬和同道中人的指正或补充，谢谢。