1、选择器是什么？
CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。
2、选择器的分类
css选择器可以分为基本选择器、包含选择器、属性选择器、伪类选择器和伪元素选择器几类。
其中基本选择器又可以细分为：标签选择器、ID选择器、类选择器和通用选择器。
包含选择器可以分为：子代选择器、后代选择器和分组选择器。
2.1基本选择器
2.1.1 标签选择器
**标签选择器是通过获取标签的名称来进行设置。**
<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器</title>
</head>
<style type="text/css">
div{
color: red;
}
</style>
<body>
<div id="wang" class="bao">yes yes yes </div>
</body>
</html>
2.1.2 ID选择器
** ID选择器是通过获取ID的属性来进行设置，使用 #+ID属性值来选中。**
<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器</title>
</head>
<style type="text/css">
#wang{
color: black;
}
</style>
<body>
<div id="wang" class="bao">yes yes yes </div>
</body>
</html>
2.1.3 类选择器
** 类选择器是通过获取class属性来进行设置，使用 .+class属性值来选中。**
<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器</title>
</head>
<style type="text/css">
.bao{
color:green;
}
</style>
<body>
<div id="wang" class="bao">yes yes yes </div>
</body>
</html>
2.1.4 通用选择器
** 通用选择器使用 * 来代指，它代表的是选中了父元素中的所有内容。**
<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器</title>
</head>
<style type="text/css">
*{
color: blue;
}
</style>
<body>
<div id="wang" class="bao">yes yes yes </div>
<div>no no no</div>
</body>
</html>
ps:优先级为：ID > class > 标签 > 通配符
2.2 包含选择器
2.2.1 子代选择器
** 子代选择器是通过获取某个标签的第一级子标签来设置。格式为：标签.属性值>子标签{}**
<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">
/*子代*/
div.wang>ul{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="bao">有何不可</div>
<div title="jiang">最佳歌手</div>
<div class="wang">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</div>
</body>
</html>
2.2.2 后代选择器
** 后代选择器是通过获取的某个标签里面所有的子标签来设置。格式为：.属性名 二级子标签{}**
<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">
/*后代*/
.wang li{
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="bao">有何不可</div>
<div title="jiang">最佳歌手</div>
<div class="wang">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</div>
</body>
</html>
2.2.3 分组选择器
** 也叫做逗号选择器，可以同时设置多个标签，使用逗号进行分割。**
<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">
.bao,.jiang,#xu{
color: aqua;
width: 50;
height: 50;
background:pink;
border: 5px solid rgb(132, 0, 255);
}
</style>
</head>
<body>
<div class="bao">有何不可</div>
<div title="jiang">最佳歌手</div>
<p id="xu">许嵩</p>
<div class="wang">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</div>
</body>
</html>
2.3 属性选择器
** 元素带有属性，属性选择器就是通过选中带有特定属性的元素进行设置。**
<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">
/*选中含有title属性的div标签*/
div[title]{
border: 1px solid black;
}
/*选中type属性的值为text的input标签*/
input[type="text"]{
background: 1px solid red;
}
/*选中type属性的值中含有'e'的input标签*/
input[type *="e"]{
background: blue;
}
/*选中type属性的值以'e'开头的input标签*/
input[type ^="e"]{
background: green;
}
/*选中type属性的值以'rl'结尾的input标签*/
input[type $="rl"]{
background: red;
}
/*+表示选中下一个标签*/
.msg +p{
border: 1px solid green;
}
/*选中title属性值为'jiang'的标签*/
[title="jiang"]{
color: red;
}
</style>
</head>
<body>
<div class="bao">有何不可</div>
<div title="jiang">最佳歌手</div>
<input type="text" name="" value="wang">
<input type="email" name="" value="bao">
<input type="url" name="" value="jiang">
<p class="hao">hello!</p>
</body>
</html>
2.4 伪类选择器
即同一个标签，在不同的状态下显示出来的效果不同，通过设置不同的样式来实现.
**状态： **:link 点击之前
:visited 点击之后
:hover 悬浮时
:active 长按不松手时
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style type="text/css">
/*点击之前的状态*/
a:link{
color: red;
}
/*点击之后的状态*/
a:visited{
color:chartreuse;
}
/*指针悬浮时的状态*/
a:hover{
color: darkmagenta;
}
/*长按不松手时的状态*/
a:active{
color: pink;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点这里</a>
</body>
</html>
2.5 伪元素选择器
**状态： **::before
::after
::before
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style type="text/css">
p::before{
content:"阿珍";
color: red;
}
p::after{
content:"阿强";
color: aqua;
}
</style>
</head>
<body>
<p>爱上了</p>
</body>
</html>
本文转载自: https://blog.csdn.net/weixin_68917948/article/details/129870632
版权归原作者 火腿我选王中王 所有， 如有侵权，请联系我们删除。
版权归原作者 火腿我选王中王 所有， 如有侵权，请联系我们删除。