网站首页 > 文章精选 正文
在 Web 开发中,CSS 扮演着至关重要的角色,但很多开发者并没有真正发掘它的全部潜力!
大多数人熟悉 ID 选择器、类选择器或元素选择器,甚至伪元素的使用也很常见。然而,你知道 CSS 其实还有许多不为人知的强大选择器吗?
今天,就带你揭秘一些鲜有人知但却非常实用的 CSS 选择器,让你在样式控制上更上一层楼!
1. 属性选择器
属性选择器可以根据 HTML 元素的属性来应用样式,而无需额外添加类或 ID。
基础属性选择器
Bash
a[href] {
color: blue;
}
这个选择器会为所有包含 href 属性的 元素添加蓝色字体样式。
Bash
input[type="text"] {
border: 1px solid #ccc;
}
Bash
/* 以某个值开头(^=) */
a[href^="https"] {
color: green;
}
/* 以某个值结尾($=) */
a[href$=".pdf"] {
color: red;
}
/* 包含某个值(*=) */
a[href*="example"] {
color: orange;
}
这些选择器可以分别选中以 https 开头的链接、以 .pdf 结尾的链接,以及包含 example 关键字的链接,并应用不同的样式。
2. :nth-child() 选择器
Bash
li:nth-child(odd) {
background-color: #f9f9f9;
}
3. :not() 选择器
想要排除某些特定元素?:not() 选择器可以帮你实现:
Bash
button:not(.primary) {
background-color: grey;
}
- 最近发表
- 标签列表
-
- newcoder (56)
- 字符串的长度是指 (45)
- drawcontours()参数说明 (60)
- unsignedshortint (59)
- postman并发请求 (47)
- python列表删除 (50)
- 左程云什么水平 (56)
- 计算机网络的拓扑结构是指() (45)
- 稳压管的稳压区是工作在什么区 (45)
- 编程题 (64)
- postgresql默认端口 (66)
- 数据库的概念模型独立于 (48)
- 产生系统死锁的原因可能是由于 (51)
- 数据库中只存放视图的 (62)
- 在vi中退出不保存的命令是 (53)
- 哪个命令可以将普通用户转换成超级用户 (49)
- noscript标签的作用 (48)
- 联合利华网申 (49)
- swagger和postman (46)
- 结构化程序设计主要强调 (53)
- 172.1 (57)
- apipostwebsocket (47)
- 唯品会后台 (61)
- 简历助手 (56)
- offshow (61)