干货推荐！这三十多种CSS选择器你必须知道！！

 

 

 

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿，于是CSS便诞生了。

CSS为我们提供了种类繁多的选择器，让我们能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS选择器众多，本文将详细介绍各种选择器的使用方法、适用场景等。希望通过我的总结，能让你用最少的代码量在不同的位置灵活运用合适的选择器来开发漂亮的网页！

 

---

 

                       重点：所有选择器选择的元素是离大括号最近的元素！

 

---

 

一.基础选择器

 

1. 通配符选择器

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

*{margin:0;}     表示清除整个HTML的所有元素外边距。

许多开发者都喜欢用这个选择器来让元素清除边距，虽然很好用，但是我不建议用这个选择器，因为会给浏览器增加负担，还会给代码留下未知隐患。

 

2. 元素选择器

代码书写格式：元素名{声明块}     表示如果HTML文件中，只要有该元素，则都应用该样式。例：

h1{color:red;}      表示添加一个样色为红色的样式，应用到h1元素身上

 

3. 类选择器

代码书写格式：. 类名{声明块}   （一个小点+自定义类名，前面的小点千万不要被忽略了）

类名由于是自定义，建议取名要见名知意，以便后期维护修改代码（不然今天写的代码过一周再看就好像不是自己写的）

 

类选择器的使用要求：

①.1.以点号开始

②.只能字母、数字、下划线（连字符）

③.以字母开头

④.区分大小写（大小写敏感，HTML的类名要和CSS的类名除了前面加一个小点外完全一致）

 

类选择器的使用步骤：

①.在HTML文件中给想要添加样式的元素开始标记添加class属性，属性值为自定义类名。

步骤①示例代码：

    我是一级标题

②.在CSS中选择要添加样式的类名，（在前面加小点）就可以添加想应用的样式了。

步骤②示例代码：

.BT{
    color: red;
}

这里给你一些类选择器的取名建议：

广告 ： banner

标识 ： logo

左右中 ：left right center

页面主体 ： main

新闻 ： news

热点 ： hot

搜索 ： search

..........

 

4. ID选择器

 

代码书写格式：# ID名{声明块}      特点，名字唯一。（建议预留给JS使用）

ID选择器的使用步骤和规范同类选择器，只是在CSS中选择时前面加#       

HTML代码示例：

    我是一级标题

CSS代码示例：

#BT{
    color: red;
}

 

 

5. 组合(并集)选择器

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

需求：有一个h1标题，一个h2标题，一个h2标题，我需要这三个标题都将字体样色变成红色

示例代码：

h1,h2,h3{
      color:red;
}

假如一个大型的网站，需要重复使用大量的CSS样式，如果合理运用组合选择器，可以提升代码效率，减少代码量，提升浏览器

及服务器响应速度，以此提高用户体验。

 

---

 

二.层次选择器

 

1.子级选择器

代码书写格式：父元素A>子元素B{声明块}     特点：父元素下面的所有该子元素都应用该样式。 示例：

    
我是div的子元素



    我不是div的子元素

 

需求：选择div里面的p元素添加红色字体样式

 

div>p{
    color:red;
}

 

 

2.后代选择器

代码书写格式：祖先元素+空格+后代元素{声明块}   特点：父元素及祖先元素下面的所有该子元素都应用该样式。

它与子级选择器的区别在于，子级选择器只能选择子元素，后代选择器可以选择后代元素(包含子元素)。示例：

 

    

        

            

                

                    
                        我是span标签
                    
                
            
        
    

 

需求：选择这个span标签添加红色字体样式

header span{
    color: red;
}

 

如果用子级选择器将会这样

 

header>nav>div>p>span{
    color: red;
}

 

 

---

当熟练度越来越高，所写的代码也越来越复杂化。作为前端开发工程师，精简代码是必不可少的。

没有最好的选择器，只有最合适当前代码的选择器。

---

 

 

3.兄弟选择器

代码书写格式：兄弟元素A+兄弟元素B{声明块}     特点，只能选中A元素后面的B元素，AB之间不能有其他元素

示例代码：

div>aside:hover+section{
    color: red;
}

（ :hover为动态伪类选择器，表示鼠标悬停。文章下面动态伪类选择器会讲。这里为了举例直观）

这段代码表示div下面的aside元素被鼠标选中时，后面的兄弟元素section的文本颜色变红。

（对于前端新手，这里可能有点绕。但请你细细的品。如果有问题可以在下方评论或者私聊我）

 

4.通用选择器

