CSS选择器小结

最新推荐文章于 2025-08-11 22:30:00 发布

原创最新推荐文章于 2025-08-11 22:30:00 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

本文总结了CSS选择器的种类，包括基本选择器（ID、类、标签、通配符）、包含选择器（子代、后代、分组）、属性选择器、伪类选择器（如：link、visited、hover、active、focus）以及伪元素选择器（如：after、before）。详细阐述了它们的作用和应用场景，并强调了选择器的优先级和伪类的特定状态顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、基本选择器

1.ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
id选择器
#one{
color: blue;
}
<body>
<p id="one">这是一段话</p>
</body>

2.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
类选择器
.two{
color: green;
}
<body>
<div class="two">这是一个div</div>
</body>

3.标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
标签选择器
h2{
color: red;
}
<body>
<h1>这是一个标题</h1>
</body>

4.通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
通配符选择器
*{
color: yellow;
}
<body>
<div>这是第二个div</div>
<p>这是第二个段落</p>
</body>

注：基本选择器的优先级：id > 类 > 标签 > 通配符

二、包含选择器

1.子代选择器------获取的某个标签的第一级子标签
2.后代选择器----- 获取某个标签内的所有子标签
3.分组选择器（也叫做逗号选择器，可以通过"，"给标签隔开并同时加上样式）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>包含选择器</title>
<style type="text/css">
 子代选择器 
.list>ul{
color: green;
}
 后代选择器 
 .list li{
color: red;
}
 分组选择器 
h2,.list,#list{
color: blue;
}
</style>
</head>
<body>
<h2>这是一个标签</h2>
<p id="list">这是一个段落</p>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
</ul>
<li>这是列表6</li>
<li>这是列表7</li>
<li>这是列表8</li>
<li>这是列表9</li>
</div>
</body>
</html

三、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/* 选中某个标签的某个属性 */
div[title]{
color: red;
}
/* 确切的等于 */
input[type="text"]{
background: pink;
}
/* 某个属性含有某个值 */
input[type*="e"]{
background: red;
}
/* 某个属性以什么开始 */
input[type^="e"]{
background: green;
}
/* 某个属性以什么结束 */
input[type$="rl"]{
background: blue;
}
/* 表示下一个标签 */
.msg + {
color: red;
}
/* 属性名称等于某个值 */
[title="这是一个标题"]{
color: yellow;
}
</style>
</head>
<body>
<div title="one">这是一个div</div>
<p class="two">这是一个段落</p>
<input type="text" id="" class="" value="张三">
<input type="url" id="" class="" value="李四">
<input type="email" id="" class="" value="王五">
<div class="msg">这是第二个div</div>
<div title="这是一个标题">这是第三个div</div>
<p id="msg1">这是第二个段落</p>
</body>
</html>

四、伪类选择器

1.伪类的含义：同一个标签，根据不同的状态，有不同的样式，用冒号":"表示
2.一些常见属性：
:link -------- 超链接点击之前的样式
:visited -------- 链接被访问之后
:hover ------ 悬停，鼠标放到标签上的样式
:active --------被激活的时候，鼠标点击的时候，但是不松手的时候
:focus -------- 某个标签获得焦点的时候

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/* 让超链接点击之前是红色 */
a:link{
color: red;
}
/* 让超链接点击之后是绿色 */
a:visited{
color: green;
}
/* 让鼠标悬停的时，放到标签上变成粉色 */
a:hover{
color: pink;
}
/* 让鼠标点击链接不松手的时候橙色 */
a:active{
color: orange;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">点击我</a>
</body>
</html>

注：超链接的四种状态顺序是一定的，不可以改变，顺序为-----:link :visited :hover :active

五、伪元素选择器

一些常见属性：
:after ------- CSS2提供的
:before------- CSS2提供的
::after ----- CSS3提供
::before----- CSS3提供
注：使用before和after，一定要加上content（内容）属性后才能出现效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
p::before{
content: "zhangsan";
color: red;
}
p::after{
content: "lisi";
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>