CSS教程
CSS入门二（CSS的选择器）
本文主要是介绍CSS入门二（CSS的选择器），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
文章目录
- 1、CSS的属性选择器
- （1）标签名[属性名]
- （2）标签名[属性名=值]
- （3）标签名[属性名^=值]
- （4）标签名[属性名$=值]
- 2、CSS的关系选择器
- （1）子元素选择器
- （2）相邻兄弟选择器
- A:临近兄弟选择器
- B:普通兄弟选择器
- 3、CSS的复合选择器
- 4、CSS的子元素选择器
- 5、CSS的伪类选择器
- (1):hover
- (2)a:visited
- (3)a:link
- (4)a:active
- (5):root
- (6):not()
- (7):only-child
- (8):first-child和:last-child
- (9):nth-child(n)和:nth-last-child(n)
- 6、CSS的伪元素选择器
- （1）:before选择器
- （2）:after选择器
1、CSS的属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
（1）标签名[属性名]
........ 标签名[属性名]：选择含有给定属性的标签 ........
举例如下：
<style>
li[title]{
color: blue; font-size: 80px;
}
</style>
.......
<ul>
<li title="yd">西安邮电大学</li>
<li title="xa-jt">西安交通大学</li>
<li id="dzkj">西安电子科技大学</li>
<li class="lg-dx">西安理工大学</li>
<li title="zf-dx">西北政法大学</li>
<li title="xa-sf">陕西师范大学</li>
</ul>
（2）标签名[属性名=值]
........ 标签名[属性名=值]：选择含有给定属性值的标签 ........
举例如下：
<style>
li[title='yd']{
color: blue; font-size: 80px;
}
</style>
.......
<ul>
<li title="yd">西安邮电大学</li>
<li title="xa-jt">西安交通大学</li>
<li id="dzkj">西安电子科技大学</li>
<li class="lg-dx">西安理工大学</li>
<li title="zf-dx">西北政法大学</li>
<li title="xa-sf">陕西师范大学</li>
</ul>
（3）标签名[属性名^=值]
........ 标签名[属性名^=值]：选择给定属性值是以某个字符开头的 ........
举例如下：
<style>
li[title^='xa']{
color: blue; font-size: 80px;
}
</style>
.......
<ul>
<li title="yd">西安邮电大学</li>
<li title="xa-jt">西安交通大学</li>
<li id="dzkj">西安电子科技大学</li>
<li class="lg-dx">西安理工大学</li>
<li title="zf-dx">西北政法大学</li>
<li title="xa-sf">陕西师范大学</li>
</ul>
（4）标签名[属性名$=值]
........ 标签名[属性名$=值]：选择给定属性值是以某个字符结尾的 ........
举例如下：
<style>
li[title$='dx']{
color: blue; font-size: 80px;
}
</style>
.......
<ul>
<li title="yd">西安邮电大学</li>
<li title="xa-jt">西安交通大学</li>
<li id="dzkj">西安电子科技大学</li>
<li class="lg-dx">西安理工大学</li>
<li title="zf-dx">西北政法大学</li>
<li title="xa-sf">陕西师范大学</li>
</ul>
示例：
<!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>003</title>
</head>
<style>
li[id] {
color: red; font-size: 50px;
}
li[title^='xa'] {
color: blue; font-size: 80px;
}
li[title='yd'] {
color: yellow; font-size: 77px;
}
li[title$='dx'] {
color: #5fd; font-size: 44px;
}
</style>
<body>
<ul>
<li title="yd">西安邮电大学</li>
<li title="xa-jt">西安交通大学</li>
<li id="dzkj">西安电子科技大学</li>
<li class="lg-dx">西安理工大学</li>
<li title="zf-dx">西北政法大学</li>
<li title="xa-sf">陕西师范大学</li>
</ul>
</body>
</html>
2、CSS的关系选择器
关系选择器和前面讲的复合选择器类似，但关系选择器可以更精确的控制元素样式。CSS3中的关系选择器主要包括子元素选择器和相邻兄弟选择器，其中子元素择器由符号“>”连接，相邻兄弟选择器由符号“+”和“~”连接。
（1）子元素选择器
子元素择器主要用来选择某个元素的第一级子元素，表示为父标签 > 子标签。
举例如下：
<style>
ul>li {
color: red; font-size: 80px;
}
</style>
（2）相邻兄弟选择器
兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。
A:临近兄弟选择器
该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。
举例如下：
<style>
ul>li {
color: red; font-size: 80px;
}
</style>
<!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>003</title>
</head>
<style>
ul+ol {
color: #ad6; font-size: 80px;
}
</style>
<body>
<ul>
<li title="yd">西安邮电大学</li>
<li title="xa-jt">西安交通大学</li>
<li id="dzkj">西安电子科技大学</li>
</ul>
<ol>
<li>北京邮电大学</li>
<li>清华大学</li>
<li>北京大学</li>
</ol>
<ul>
<li>王昭君</li>
<li>貂蝉</li>
<li>杨玉环</li>
</ul>
</body>
</html>
B:普通兄弟选择器
普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。
举例如下：
<style>
ul~ul {
color: #ad6; font-size: 80px;
}
</style>
<!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>003</title>
</head>
<style>
ul~ul {
color: #ad6; font-size: 80px;
}
</style>
<body>
<ul>
<li title="yd">西安邮电大学</li>
<li title="xa-jt">西安交通大学</li>
<li id="dzkj">西安电子科技大学</li>
</ul>
<ul>
<li>北京邮电大学</li>
<li>清华大学</li>
<li>北京大学</li>
</ul>
<ul>
<li>王昭君</li>
<li>貂蝉</li>
<li>杨玉环</li>
</ul>
</body>
</html>
3、CSS的复合选择器
用逗号分隔
<style>
#dzkj,.lg-dx {
color: #ad6; font-size: 80px;
}
</style>
<!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>003</title>
</head>
<style>
#dzkj,.lg-dx {
color: #ad6; font-size: 80px;
}
</style>
<body>
<ul>
<li title="yd">西安邮电大学</li>
<li title="xa-jt">西安交通大学</li>
<li id="dzkj">西安电子科技大学</li>
<li class="lg-dx">西安理工大学</li>
<li title="zf-dx">西北政法大学</li>
<li title="xa-sf">陕西师范大学</li>
</ul>
</body>
</html>
4、CSS的子元素选择器
用空格分隔
#dd li {
color: #ad6; font-size: 80px;
}
<!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>003</title>
</head>
<style>
#dd li {
color: #ad6; font-size: 80px;
}
</style>
<body>
<ol id="dd">
<li>北京邮电大学</li>
<li>清华大学</li>
<li>北京大学</li>
</ol>
<ul>
<li>王昭君</li>
<li>貂蝉</li>
<li>杨玉环</li>
</ul>
</body>
</html>
5、CSS的伪类选择器
(1):hover
当鼠标悬停在目标对象上时,展示的形式。
<!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>003</title>
</head>
<style>
#dd li:hover{
color: #ad6; font-size: 80px;
}
</style>
<body>
<ol id="dd">
<li>北京邮电大学</li>
<li>清华大学</li>
<li>北京大学</li>
</ol>
<ul>
<li>王昭君</li>
<li>貂蝉</li>
<li>杨玉环</li>
</ul>
</body>
</html>
(2)a:visited
表示已经访问过的超链接的样子
:visited {
font-size: 65px;
color: blue;
}
(3)a:link
超链接未被访问的样式
a:link {
color: crimson;
}
(4)a:active
激活超链接时
a:active {
color: yellow;
}
举例如下：
<!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>超链接a的伪类选择器</title>
</head>
<style>
/* 超链接未被访问时 */
a:link {
color: crimson;
}
/* 当链接已经被访问 */
a:visited {
font-size: 65px;
color: blue;
}
/* 当鼠标悬停在超链接上时 */
a:hover {
font-size: 15px;
color: purple;
}
/* 激活超链接时 */
a:active {
color: yellow;
}
</style>
<body>
<a href="#">百度</a>
<br><br>
<a href="#">搜狐</a>
<br><br>
<a href="#">360</a>
</body>
</html>
(5):root
:root选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。
:root{
color: red; font-size: 79px;
}
(6):not()
如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。
<style>
div :not(#aa){------/注意div与：not之间要加一个空格
color: red; font-size: 79px;
}
</style>
<!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>003</title>
</head>
<style>
div :not(#aa){
color: red; font-size: 79px;
}
</style>
<body>
<div>
<p id="aa">四大名著</p>
<p id=ss>四大美女</p>
<p id="dd">四大金刚</p>
</div>
</body>
</html>
(7):only-child
:only-child 选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child 选择器”可以选择这个子元素。
<style>
div :only-child {
color: red; font-size: 79px;
}
</style>
<!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>003</title>
</head>
<style>
div :only-child {
color: red; font-size: 79px;
}
</style>
<body>
<div>
<p id="aa">四大名著</p>
<p id=ss>四大美女</p>
<p id="dd">四大金刚</p>
</div>
<div>
<p>四大书院</p>
</div>
</body>
</html>
(8):first-child和:last-child
:first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。
<style>
div :first-child {
color: red; font-size: 79px;
}
div :last-child {
color:blue; font-size: 80px;
}
</style>
<!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>003</title>
</head>
<style>
div :first-child {
color: red; font-size: 79px;
}
div :last-child {
color:blue; font-size: 80px;
}
</style>
<body>
<div>
<p id="aa">四大名著</p>
<p id=ss>四大美女</p>
<p id="dd">四大金刚</p>
</div>
</body>
</html>
(9):nth-child(n)和:nth-last-child(n)
使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第2个或倒数第2个子元素，这两个选择器就不起作用了。为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。
:nth-child(n)：匹配父元素中正数第n个元素,:nth-last-child(n)：匹配父元素中倒数第n个元素，（）内填需要改变的数字。
<style>
div :nth-child(2) {
color: red; font-size: 79px;
}
div :nth-last-child(1) {
color:blue; font-size: 80px;
}
</style>
<!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>003</title>
</head>
<style>
div :nth-child(2) {
color: red; font-size: 79px;
}
div :nth-last-child(1) {
color:blue; font-size: 80px;
}
</style>
<body>
<div>
<p id="aa">四大名著</p>
<p id=ss>四大美女</p>
<p id="dd">四大金刚</p>
<p>四大神话</p>
</div>
</body>
</html>
6、CSS的伪元素选择器
（1）:before选择器
:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。
（2）:after选择器
:after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。
<style>
div:before { /* 注意content后加文字时要给文字带引号*/
content: '西安';
}
div:after {
content: '陕西';
}
</style>
这篇关于CSS入门二（CSS的选择器）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
CSS-Module学习：轻松入门指南11-14
-
CSS9资料入门指南11-12
-
CSS浮动资料详解：初学者指南11-12
-
CSS选择器资料详解与实战教程11-12
-
CSS样式资料：初学者必备指南11-12
-
CSS项目实战：从入门到上手11-11
-
CSS定位项目实战：新手指南11-11
-
CSS浮动项目实战：初学者指南11-11
-
CSS选择器项目实战：从入门到上手11-11
-
CSS样式项目实战：新手入门指南11-11
-
CSS基础知识详解：从入门到实践教程11-05
-
如何用 Jest 测试 CSS Font Loading API（介绍）10-25
-
10 个每个 UI 开发人员都应该知道的 CSS 代码段10-25
-
怎么检测是否已经安装了scss（Sass）-icode9专业技术文章分享10-22
-
TailwindCSS开发入门指南10-22
栏目导航