代码书写格式：兄弟元素A~兄弟元素B{声明块}       特点，A后面所有的兄弟元素，只要是B，都应用这个样式。

示例代码和兄弟选择器一样。它和兄弟选择器的区别是：

通用选择器选择的对象是所有兄弟元素。兄弟选择器选择的对象和该元素之间不能有其他元素。

讲到这里，你会发现，[通用选择器和兄弟选择器]的特点在某种程度上和[子级选择器和后代选择器]有一些相同点。

 

兄弟选择器和通用选择器只能选中自己之后的元素！

 

---

---

 

 

---

---

 

三.伪类选择器

 

1.静态伪类选择器

 

①.   :link    表示未访问，未被点击    （冒号和link要一起使用）书写该选择器时，用任意选择器+：link即可。例:

a:link{
    color:red;
}

   表示当a标签未被访问时a标签文本颜色为红色

 

②.  :visited  表示已访问，被点击过    例:

a:visited{
       color:blue;
}  

  表示当a标签被点击过后a标签文本颜色为蓝色

 

由于给用户好的浏览体验，用户的浏览操作会被浏览器保留，只有清空历史记录来刷新样式！

 

2.动态伪类选择器

①.  :hover   表示鼠标悬停    例：

a:hover{
    color:pink;
}

  表示当鼠标悬停时a标签文本颜色为粉色

 

②.  :active   表示当鼠标点击时  例：

a:active{
    color:green;
}

表示当鼠标正点击时a标签文本颜色为绿色

 

③.  :focus  当鼠标无法使用时，可以用键盘tab键来选择，那用户怎样知道自己是否选中呢？

可以用这个选择器来添加样式，一般应用于输入框。例：

        input:focus{
            border: 1px solid red;
        }

表示当用户用键盘tab键选中时，在输入框添加1像素的实现红色边框

 

④.  :checked  一般应用于多选框单选框等。表示选中状态，可以配合其他CSS声明来实现一些样式，直接上图说明

                                                               

 

 

3.结构伪类选择器

①.   代码格式：元素:nth-child(n){声明块}    元素可以是0-多个任意选择器，n表示要选择的第几个元素 

       要求：选择所在层级的第几个元素，如果和元素名不符则不应用样式

       特点：当有多个同样的标签时单独选中指定某个标签添加样式。

HTML代码例：

第一个div
第二个div
第三个div
第四个div
第五个div

需求：1.选中第一个div添加背景颜色为红色，宽度500像素，高度300像素

          2.选中最后一个div添加上外边距20像素，宽度300像素，高度100像素

CSS代码例：

div:nth-child(1){
            background-color:red;
            width:500px;
            height:300px;
} 

div:nth-child(5){
            margin-top:20px;
            width:300px;
            height:100px;
} 

 

 

如果HTML代码为：

第一个div
第二个div
我是P标签
第三个div
第四个div
第五个div

从上往下数，第五个标签不是我需求所要的第五个div，则CSS代码应该写第六个才是我想要添加样式的元素：

div:nth-child(6){
            margin-top:20px;
            width:300px;
            height:100px;
} 

 

 

 

②. 选中第一个      元素:first-child      选中最后一个         元素:last-child

HTML代码例：

第一个div
第二个div
第三个div
第四个div
第五个div

需求：选择第一个div元素和最后一个div元素添加背景色为红色（这里还可以选择组合选择器来书写）：

div:first-child,div:last-child{
                     bgckground-color:red;
}

 

 

③.  选中奇数元素格式：   元素：nth-child(odd)  odd也可以写2n+1    

       选中偶数元素格式：  元素：nth-child(even)  even也可以写2n

n表示从0开始自动自增的自然数

2n+1表示自增第一次为：2*0+1=1   第二次为：2*1+1=3   第三次为：2*2+1=5    ······以此循环就会只选中所有的奇数项

适用场景：购物车列表等，用户添加购物车的商品种类繁多，可以设置奇数项和偶数项的背景色不同，方便用户查看。

（这个n我觉得很有意思，有兴趣的同学可以深究一下，会有很多有意思的公式）

 

 

④.【扩展内容】选中第3个元素之后的所有元素：nth-child(n+3)    选中前三个元素：nth-child(-n+3)  

（只适用于所有兄弟元素都是一样的）

 

⑤.选中指定类型的标签。选中第一个元素：first-of-type{声明块}          选中最后一个元素：last-of-type{声明块}  

HTML代码例：

第一个div
第二个div
我是P标签
第三个div
第四个div
第五个div
我又是P标签

需求：选中第一个div和最后一个div添加背景颜色为红色

