分享CSS3中的常用选择器使用示例整理
1. 根选择器 :root
:root{}就等同于html{}, 一般来说, 推荐使用:root{}.
<style>
:root {
background:green;
}
</style>
<p>:root选择器的演示</p>登录后复制
2. 否定选择器 :not
否定选择器, 就是除此之外的
<style>
input:not([type="submit"]) {
border: 1px solid red;
}
</style>
<form action="#">
<p>
<label for="name">账号:</label>
<input type="text" name="name" id="name" placeholder="请填写账号" />
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请填写密码" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>登录后复制
3. 空选择器 :empty
注意: :empty 只对一点内容都没有的元素生效, 哪怕有一个空格都不行.
<style>
p:empty {
border: 1px solid green;
}
</style>
<p>我这里有内容</p>
<p> <!-- 我这里有一个空格 --></p>
<p></p><!-- 我这里任何内容都没有 -->登录后复制
4.目标选择器 :target
超链接地址, 与id对应
<style>
.not_show{
display: none;
}
#test:target{
display:block;
}
</style>
<h2><a href="#test">test</a></h2>
<p class="not_show" id="test">
这是一个测试
</p>
<style>
#pipi:target {
background: orange;
color: #fff;
}
#ruby:target {
background: blue;
color: #fff;
}
#aaron:target {
background: red;
color: #fff;
}
</style>
<h2><a href="#pipi">pipi</a></h2>
<p id="pipi">
content for pipi
</p>
<h2><a href="#ruby">ruby</a></h2>
<p id="ruby">
content for ruby
</p>
<h2><a href="#aaron">Brand</a></h2>
<p id="aaron">
content for aaron
</p>登录后复制
5. 第一个与最后一个子元素 :first-child :last-child
<style>
ul li:first-child a {
color:green;
}
ul li:last-child a {
color:red;
}
</style>
<ul>
<li><a href="##">Link1</a></li>
<li><a href="##">Link2</a></li>
<li><a href="##">Link3</a></li>
<li><a href="##">Link4</a></li>
<li><a href="##">Link5</a></li>
</ul>登录后复制
6. 指定子元素选择器/奇偶选择器 :nth-child(n) :nth-last-child(n)
<style>
/*2n 偶数*/
ul li:nth-child(2n) {
color:green;
}
/* 用关键词 odd, 表示偶数, 效果同上
ul li:nth-child(odd) {
color:green;
}
*/
/*2n+1 奇数*/
ul li:nth-child(2n+1) {
color:red;
}
/* 用关键词 even, 表示奇数, 效果同上
ul li:nth-child(even) {
color:red;
}
*/
/* 指定子元素索引 */
ul li:nth-child(5) {
background: #08c;
}
/* 倒数第五个 */
ul li:nth-last-child(5){
background: yellow;
}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>登录后复制
7. 第一个与最后一个匹配类型的子元素 first-of-type last-of-type
<style>
.wrapper > p:first-of-type {
background: green;
}
.wrapper > p:last-of-type {
background: orange;
}
</style>
<p class="wrapper">
<p>我是一个块元素，我是.wrapper的第一个子元素</p>
<p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>
<p>我是一个段落元素</p>
<p>我是一个块元素</p>
</p>登录后复制
8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)
<style>
.wrapper > p:nth-of-type(2n){
background: orange;
}
</style>
<p class="wrapper">
<p>我是一个p元素</p>
<p>我是一个段落元素</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
</p>登录后复制
9. 唯一子元素选择器 only-child
匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素
<style>
.post p:only-child {
background: orange;
}
</style>
<p class="post">
<p>我是一个段落</p>
<p>我是一个段落</p>
</p>
<p class="post">
<p>我是一个段落</p>
</p>登录后复制
10. 唯一匹配类型的子元素 only-of-type
<style>
.wrapper > p:only-of-type {
background: orange;
}
</style>
<p class="wrapper">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
</p>
<p class="wrapper">
<p>我是一个p</p>
<ul>
<li>我是一个列表项</li>
</ul>
<p>我是一个段落</p>
</p>登录后复制
11. 可用选择器 :enabled
<style>
p{
margin: 20px;
}
input[type="text"]:enabled {
background: #ccc;
border: 2px solid red;
}
</style>
<form action="#">
<p>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="可用输入框" />
</p>
<p>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="禁用输入框" disabled="disabled" />
</p>
</form>登录后复制
12. 不可用选择器 :disabled
<style>
form {
margin: 50px;
}
p {
margin-bottom: 20px;
}
input {
background: #fff;
padding: 10px;
border: 1px solid orange;
border-radius: 3px;
}
input[type="text"]:disabled {
background: rgba(0,0,0,.15);
border: 1px solid rgba(0,0,0,.15);
color: rgba(0,0,0,.15);
}
</style>
<form action="#">
<p>
<input type="text" name="name" id="name" placeholder="我是可用输入框" />
</p>
<p>
<input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled />
</p>
</form>登录后复制
13. 被选中选择器 :checked
<style>
form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 30px auto;
}
.wrapper {
margin-bottom: 10px;
}
.box {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: relative;
border: 2px solid orange;
vertical-align: middle;
}
.box input {
opacity: 0;
positon: absolute;
top:0;
left:0;
}
.box span {
position: absolute;
top: -10px;
rightright: 3px;
font-size: 30px;
font-weight: bold;
font-family: Arial;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
color: orange;
}
input[type="checkbox"] + span {
opacity: 0;
}
input[type="checkbox"]:checked + span {
opacity: 1;
}
</style>
<form action="#">
<p class="wrapper">
<p class="box">
<input type="checkbox" checked="checked" id="usename" /><span>√</span>
</p>
<lable for="usename">我是选中状态</lable>
</p>
<p class="wrapper">
<p class="box">
<input type="checkbox" id="usepwd" /><span>√</span>
</p>
<label for="usepwd">我是未选中状态</label>
</p>
</form>登录后复制
14. 被鼠标选中, 高亮选择器 ::selection
<style>
::-moz-selection {
background: red;
color: green;
}
::selection {
background: red;
color: green;
}
</style>
<p>拿鼠标选中我, 试试看!</p>登录后复制
15. 只读选择器 :read-only
<style>
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > p {
margin-bottom: 10px;
}
input[type="text"]{
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
}
input[type="text"]:-moz-read-only{
border-color: #ccc;
}
input[type="text"]:read-only{
border-color: #ccc;
}
</style>
<form action="#">
<p>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</p>
<p>
<label for="address">地址:</label>
<input type="text" name="address" id="address" value="中国上海" readonly />
</p>
</form>登录后复制
16. 非只读选择器 :read-write
<style>
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > p {
margin-bottom: 10px;
}
input[type="text"]{
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
}
input[type="text"]:-moz-read-only{
border-color: #ccc;
}
input[type="text"]:read-only{
border-color: #ccc;
}
input[type="text"]:-moz-read-write{
border-color: #f36;
}
input[type="text"]:read-write{
border-color: #f36;
}
</style>
<form action="#">
<p>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</p>
<p>
<label for="address">地址:</label>
<input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
</p>
</form>登录后复制
以上是分享CSS3中的常用选择器使用示例整理的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前
By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
使您的第一个自定义苗条过渡
Mar 15, 2025 am 11:08 AM
Svelte Transition API提供了一种使组件输入或离开文档（包括自定义Svelte Transitions）时动画组件的方法。
您如何使用CSS创建文本效果，例如文本阴影和渐变？
Mar 14, 2025 am 11:10 AM
文章讨论了使用CSS来获得阴影和渐变等文本效果，优化它们以进行性能并增强用户体验。它还列出了初学者的资源。（159个字符）
