本篇文章主要讲解目前学到的常用选择器并附上案例和代码，大家可以一块沟通讨论。
文章目录
- 主要讲解目前学到的34种常用选择器，我大致分为了几部分，分别是：
- 4种
- 5种
- 6种
- 7种
- 5种
- 5种
- 2种
想知道分别是哪几种吗，那就继续往下看吧~
中间会展示代码的写法，不是结果，最后会有总体有结果的所有代码！
4种：
通配符选择器 选择所有标签
标签选择器 选择所有此类标签
类名选择器 选择所有拥有此类名的标签
id选择器 选择拥有id并且值匹配的标签
/* 通配符选择器 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 标签选择器 */
span {
color: coral;
}
/* 类名选择器 */
.yi-yi {
font-size: 30px;
}
/* id选择器 */
#yi-san {
font-weight: 900;
}5种：
逗号选择器 满足逗号左边右边都算，互不影响
空格选择器 选择父元素下所有此子孙元素
大于号选择器 选择父元素下所有此子元素
加号选择器 加号后面满足加号前面需求，选择后面紧挨着的元素
波浪号选择器 波浪号后面满足波浪号前面的条件，选择后续所有同列同类元素
/* 逗号选择器 */
.er-yi,
.er-li1 {
color: red;
}
/* 空格选择器 */
.er ul li {
font-size: 20px;
}
/* 大于号选择器 */
.er ul>li {
background-color: aquamarine;
}
/* 加号选择器 */
.er ul .er-li2+li {
color: blue;
}
/* 波浪号选择器 */
.er ul li~li {
font-weight: 800;
}6种：
[属性名] 选择所有拥有此属性名的元素
[属性名="val"] 选择拥有此属性并且值为val的元素
[属性名^="val"] 选择拥有此属性并且值以val开头的元素
[属性名$="val"] 选择拥有此属性并且值以val结尾的元素
[属性名*="val"] 选择拥有此属性并且值中包含val的元素
[属性名~="val"] 选择拥有此属性并且其中一个值为val的元素，多用于class属性
/* [属性名]{} */
[title] {
line-height: 30px;
}
/* [属性名="ww"] */
[title="ww"] {
color: blue;
}
/* [属性名^="wm"] */
[title^="wm"] {
color: lawngreen;
}
/* [属性名$="wm"] */
[title$="wm"] {
color: brown;
}
/* [属性名*=123] */
[title*="123"] {
font-size: 50px;
}
/* [属性名~=md] */
[class~="md"] {
color: darkcyan;
}7种
:link 超级链接未访问过
:visited 超级链接访问过
以上两种多用于超链接
:hover 鼠标划入时状态
:active 鼠标点击时状态
以上两种通用
:focus 鼠标聚焦到边框的状态
:checked 选择默认选中的元素
:disabled 选择默认禁用的元素
以上三种多用于表单
/* 未访问过 */
.si a:link {
color: blue;
}
/* 访问过 */
.si a:visited {
color: lawngreen;
}
/* 鼠标划入 */
.si a:hover {
background-color: aqua;
}
/* 鼠标点击 */
.si a:active {
font-size: 30px;
}
/* 聚焦 */
.si input {
outline: none;
}
.si input:focus {
border-color: red;
}
/* 默认选中 */
.si input:checked {
width: 30px;
height: 30px;
}
/* 禁用 */
.si input:nth-of-type(2):disabled {
background-color: burlywood;
}5种：
:first-child 父元素下第一个子元素
:last-child 父元素下最后一个子元素
:nth-child(n) 父元素下第n个子元素
:nth-last-child(n) 父元素下倒数第n个子元素
:only-child 父元素下唯一子元素
以上几种子元素会受到其他子元素的影响，假如要选择span但是他是父元素的第二个子元素，那么他就不能从第一个算起。
/* 父元素下第一个子元素 */
.wu span:first-child {
color: blueviolet;
}
/* 父元素下最后一个子元素 */
.wu span:last-child {
color: blue;
}
/* 父元素下第n个子元素 */
.wu span:nth-child(2) {
font-size: 30px;
}
/* 父元素下倒数第n个子元素 */
.wu span:nth-last-child(2) {
background-color: aquamarine;
}
/* 父元素下唯一子元素 */
.wu span:only-child {
background-color: chartreuse;
}接下来说一种子元素不受其他元素影响的选择器
5种：
:first-of-type 父元素下第一个此类子元素
:last-of-type 父元素下最后一个此类子元素
:nth-of-type(n) 父元素下第n个此类子元素
:nth-last-of-type(n) 父元素下倒数第n个此类子元素
:only-of-type 父元素下唯一此类元素
以上选择器不会受其他子元素的影响，会直接从同类元素开始算起。
/* 父元素下第一个此类元素 */
.liu span:first-of-type {
color: aqua;
}
/* 父元素下最后一个此类元素 */
.liu span:last-of-type {
color: cadetblue;
}
/* 父元素下第n个此类元素 */
.liu span:nth-of-type(2) {
font-size: 40px;
}
/* 父元素下倒数第n个此类元素 */
.liu span:nth-last-of-type(2) {
background-color: aquamarine;
}
/* 父元素下唯一此类元素 */
.liu p:only-of-type {
background-color: burlywood;
}2种：
说是2种其实中间还有个小知识点，就是选择时可以按照偶数和奇数进行选择
（even为选择偶数标签）
（odd为选择奇数标签）
:empty 选择没有内容的空标签
:not() 满足前面但不满足括号内
/* 选择偶数标签 */
.qi span:nth-child(even) {
color: blue;
}
/* 选择奇数标签 */
.qi span:nth-child(odd) {
color: springgreen;
}
/* 空标签 */
.qi span:empty {
display: inline-block;
background-color: lawngreen;
width: 40px;
height: 17px;
}
/* 满足前面但不满足后面 */
.qi span:nth-child(even):not(span:nth-child(4)) {
font-size: 30px;
}以上是所有CSS常用选择器的使用及其书写示例
下面就看一下整体所有的代码吧
代码比较多，包含了所有选择器的使用案例，有需要的可以试一下，最后有每一块选择器的结果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 通配符选择器 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 标签选择器 */
span {
color: coral;
}
/* 类名选择器 */
.yi-yi {
font-size: 30px;
}
/* id选择器 */
#yi-san {
font-weight: 900;
}
/* 逗号选择器 */
.er-yi,
.er-li1 {
color: red;
}
/* 空格选择器 */
.er ul li {
font-size: 20px;
}
/* 大于号选择器 */
.er ul>li {
background-color: aquamarine;
}
/* 加号选择器 */
.er ul .er-li2+li {
color: blue;
}
/* 波浪号选择器 */
.er ul li~li {
font-weight: 800;
}
/* [属性名]{} */
[title] {
line-height: 30px;
}
/* [属性名="ww"] */
[title="ww"] {
color: blue;
}
/* [属性名^="wm"] */
[title^="wm"] {
color: lawngreen;
}
/* [属性名$="wm"] */
[title$="wm"] {
color: brown;
}
/* [属性名*=123] */
[title*="123"] {
font-size: 50px;
}
/* [属性名~=md] */
[class~="md"] {
color: darkcyan;
}
/* 未访问过 */
.si a:link {
color: blue;
}
/* 访问过 */
.si a:visited {
color: lawngreen;
}
/* 鼠标划入 */
.si a:hover {
background-color: aqua;
}
/* 鼠标点击 */
.si a:active {
font-size: 30px;
}
/* 聚焦 */
.si input {
outline: none;
}
.si input:focus {
border-color: red;
}
/* 默认选中 */
.si input:checked {
width: 30px;
height: 30px;
}
/* 禁用 */
.si input:nth-of-type(2):disabled {
background-color: burlywood;
}
/* 父元素下第一个子元素 */
.wu span:first-child {
color: blueviolet;
}
/* 父元素下最后一个子元素 */
.wu span:last-child {
color: blue;
}
/* 父元素下第n个子元素 */
.wu span:nth-child(2) {
font-size: 30px;
}
/* 父元素下倒数第n个子元素 */
.wu span:nth-last-child(2) {
background-color: aquamarine;
}
/* 父元素下唯一子元素 */
.wu span:only-child {
background-color: chartreuse;
}
/* 父元素下第一个此类元素 */
.liu span:first-of-type {
color: aqua;
}
/* 父元素下最后一个此类元素 */
.liu span:last-of-type {
color: cadetblue;
}
/* 父元素下第n个此类元素 */
.liu span:nth-of-type(2) {
font-size: 40px;
}
/* 父元素下倒数第n个此类元素 */
.liu span:nth-last-of-type(2) {
background-color: aquamarine;
}
/* 父元素下唯一此类元素 */
.liu p:only-of-type {
background-color: burlywood;
}
/* 选择偶数标签 */
.qi span:nth-child(even) {
color: blue;
}
/* 选择奇数标签 */
.qi span:nth-child(odd) {
color: springgreen;
}
/* 空标签 */
.qi span:empty {
display: inline-block;
background-color: lawngreen;
width: 40px;
height: 17px;
}
/* 满足前面但不满足后面 */
.qi span:nth-child(even):not(span:nth-child(4)) {
font-size: 30px;
}
</style>
</head>
<body>
<div class="yi">
<span class="yi-yi">yi-yi</span>
<span>yi-er</span>
<span id="yi-san">yi-san</span>
</div>
<hr>
<div class="er">
<span class="er-yi">er-yi</span>
<ul>
<li class="er-li1">li2-1</li>
<li class="er-li2">li2-2</li>
<li>li2-3</li>
<li>li2-4</li>
</ul>
</div>
<hr>
<div class="san">
<span title="ww">san-span1</span>
<span title="wmd">san-span2</span>
<span title="dwm">san-span3</span>
<span title="123456">san-span4</span>
<span class="ww md">san-span5</span>
</div>
<hr>
<div class="si">
<a href="https//www.lol.com">lol
</a>
<a href="">百度</a>
<input type="text">
<input disabled type="text">
<br>
<input checked name="sex" type="radio">男
<input name="sex" type="radio">女
</div>
<hr>
<div class="wu">
<span>wu-span1</span>
<span>wu-span2</span>
<span>wu-span3</span>
<p>
<span>wu-onlyspan</span>
</p>
<span>wu-span4</span>
<span>wu-span5</span>
</div>
<hr>
<div class="liu">
<a href="">baidu</a>
<span>liu-span1</span>
<span>liu-span2</span>
<span>liu-span3</span>
<p>liu-p</p>
<span>liu-span4</span>
<span>liu-span5</span>
<a href="">taobao</a>
</div>
<hr>
<div class="qi">
<span>qi-span1</span>
<span>qi-span3</span>
<span>qi-span4</span>
<span>qi-span5</span>
<span>qi-span6</span>
<span>qi-span7</span>
<span></span>
</div>
<hr>
</body>
</html>一下用横线分割开来了每一块选择器的使用效果，可以参照代码看一下
总结
那文章到这就结束了，谢谢大家的观看，欢迎大家一块沟通讨论，我后续还会持续更新前端知识内容！！
扫一扫
1044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
