CSS选择器
在 CSS 中，选择器是选取需设置样式的元素的模式，要对HTML页面中的元素实现一对一，一对多或者多对一的控制，就需要用到CSS选择器。
文章目录
- CSS选择器
- 1 基本选择器
- 1.1 标签选择器
- 1.2 类选择器（class选择器）
- 1.3 id选择器
- 2 高级选择器
- 2.1 层次选择器
- 2.1.1 后代选择器
- 2.1.2 子代选择器
- 2.1.3 相邻兄弟选择器
- 2.1.4 通用选择器
- 2.2 结构伪类选择器
- 2.3 属性选择器
1 基本选择器
CSS基本选择器包括标签选择器、类选择器和id选择器三种，其优先度为id选择器>类选择器>标签选择器。
1.1 标签选择器
标签选择器是指用 HTML标签名作为选择器，为页面中所有该标签的元素指定统一的CSS样式。
代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<style type="text/css">
h1{
background: #EE0E12;
}
li{
color: aqua;
}
</style>
</head>
<body>
<h1>标题</h1>
<div>
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</div>
</body>
</html> 网页显示如下：
1.2 类选择器（class选择器）
类选择器使用 “ . ”进行标识，后面紧跟类名 ，表示为页面中所有该类的元素指定统一的CSS样式，不同元素的类名可以相同。
代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style type="text/css">
.class1{
background:#21D4E4;
color: #EA5610;
}
.class2{
color: #1939F2;
font-family: 楷体;
font-size:20px;
}
</style>
</head>
<body>
<h1 class="class1">标题</h1>
<div>
<ul>
<li class="class1">项目一</li>
<li class="class1">项目二</li>
<li class="class2">项目三</li>
</ul>
</div>
</body>
</html> 网页显示如下：
1.3 id选择器
id选择器使用 “ # ” 进行标识，后面紧跟 id 名，表示为页面中某一id的元素指定CSS样式，每个元素的id必须不同，即id具有唯一性。
代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
.class1{
background:#21D4E4;
color: #EA5610;
}
#id1{
background:#19E02B;
font-style: oblique;
font-size: 20px;
}
#id2{
background:#0C8BDA;
font-style:italic;
font-size: 20px;
}
</style>
</head>
<body>
<h1 class="class1">标题</h1>
<div>
<ul>
<li class="class1">项目一</li>
<li class="class1" id="id1">项目二</li>
<li class="class2" id="id2">项目三</li>
</ul>
</div>
</body>
</html> 网页显示如下：
2 高级选择器
2.1 层次选择器
2.1.1 后代选择器
后代选择器表示为页面中某个元素的所有后代（例如：爷爷的所有后代爸爸、我等人）指定CSS样式，其写法为把外层标签写在前面 ，内层标签写在后面，二者中间用空格分隔，内层标签即为外层标签的后代。
代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">
body h1{
background: #10DE1D;
color: #F30D1A;
}
</style>
</head>
<body>
<h1>标题一</h1>
<div>
<h1>标题二</h1>
<div>
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</div>
</div>
</body>
</html> 网页显示如下：
2.1.2 子代选择器
子代选择器表示为页面中某个元素的所有子代（例如：爷爷的子代爸爸）指定CSS样式，其写法为把外层标签写在前面 ，内层标签写在后面，二者中间用“>"分隔，内层标签即为外层标签的子代。
代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子代选择器</title>
<style type="text/css">
body>h1{
background: #10DE1D;
color: #F30D1A;
}
</style>
</head>
<body>
<h1>标题一</h1>
<div>
<h1>标题二</h1>
<div>
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</div>
</div>
</body>
</html> 网页显示如下：
2.1.3 相邻兄弟选择器
相邻兄弟选择器表示为页面中某个元素向下筛选其同辈某一标签的相邻（即第一个）元素，为它指定CSS样式，其写法为“类选择器+标签名"。
代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
.class1+p{
background: #10DE1D;
color: #F30D1A;
}
</style>
</head>
<body>
<h1>标题</h1>
<p class="class1">第一个段落。</p>
<p>第二个段落。</p>
<div>
<div>
<ul>
<li >项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</div>
</div>
<p>第三个段落。</p>
<p class="class1">第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
</body>
</html> 网页显示如下：
2.1.4 通用选择器
通用选择器表示为页面中某个元素向下筛选其同辈某一标签的所有元素，为它们指定CSS样式，其写法为“类选择器~标签名"。
代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通用选择器</title>
<style type="text/css">
.class1~p{
background: #10DE1D;
color: #F30D1A;
}
</style>
</head>
<body>
<p>一个普通的段落。</p>
<h1 class="class1">标题</h1>
<p >第一个段落。</p>
<p>第二个段落。</p>
<div>
<div>
<ul>
<li >项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</div>
</div>
<p>第三个段落。</p>
</body>
</html> 网页显示如下：
2.2 结构伪类选择器
结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁，其写法为“标签:匹配对象”。其常用匹配对象有如下几种：
- first-child：用来选取某个标签下的第一个元素。
- last-child：用来选取某个标签下的最后一个元素。
- nth-child(n)：用来选取某个标签的父级下正数第n个元素,且必须和当前元素同一类型，否则不选中。
- nth-of-type(编号)：用来选取某个标签的父级下正数第n个符合某类型的元素。
代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>结构伪类选择器</title>
<style type="text/css">
ul li:first-child{
color:#EF080C;
}
ul li:last-child{
color: #0EF283;
}
p:nth-child(2){
color:aqua;
}
p:nth-of-type(3){
background: #D3ED13;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<div>
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</div>
<p>第三个段落。</p>
<p>第四个段落。</p>
</body>
</html> 网页显示如下：
2.3 属性选择器
属性选择器可以为拥有指定属性的 HTML 元素设置样式，其写法为“标签[属性名=属性值]”。
- =表示绝对等于
- *=表示包含
- ^=表示以…开头
- $=表示以…结尾
- 存在id属性的元素 a[]{}
代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
a{
text-decoration: none;
display: inline-block;
margin: 10px;
padding: 5px;
background: #F3F210;
color:#000000;
}
a[id="id7"]{
color:red;
}
a[class*="class"]{
color:goldenrod;
}
a[href$="png"]{
color:white;
}
a[href^="https"]{
color:blue;
}
</style>
</head>
<body>
<a href="https://www.hao123.com" alt="" class="" id="id1">1</a>
<a href="https://www.baidu.com" alt="" class="" id="id2">2</a>
<a href="1.jpg" alt="" class="class1" id="id3">3</a>
<a href="2.jpg" alt="" class="class2" id="id4">4</a>
<a href="3.png" alt="" class="" id="id5">5</a>
<a href="4.png" alt="" class="" id="id6">6</a>
<a href="5.jpg" alt="" class="" id="id7">7</a>
<a href="6.jpg" alt="" class="" id="id8">8</a>
</body>
</html> 网页显示如下：
