CSS选择器
基本选择器：
- 标签名选择器：标签名{}
- id选择器：#id值{}
- class选择器：.class值{}
- 通配选择器：*{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签名选择器*/
div{color: blue;}
/*id选择器*/
#i1{color: darkcyan}
/*class选择器*/
.c1{color: blueviolet}
/*通配选择器*/
*{color: cornflowerblue}
</style>
</head>
<body>
<div id="i1">item1</div>
<div id="i2">item2</div>
<div id="i3">item3</div>
<div class="c1 c2">item4</div>
<div class="c1">item5</div>
<div class="c1">item6</div>
</body>
</html>
组合选择器：
- 后代选择器： 从头找到尾（使用“空格”分开）
- 子代选择器： 从头找下一层（使用 “>” 符号）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器*/
/*item3,4蓝色*/
.c1 .c2{color: blue}
/*item2,4蓝色*/
.c1 .c3{color: red}
/*子代选择器*/
/*item2绿色*/
.c1 > .c3{color: green}
/*item3,4绿色*/
.c1 > .c2 {color: green}
</style>
</head>
<body>
<div class="c1">item1</div>
<div class="c1">
<div class="c3">item2</div>
</div>
<div class="c1">
<div class="c2">item3</div>
</div>
<div class="c1">
<div class="c2">
<div class="c3">item4</div>
</div>
</div>
</body>
</html>
与或选择器：
- 与选择器： 条件同时成立（用“.”关联）
- 或选择器： 多个标签同时拥有这个属性（用“，”分割）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*与选择器*/
/*item2 红色*/
p.c1{color: red;}
/*或选择器*/
/*item2，4 红色*/
p.c1,#i1{color: red;}
</style>
</head>
<body>
<div class="c1">item1</div>
<p class="c1">item2</p>
<div>item3</div>
<p id="i1">item4</p>
</body>
</html>
兄弟选择器：
- 毗邻选择器： 查找下面第一个内容（使用“+”链接）
- 兄弟选择器： 查找下面能匹配的多个内容（使用“~”链接）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*毗邻选择器*/
/*item1 红色*/
#i1 + #i2{color: red;}
/* 因为不是第一个挨着，无法匹配*/
#i1 + div.c1{color: red}
/*兄弟选择器*/
/*id=i1的下面div标签变红色*/
#i1 ~ div{color: red;}
/*item1变绿色*/
#i1 ~ p{color: green;}
</style>
</head>
<body>
<p id="i1">item0</p>
<p id="i2">item1</p>
<div class="c1">item2</div>
<div class="c2">item3</div>
<div class="c3">item4</div>
<div class="c4">item5</div>
</body>
</html>
属性选择器：
- E[att]： 匹配p标签title属性的：p[title]
- E[att=val]： 匹配div标签class=“error”属性的：div[class=”error”]
- E[att~=val]： 匹配td标签class中包含name的：td[class~=”name”]
- E[attr^=val]： 匹配属性值以指定值开头的每个元素：div[class^="test"]
- E[attr$=val]： 匹配属性值以指定值结尾的每个元素：div[class$="test"]
- E[attr*=val]： 匹配属性值中包含指定值的每个元素：div[class*="test"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*属性选择器*/
[type="text"]{
border: 1px solid red;
}
[index]{
font-size: 32px;
font-style: italic;
}
[href*="png"]{
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
<div index="1">1</div>
<div index="2">2</div>
<div index="3">3</div>
<ul>
<li><a href="1.png">item1</a></li>
<li><a href="2.jpg">item2</a></li>
<li><a href="3.jpg">item3</a></li>
<li><a href="4.png">item4</a></li>
<li><a href="5.gif">item5</a></li>
</ul>
</body>
</html>
伪类选择器：
- anchor伪类：专用于控制链接的显示效果
-
- link:没访问之前
-
- visited:访问过后
-
- hover:鼠标放在链接上的状态
-
- active:鼠标点击的时候
<style>
a:link{
color: red;
}
a:visited{
color: coral;
}
a:hover{
color: blue;
}
a:active{
color: rebeccapurple;
}
</style>
- before after伪类 ：
before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。
在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。 -
- first-child:选择属于父元素第一个子元素
-
- last-child:选择属于父元素最后一个子元素
-
- before:在元素的内容之前插入内容
-
- after:在元素的内容之后插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 p:first-child{
color: red;
}
/*未匹配到div在最后的数据,本文是p*/
.c1 div:last-child{
color: red;
}
p#i1:before{
content:"hello";
color:red;
display: block;
}
</style>
</head>
<body>
<div class="c1">
<p>item1</p>
<p>item2</p>
<div>item3</div>
<p>item4</p>
</div>
<p id="i1">p标签</p>
</body>
</html>
选择器优先级：
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
-
有!important声明的规则高于一切
-
内联样式表的权值最高：style="" 1000；
-
统计选择符中的ID属性个数：#id 100
-
统计选择符中的CLASS属性个数：.class 10
-
统计选择符中的HTML标签名个数：标签名 1
-
按这些规则将数字逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较
-
如果优先权一样，则按照在源码中出现的顺序决定，后来者居上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*10*/
.c1{
color: red;
}
/*100*/
#i1{
color: coral;
}
/*1*/
div{
color: greenyellow;
}
/*-------------------------------*/
/*10+10+10+1=41*/
.c2 .c3 .c4 span{
color: orange;
}
/*10+10+1=21*/
.c2 .c4 span{
color: blue;
}
/*10+10+10=30*/
.c2 .c3 .c5{
color: rebeccapurple;
}
/*10+10+10=30*/
.c2 .c4 .c5{
color: darkcyan;
}
</style>
</head>
<body>
<div class="c1" id="i1">item1</div>
<div class="c2">
<div class="c3">
<div class="c4">
<span class="c5">item2</span>
</div>
</div>
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了