div:first-of-type,div:last-of-type{
                        background-color:red;
}

该选择器只会选中类型为div标签的第一个和最后一个（也就是元素内容是第一个div和第五个div的这两个），无视其他元素。

 

⑤.选中元素中唯一的元素  （无兄弟元素的标签）：only-child{声明块}  （可理解独生子选择器）

见名知意，父元素中只有一个为指定类型的标签，不论是第几个。HTML例：

第一个div
第二个div
我是P标签
第三个div
第四个div
第五个div

需求：选中唯一一个p标签添加红色文本颜色的样式

p:only-child{
        color:red;
}

⑥.选中没有元素内容的标签：empty{声明块}   无任何元素内容，包含空格、换行都不可以(基本不用) 理解就好

 

 

4.否定伪类选择器

①.代码书写格式  元素:not(:nth-child(n))   表示除了第三个样式以外的所有元素都被选中。

(括号内可以根据情况需要使用所有结构伪类选择器)

HTML代码例：

我是div
我是nav
我是P标签
我是header
我是section

需求：选中除了p元素以外的所有元素并添加红色背景，CSS代码为：

body>:not(:nth-child(3)){
             background-color: red;
}

 

②.【扩展内容】：元素A:not(:nth-child(3)) {声明块}    选中除了3和7意外的所有元素，可以理解成反选

body>:not(:nth-child(3)):not(:nth-child(7)){
             background-color: red;
}

 

 

 

5.伪元素选择器

 

①.  在某个元素前面添加内容  例： div::before{content:"内容"}   (两个英文冒号千万不要忘记)   

(在HTML中写一个任意元素[我这里写div]我这里就不展示了，自行测试)     

需求：在div元素前面添加文本“ABC”     CSS代码为：

div::before{
        content: "ABC";
}

一般适用于1. 清除浮动     2. 添加遮罩层     3.添加小图标  等等...

（看不懂的朋友不要心急，关注我，所有的前端内容我都会一一手打原创更新！）

 

②.   在某个元素后面添加内容  例：  div::after{content:"内容"}      （道理同上）

(伪元素选择器当同类型的元素都需要添加相同的内容时，可理解批量。例新闻门户网，每条新闻标题前面都会有一个小图标)

 

 

③.   选中元素的某一行添加样式    例：  p::first-line{color:red;} 表示选中p元素的第一行文本颜色为红色

 

④.   选中文本中汉字、英文第一个字母改变样式（如首字母大写，变色，首字下沉等）

        p::first-letter{color:blue;}      表示选中p元素中第一个单词或汉字颜色为蓝色

 

⑤.   当用户选中文本时，改变背景色和颜色。默认蓝底白字   

在提升用户体验方面很实用，假如你的网站主题色是社会色(deeppink)，就可以设置用户选中文本的颜色和主题颜色相似例：

p::selection{
     color:skyblue;
     background:deeppink;
} 

表示在用户选中文本时，背景色为社会色，字体颜色为天空蓝。默认效果和添加样式后的效果如下：

取值规则：1.设置背景色和颜色  2.text-shadow  3.text-decoration  4.cursor  5.outline

 

 

6.属性选择器

主要应用于表单

①.  格式：元素[属性名="属性值"]{CSS样式}    特点：精确选中某个元素

 

②.   格式：元素[属性名^="属性值"] {CSS样式}

特点：当你不记得某个元素的属性值全称，只记得属性值的开头前x位，就在上面格式的属性值中添加你记得的开头前x位

          也就是选中属性值以XX开头的的元素。

 

③.   格式：元素[属性名$="属性值"] {CSS样式}

特点：当你不记得某个元素的属性值全称，只记得属性值的结尾前x位，就在上面格式的属性值中添加你记得的结尾前x位

          也就是选中属性值以XX结尾的的元素。

 

④.   格式：元素[属性名*="属性值"] {CSS样式}

特点：当你不记得某个元素的属性值全称，只记得属性值的中间x位，就在上面格式的属性值中添加你记得的中间x位也就

          是选中属性值中间含有x位的的元素。

 

⑤. 格式：元素[属性名]{CSS样式}

特点：选中这种类型的元素中含有指定属性名的元素

 

---

---

 

 

 

 

---

---

 

 

本文内容就到此为止了，部分选择器在实际中并不会经常使用，甚至不用。你可以不用，但不能不知道。

感谢你的阅读，相信在看完之后一定会有所收获，但最重要的还是在实际中合理运用，才能写代码事半功倍！

欢迎大家留言补充更多关于选择器的知识点，我们共同学习进步！