共计 3203 个字符，预计需要花费 9 分钟才能阅读完成。
- 交加选择器
- 并集选持器
- 后辈选择器
- 子元素选择器
- 相邻兄弟选择器
- 属性选择器
交加选择器
交加选择器由两个选择器间接连贯形成，其中第一个选择器必须是元素选择器，第二个选择器必须是类选择器或者 ID 选择器，两个选择器之间必须间断写，不能有空格。
交加选择器抉择的元素必须是由第一个选择器指定的元素类型，该元素必须蕴含第二个选择器对应的 ID 名或类名。交加选择器抉择的元素的款式是三个选择器款式，即第一个选择器;
语法：
元素选择器 . 类选择器| #ID 选择器 {
属性 1: 属性值 1；属性 2: 属性值 2；}语法阐明：“类选择器| ID 选择器”示意应用类选择器，或者应用 ID 选择器。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 应用交加选择器设置款式 </title>
<style>
/* 元素选择器设置边框和下外边距款式 */
div {
border: 5px solid red;
margin-bottom:20px;
}
/* 交加选择器设置背景色彩 */
div.txt {background:#33FFCC;}
/* 类选择器设置字体格局 */
.txt {font-style:italic;}
</style>
</head>
<body>
<div> 元素选择器成果 </div>
<div class="txt"> 交加选择器成果 </div>
<span class="txt"> 类选择器成果 </p>
</body>
</html>并集选择器
并集选择器也叫分组选择器或群组选择器，它是由两个或两个以上的任意选择器组成的，不同选择器之间用“，”隔开，实现对多个选择器进行“个体申明”。
并集选择器的特点是所设置的款式对并集选择器中的各个选择器都无效。
并集选择器的作用是把不同选择器的雷同款式抽取进去，而后放到一个中央作一次性定义，从而简化了 CSS 代码量。
语法：
选择器 1,
选择器 2,
选择器 3,
{
属性 1: 属性值 1；属性 2: 属性值 2；}语法阐明：选择器的类型任意，既能够是根本选择器，也能够是一个复合选择器。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 应用并集选择器设置款式 </title>
<style>
div {
margin-bottom:10px;
border:3px solid red;
}
span {font-size:26px;}
p {font-style:italic;}
/* 应用并集选择器设置元素的公共款式 */
span,
.p1,
#d1 {background:#CCC;}
</style>
</head>
<body>
<div id="d1"> 这是 DIV1</div>
<div> 这是 DIV2</div>
<p class="p1"> 这是段落一 </p>
<p> 这是段落二 </p>
<span> 这是一个 SPAN</div>
</body>
</html>后辈选择器
后辈选择器又称蕴含选择器，用于抉择指定元素的后辈元素。应用后辈选择器能够帮忙咱们更快更确切地找到指标元素。
语法：
选择器 1 选择器 2 选择器 3 {
属性 1: 属性值 1；属性 2: 属性值 2；}例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 应用后辈选择器设置款式 </title>
<style>
#box1 .p1 { /* 后辈选择器 */
background:#CCC;
}
#box2 p { /* 后辈选择器 */
background:#CFC;
}
</style>
</head>
<body>
<div id="box1">
<p class="p1"> 段落一 </p>
<p class="p2"> 段落二 </p>
</div>
<div id="box2">
<p class="p1"> 段落三 </p>
<p> 段落四 </p>
</div>
<p class="p1"> 段落五 </p>
<p> 段落六 </p>
</body>
</html>子元素选择器
后辈选择器能够抉择某个元素指定类型的所有后辈元素，如果只想抉择某个元素的所有子元素，则须要应用子元素选择器。
语法：
选择器 1> 选择器 2 {
属性 1: 属性值 1;
属性 2: 属性值 2;
}语法阐明：“>”称为左联合符，在其左右两边能够呈现空格，“选择器 1> 选择器 2”的含意为“抉择作为选择器 1 指定元素的所有选择器 2 指定的子元素”.
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 子元素选择器利用示例 </title>
<style>
h1>span {color:red;}
</style>
</head>
<body>
<h1> 这是十分十分 <span> 重要 </span> 且 <span> 要害 </span> 的一步。</h1>
<h1> 这是真的十分 <em><span> 重要 </span> 且 <span> 要害 </span></em> 的一步。</h1>
</body>
</html>相邻兄弟选择器
如果须要抉择紧接在某个元素后的元素，而且二者有雷同的父元素，能够应用相邻兄弟选择器。
语法:
选择器 1+ 选择器 2 {
属性 1: 属性值 1;
属性 2: 属性值 2;
}例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 相邻兄弟选择器利用示例 </title>
<style>
h1+p {
color:red;
font-weight:bold;
margin-top:50px;
}
p+p{
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<h1> 这是一个一级题目 </h1>
<p> 这是段落 1。</p>
<p> 这是段落 2。</p>
<p> 这是段落 3。</p>
</body>
</html>属性选择器
在 CSS 中，咱们还能够依据元素的属性及属性值来抉择元素，此时用到的选择器称为属性选择器。属性选择器的应用次要有 2 种模式，
语法:
属性选择器 1 属性选择器 2...{
属性 1: 属性值 1;
属性 2: 属性值 2;
}
元素选择器属性选择器 1 属性选择器 2... {
属性 1: 属性值 1;
属性 2: 属性值 2;
}语法阐明：属性选择器的写法是 [属性表达式]，其中属性表达式能够是一个属性名，也能够是“属性=属性值”等这样的表达式.
属性选择器的利用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 属性选择器的利用 </title
<style>
[title] {/* 抉择具备 title 属性的元素 */
color: #F6F;
}
a[href][title]{/* 抉择同时具备 href 和 title 属性的 a 元素 */
font-size: 36px;
}
img[alt] {/* 抉择具备 alt 属性的 img 元素 */
border: 3px #f00 solid;
}
p[align="center"] {/* 抉择 align 属性等于 center 的 p 元素 */
color: red;
font-weight: bolder;
}
</style>
</head>
<body>
<h2> 利用属性选择器款式：</h2>
<h3 title="Helloworld">Helloworld</h3>
<a title="首页"href="#"> 返首页 </a><br/><br/>
<img src="miaov.jpg" alt="logo" />
<p align="center"> 段落一 </p>
<hr />
<h2> 没有利用属性选择器款式
<h3>Helloworld</h3>
<a href="#"> 返首页 </a><br/><br/>
<img src="miaov.jpg">
<p align="right"> 段落二 </p>
</body>
</html>
