我们知道网页是由标题、段落、盒子、图片等元素构成的，但是一个网页中相同的元素肯定不止一个如标题，而元素的样式也是不一样的，那我们如何给相同的元素设置不同的样式呢？下面就是我们要了解并掌握的内容。
因下面内容篇幅较长，可根据目录选择性阅读。
文章目录
历篇文章目录
第六节：CSS选择器与其伪类
一、基本选择器
选择器在上一节内容中我们也接触过，其实选择器就是标签名，而不同种类型的选择器要么是用别的名字代替类名成为选择器，要么就是不同标签名通过一定规则符号组合在一起成为选择器。
作用：选中网页中的指定元素，然后通过声明块为其设置样式。
1.基础选择器
1.1 标记选择器(元素选择器)
定义：标记选择器是指用HTML标记名称作为选择器。
作用：按照标记名称分类，为页面中某一类标记指定统一的CSS样式。
语法：选择器{属性: 属性值1; 属性: 属性值2; 属性: 属性值3;}
示例：
补充：
（1）标记选择器选中的内容可以同时设置相同的样式；
（2）标记选择器没法在众多p标记中单独为某一个p标记设置样式。
1.2 id选择器
定义：id选择器使用“#”进行标识，后面紧跟id属性值（id名）。
作用：根据元素的id属性值选中一个元素
语法：#id属性值{属性: 属性值1; 属性: 属性值2; 属性: 属性值3;}
示例：
补充：
（1）id选择器可以在众多同类型元素中单独为某一元素设置样式，具有唯一性；
（2）id属性的属性值要遵循唯一性，在网页中不能出现两个相同的id属性值；
（3）id选择器如果要为2个或则更多的p标记设置相同样式时需要取不同的id属性值，然后一个一个的设置相同的样式。
1.3 类选择器
定义：类选择器使用“.”(英文符号)进行标识，后面紧跟类属性值（类名）。
作用：根据元素的class属性值选中一组元素（一组可以是单个也可以是多个）。
语法：.class属性值{属性: 属性值1; 属性: 属性值2; 属性: 属性值3;}
示例：
补充：
（1）class是一个标签的属性，它和id类似，不同的是class的属性值可以重复使用，也就是一个class属性值可以给多个标记使用；
（2）可以通过class属性值为元素分组；
（3）可以同时为一个元素指定多个class属性，使用“space空格”隔开。
例：
1.4 通配符选择器
定义：通配符选择器用“ * ”号表示，它是选择器范围最广的。
作用：选中页面中所有元素为其设置样式。
语法：*{属性: 属性值1; 属性: 属性值2; 属性: 属性值3;}
示例：
2.复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，具体情况如下。
2.1 交集选择器（标签指定式选择器）
选择同时满足多个选择器的标签，将其内容设置样式。
定义：又称标签指定式选择器，一般由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或则id选择器，两个选择器之间不能有空格。
作用：选中同时符合多个选择器条件的元素。
语法：选择器1.选择器2.选择器3.n{属性: 属性值1; ...}
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器</title>
<style>
p {
color: red; /* 给p标记内容设置颜色为红色 */
}
.special {
color: green; /* 给标记类名设置为special的，将内容设置颜色为绿色 */
}
p.special {
color: blue; /* 给p标记中类名为special的，将内容设置颜色设置为蓝色 */
}
.a.b.c {
color: orange; /* 给标记类名设置为a,b,c的，将其内容颜色设置为橙色 */
}
p#one {
color:yellow; /* 给p标记中id名为one的，将其内容颜色设置为黄色*/
}
</style>
</head>
<body>
<h1>《离思》</h1>
<h2 class="special">唐·元稹</h2>
<p>曾经沧海难为水，</p>
<p id="one">除却巫山不是云。</p>
<p class="special">取次花丛懒回顾，</p>
<p class="a b c">半缘修道半缘君。</p>
</body>
</html>
补充：
（1）p#one选择器中的p是多此一举，因id选择器本就是唯一的，直接“#one{ … }”即可。
p#one {......}
2.2 并集选择器
选择多个选择器，将其这些选择器代表的标记与其相对应的内容，同时设置相同的样式。
定义：并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器、id选择器等），都可以作为并集选择器的一部分。
作用：同时选择多个选择器对应的元素。
语法：选择器1，选择器2，选择器3，n{属性: 属性值1; ...}
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器</title>
<style>
.s1,.s2 {
color: red; /* 选中类名分别为s1和s2的标记，将其两个标记内容颜色设置为红色*/
}
.a,#one,.c {
color: orange; /* 选中类名分别为a和c及id名为one的标记，将其三个标记内容颜色设置为橙色*/
}
</style>
</head>
<body>
<h1 class="a">《离思》</h1>
<h2 class="s1">唐·元稹</h2>
<p>曾经沧海难为水，</p>
<p id="one">除却巫山不是云。</p>
<p class="s2">取次花丛懒回顾，</p>
<p class="c">半缘修道半缘君。</p>
</body>
</html>
补充：
（1）语法格式还可以为 “h1.a,#one,p.c{属性: 属性值1; ...}”
3.关系选择器
3.1 元素之间的关系
元素之间的关系在前面的文章中初步涉及到过，其实类似我们亲人之间的关系称呼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素之间的关系</title>
</head>
<body>
<!--
父元素：直接包含子元素的元素叫做父元素。 例：boxA盒子是box-a1与box-a2盒子的父元素
子元素：直接被父元素包含的元素叫做子元素。例：box-a1与box-a2盒子是boxA盒子的子元素
祖先元素：直接或简洁包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素。
例：boxA盒子即是box-a1与box-a2盒子的祖先元素，也是它们的父元素。
<body>标记元素是boxA、box-a1、box-a2盒子的祖先元素，但只是boxA的父元素
后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素。
例：box-a1与box-a2盒子即是boxA盒子的子元素，也是boxA的后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素。 例box-a1与box-a2盒子互为兄弟元素，boxA与boxB也是互为兄弟元素。
-->
<div class="boxA">
<div class="box-a1"></div>
<div class="box-a2"></div>
</div>
<div class="boxB">
<div class="box-b"></div>
</div>
</body>
</html>
3.2 子元素选择器
定义：子元素选择器用来选中某一父元素中下的某一子元素，通过">"号连接，父元素在前子元素在后。
作用：选中指定的父元素中再指定的子元素，为子元素设置样式。
语法：父元素>子元素>子元素>...{属性: 属性值1; ...}
示例：
3.3 兄弟选择器
定义：兄弟选择器用来选择某一元素离的最近的兄弟元素，该兄弟元素在html页面必须处于下面位置，通过“+”连接。
作用：选中指定元素相邻的兄弟元素，为选中的兄弟元素设置样式。
语法：兄弟元素+下一个兄弟元素{属性: 属性值1; ...}
示例：
补充：
（1）兄弟选择器一定是“兄弟元素+下一个兄弟元素”，中间不能有其它符号空格。
（2）还可以通过兄弟元素~下一个兄弟元素{属性: 属性值1; ...}该语法为下面一片相同标记的兄弟元素设置样式。
3.4 后代选择器
定义：后代选择器用来选择元素或元素组的后代，外层标记在前，内层标记在后，中间有一个空格
作用：选中指定元素内的指定后代元素，为后代元素设置样式。
语法：祖先元素 子元素 子元素 ...{属性: 属性值1; ...}
示例：
二、特殊选择器
1.伪类选择器
伪类：是一种不存在的类，特殊的类。用来描述一个元素的特殊状态，比如第一个元素，被点击的元素，鼠标移入的元素等。
语法：选择器组或则选择器:伪类{属性:属性值；......}
常见的伪类1：
:first-child 选中第一个子元素
:last-child 选中最后一个子元素
:nth-child() 选中第n个子元素
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
/* 选中ul中的第一个li子元素并设置颜色为红色 */
ul > li:first-child{
color: red;
}
/* 选中ul中的最后一个li子元素并设置颜色为红色 */
ul > li:last-child{
color: red;
}
/* 选中ul中下面奇数位的li子元素并设置颜色为红色 */
ul > li:nth-child(2n+1){
color: red;
}
/* 选中ul中下面偶数位的li子元素并设置颜色为红色 */
ul > li:nth-child(even){
color: red;
}
</style>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>
补充：
（1）上面选择器的语法还可以为“li:nth-child(2n+1){......}"，表示选中子元素的li并且li子元素要在奇数位，给这些li子元素设置样式。
常见的伪类2：
下面几个伪类与上面的伪类功能上类似，不同点是下面的伪类计算标记顺序是按照同种类型标记来计算，然后进行排序的。
:first-of-type 选中同类型中第一子元素
:last-of-type 选中同类型中最后一个子元素
:nth-of-type() 选中同类型中第n个子元素
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
:not() 否定伪类(将符合条件的元素从选择器中去除)
例：ul > li:not(:nth-of-type(3)){ color: yellow; }将除第3个子元素li外，其余的li子元素内容颜色设置为黄色
1.1 a标记的伪类
作用：用来修饰超链接在不同状态下链接的样式。
<style>
/*
:link 用来表示没访问过的链接（正常的链接）
*/
a:link{color: red;}
/*
:visited 用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
*/
a:visited{color: orange;}
/*
:hover 用来表示鼠标移入的状态
*/
a:hover{color: aqua; font-size: 50px;}
/*
:active 用来表示鼠标点击
*/
a:active{color: yellowgreen;}
</style>
2.伪元素选择器
伪元素：表示网页中一些特殊的并不真实存在的元素(也就是一些元素特殊的位置可以称为伪元素)
作用：对那些元素的特殊位置设置样式
语法：选择器组或则选择器::伪元素{属性:属性值；......}
常用的伪元素：
::first-letter 表示某元素内容第一个字母
::first-line 表示某元素内容第一行
::selection 表示某元素选中的内容
::before 元素的开始
::after 元素的最后
before 和 after 必须结合content属性来使用
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
font-size: 20px;
}
/* 设置p标记内容中第一个字母的大小为20px */
p::first-letter{
font-size: 50px;
}
/* 设置p标记内容中第一行内容的背景颜色为黄色 */
p::first-line{
background-color: yellow;
}
/* 设置p标记中的内容被鼠标选中时的背景颜色为橙色 */
p::selection{
background-color: orange;
}
/* content相当于一个容器，它通过before和after插在元素内容的前面或则后面，它依旧属性div区域范围内 */
div::before{
/* 给div内容的前面插入“『”符号 */
content: '『';
}
div::after{
/* 给div内容的后面插入“』”符号 */
content: '』';
}
</style>
</head>
<body>
<div>Hello Hello How are you</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.
</p>
</body>
</html>
总结
该篇文章主要讲述了CSS样式表中基本的选择器和两个特殊的选择器，对伪类与伪元素进行一定的总结，该篇幅较长导致阅读时间长，以后需要尽量用精炼语言和更直观的例子代替。
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
