文章目录
- 一、基本选择器
- 二、组合选择器
- 三、属性选择器
- 四、伪类选择器
- 五、伪元素选择器
- 六、链接伪类
提示：以下是本篇文章正文内容，下面案例可供参考
一、基本选择器
（1）id选择器
id选择器以“#”开头，HTML所有的标签都支持ID选择器
注意： 一个页面中的id值，不允许重复！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#text{
font-size: 20px;
font-weight: bold;
color: lightblue;
}
</style>
</head>
<body>
<div id="text">hello world</div>
</body>
</html>
（2）类名选择器
类名选择器以“.”开头，类选择器能为相同对象定义不同的样式，为不同的对象定义相同的样式
注意：类名是可以重复的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text{
font-size: 20px;
font-weight: bold;
color: lightblue;
}
</style>
</head>
<body>
<div class="text">hello world</div>
</body>
</html>
（3）标签名选择器
注意： 不要轻易的让一个独立的标签名选择器存在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-size: 20px;
font-weight: bold;
color: lightblue;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
（4）通配符选择器
如果所有的样式效果一样就用通配符选择器，以“*”开头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
font-size: 20px;
font-weight: bold;
color: lightblue;
}
</style>
</head>
<body>
<div>hello world</div>
<span>hello world</span>
</body>
</html>
二、组合选择器
（1）包含选择器
包含选择器通过空格标识符来表示，前面一个选择器表示父节点，而后面的选择器表示子节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#text p{
font-size: 20px;
font-weight: bold;
color: lightblue;
}
</style>
</head>
<body>
<div id="text">
<p>hello world</p>
</div>
</body>
</html>
（2）子选择器
子选择器以“>”表示，子选择器是指定父元素包含下的子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#text>p{
font-size: 20px;
font-weight: bold;
color: lightblue;
}
</style>
</head>
<body>
<div id="text">
<p>hello world</p>
</div>
</body>
</html>
（3）相邻选择器
相邻选择器通过“+”分隔符进行定义，TA指定的元素关系是兄弟关系。
（4）兄弟选择器
兄弟选择器的作用是查找某一个指定元素的后面的所有兄弟结点，以“~”表示。
三、属性选择器
1.属性选择器 [attribute] [type] 选择所有带有type属性元素
2.[attribute=value] [type=text] 选择所有type=text的标签
3. [attribute~=value] [id~=box] 选择所有id值包含'box'的标签
（适用于由空格分隔的属性值）
4. [attribute|=language] [id|=en] 选择所有id值以'en-'开头的标签
（'-'不是错误，规定必须使用'-'连字符）
5.[attribute^=value] [type^=name] 选择type属性值以name开头的元素
6. [attribute$=value] [type$=name] 选择type属性值以name结尾的元素
7. [attribute*=value] [type*=name] 选择type属性值包含name的元素
四、伪类选择器
- :enabled 匹配可以使用的表单控件
:enabled{
width: 20px;
height: 20px;
}
- :disabled 匹配禁用的表单控件
:disabled{
background-color: red;
}
- :checked 匹配选中的单选或者复选框
:checked{
width: 20px;
height: 20px;
}
- :root 匹配页面根元素
:root{
background-color: #eee;
}
- :nth-child(n) 匹配父元素的第几个子元素 n从1开始
当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：
.list :nth-child(3){
background-color: purple;
}
- :nth-last-child(n) 匹配父元素的第几个子元素，从最后开始数
.list :nth-last-child(1){
background-color: lightblue;
}
- :last-child 最后一个子元素
.list li:last-child{
background-color: pink;
}
7.:first-child 第一个子元素
.list li:first-child{
background-color: pink;
}
8.:nth-of-type 匹配父元素下同类型元素的第几个
.list li:nth-of-type(2){
background-color: lightgreen;
}
9.:nth-last-of-type(n) 匹配父元素下同类型元素的第几个 从最后开始数
.list li:nth-last-of-type(2){
background-color: lightgreen;
}
10:first-of-type 匹配父元素下同类型的第一个
.list li:first-of-type{
background-color: lightgreen;
}
11:last-of-type 匹配父元素下同类型的最后一个
.list li:flast-of-type{
background-color: lightgreen;
}
12 :only-child 匹配独生子元素
.box div:only-child{
background-color: purple;
}
13 :empty 匹配空元素
.box p:empty{
width: 100px;
height: 100px;
background-color: red;
}
14 :only-of-type 匹配同类型元素是独生子就行
15 :not(其他的选择) 排除小括号中匹配的元素
五、伪元素选择器
伪元素表示页面中一些特殊的并不真实存在的元素
伪元素选择器是针对CSS3中已经定义好的伪元素使用的选择器。
- ::selection 匹配滑选中的文字，只支持设置：background-color color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div::selection{
background-color: purple;
color: #fff;
}
</style>
</head>
<body>
<div>中国软件开发者的知识共享与交流平台 。</div>
</body>
</html>
- ::first-letter 匹配元素中文本的第一个字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div::first-letter{
background-color: purple;
}
</style>
</head>
<body>
<div>中国软件开发者的知识共享与交流平台 。</div>
</body>
</html>
- ::first-line 匹配元素中文本的第一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div::first-line{
background-color: purple;
}
</style>
</head>
<body>
<div>中国软件开发者的知识共享与交流平台<br>
软件开发者是推动科技进步的重要力量。</div>
</body>
</html>
- ::before 在某个元素的内部最开始添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div::before{
content: '哈哈';
}
</style>
</head>
<body>
<div>中国软件开发者的知识共享与交流平台</div>
</body>
</html>
- ::after 在某个元素的内部最后添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div::after{
content: '哈哈';
}
</style>
</head>
<body>
<div>中国软件开发者的知识共享与交流平台</div>
</body>
</html>
选择器::after{
content:‘’ /* 此属性不写，此伪元素失效 */
}
1> content:属性后边可以跟那些值：
(1) 字符串，字符串作为伪元素的内容添加到主元素中
注意：字符串中若有html字符串，添加到主元素后不会进行html转义，也不会转化为真正的html内容显示，而是会原样输出
(2) attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值
(3) url(), 引用外部资源，例如图片；
(4) counter(), 调用计数器，可以不使用列表元素实现序号问题
六、链接伪类
- :link 匹配有链接(href)属性的标签
经常利用 a:link 选择器将a标签的默认样式进行修改 - :visited 匹配被访问过的带连接属性的标签
经常利用 a:visited 选择器将被访问过的a标签的默认样式进行修改 - :hover 匹配鼠标经过的标签
经常利用 选择器:hover 去完成鼠标经过这个标签时的样式改变动作 - :active 匹配激活的元素
经常利用 :active 去完成一个标签点击时候的激活状态
经常会用他去做按钮的激活样式 - :focus 匹配获得焦点的元素(表单控件)
经常用来匹配获得焦点的表单控件，然后对表单控件的选中样式做出调整
