CSS中的选择器总结

最新推荐文章于 2024-03-04 10:45:03 发布

潇51

最新推荐文章于 2024-03-04 10:45:03 发布

阅读量388

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_74144815/article/details/130673833

版权

在 CSS 中，选择器是选取需设置样式的元素的模式。
一般分为以下几类：
一、基本选择器

标签选择器（根据标签的名称设置对应的样式）
选择并设置所有 div 样式：

div{
color: red;
}

ID选择器（通过获取标签里面的ID属性去设置对应的样式，设置的时候#+id的属性值）

#one{
color: blue;
}

类选择器（通过获取标签里面的class属性去设置对应的样式，设置的时候.+class的属性值）

.box{
color: brown;
}

通配符选择器（通过*设置对应的样式）

*{
color: yellow;
}

注意：
四种的选择器的优先级？
ID选择器>类选择器>标签选择器>通配符选择器
二、包含选择器

子代选择器（获取的某个标签的第一级子标签）
后低选择器（获取的某个标签的所有子标签）
分组选择器（也叫做逗号选择器，可以设定多个标签，使用逗号进行分割）
如图：

<!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>包含选择器</title>
<style>
/*子代选择器*/
div.list > ul{
border: 1px solid red;
}
/*后代选择器*/
.list li{
border: 1px solid rgb(12, 204, 60);
}
/*分组选择器*/
#one,.box,h1{
color: blueviolet;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p id="one" class="two">这是一个段落标签</p>
<div class="box">这是第二个div</div>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
<li>这是列表7</li>
</ul>
<li>这是列表8</li>
<li>这是列表9</li>
<li>这是列表10</li>
</div>
</body>
</html>

三、属性选择器
匹配那些具有特定属性或属性值的元素。

!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>属性选择器</title>
<style>
/*选中某个标签中存在的某个值*/
.container[class]{
color: red;
}
div[title]{
color: aquamarine;
}
/*确切的等于某个值*/
input[type="text"]{
background: red;
}
/*属性里面包含某个值*/
input[type *= "e"]{
background: blue;
}
/*属性中的值以XXX开始*/
input[type ^= "e"]{
background-color: blueviolet;
}
/*属性中的值以XXX结尾*/
input[type $= "rl"]{
background-color: rgb(14, 139, 18);
}
/*表示下一个标签*/
.msg + p{
color: darkgoldenrod;
}
/*属性等于某个值*/
[title="这是一个标题"]{
color: chartreuse;
}
</style>
</head>
<body>
<div class="container">这是一个div容器</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" value="张三">
<input type="email" value="王五">
<input type="url" value="李四">
<hr>
<div class="msg">我喜欢吃好吃的</div>
<p id="msg2">这是一个段落</p>
</body>
</html>

四、伪类选择器
伪类：同一个标签，在不同的状态下，有不同的样式
伪类通过冒号表示
最早的时候主要是用来渲染a标签不同的状态下的不同的样式
超链接点击之前 ------ :link
超链接被访问之后 -------- :visited
鼠标放在超链接上的时候（悬停） ------- :hover
超链接激活的时候（鼠标点击标签但是不松手的时候）------ : active

<!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>伪类选择器</title>
<style>
/*超链接点击之前的颜色是红色*/
a:link{
color: red;
}
/*超链接点击之后的颜色是橙色*/
a:visited{
color:orange;
}
/*鼠标悬停的时候的颜色绿色*/
a:hover{
color:green;
}
/*超链接被激活的时候的颜色是蓝色*/
a:active{
color:blue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/" >戳我</a>
</body>
</html>

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。
五、伪元素选择器
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
部分伪元素

:before
:after 
::before 
::after

注意：使用before和after的时候一定给要写上content属性

<!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>伪元素选择器</title>
<style>
p{
color: red;
font-size: 20px;
}
p::before{
content: "张三说";
color: blueviolet;
}
p::after{
content: "对不对？";
color: rgb(10, 1, 17);
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>

备注：按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

潇51

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS中的选择器总结

超链接激活的时候（鼠标点击标签但是不松手的时候）------ : active。伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。鼠标放在超链接上的时候（悬停） ------- :hover。最早的时候主要是用来渲染a标签不同的状态下的不同的样式。超链接被访问之后 -------- :visited。超链接点击之前 ------ :link。/*超链接被激活的时候的颜色是蓝色*//*超链接点击之前的颜色是红色*//*超链接点击之后的颜色是橙色*//*鼠标悬停的时候的颜色绿色*/
复制链接

扫一扫