位置：首页-资讯-前端开发

CSS3中有哪些常用的选择器

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

这篇文章给大家介绍CSS3中有哪些常用的选择器，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

1. 根选择器 :root
:root{}就等同于html{}, 一般来说, 推荐使用:root{}.

CSS Code复制内容到剪贴板

<style>
:root {
background:green;
}
</style>
<div>:root选择器的演示</div>

2. 否定选择器 :not
否定选择器, 就是除此之外的

CSS Code复制内容到剪贴板

<style>
input:not([type="submit"]) {
border: 1px solid red;
}
</style>
<form action="#">
<div>
<label for="name">账号:</label>
<input type="text" name="name" id="name" placeholder="请填写账号" />
</div>
<div>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请填写密码" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>

3. 空选择器 :empty
注意: :empty 只对一点内容都没有的元素生效, 哪怕有一个空格都不行.

CSS Code复制内容到剪贴板

<style>
div:empty {
border: 1px solid green;
}
</style>
<div>我这里有内容</div>
<div> </div>
<div></div>

4.目标选择器 :target
超链接地址, 与id对应

CSS Code复制内容到剪贴板

<style>
.not_show{
display: none;
}
#test:target{
display:block;
}
</style>
<h3><a href="#test">test</a></h3>
<div class="not_show" id="test">
这是一个测试
</div>
<style>
#pipi:target {
background: orange;
color: #fff;
}
#ruby:target {
background: blue;
color: #fff;
}
#aaron:target {
background: red;
color: #fff;
}
</style>
<h3><a href="#pipi">pipi</a></h3>
<div id="pipi">
content for pipi
</div>
<h3><a href="#ruby">ruby</a></h3>
<div id="ruby">
content for ruby
</div>
<h3><a href="#aaron">Brand</a></h3>
<div id="aaron">
content for aaron
</div>

5. 第一个与最后一个子元素 :first-child :last-child

CSS Code复制内容到剪贴板

<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)

CSS Code复制内容到剪贴板

<style>
ul li:nth-child(2n) {
color:green;
}
ul li:nth-child(2n+1) {
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

CSS Code复制内容到剪贴板

<style>
.wrapper > p:first-of-type {
background: green;
}
.wrapper > p:last-of-type {
background: orange;
}
</style>
<div class="wrapper">
<div>我是一个块元素，我是.wrapper的第一个子元素</div>
<p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>
<p>我是一个段落元素</p>
<div>我是一个块元素</div>
</div>

8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)

CSS Code复制内容到剪贴板

<style>
.wrapper > p:nth-of-type(2n){
background: orange;
}
</style>
<div class="wrapper">
<div>我是一个Div元素</div>
<p>我是一个段落元素</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
</div>

9. 唯一子元素选择器 only-child
匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素

CSS Code复制内容到剪贴板

<style>
.post p:only-child {
background: orange;
}
</style>
<div class="post">
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div class="post">
<p>我是一个段落</p>
</div>

10. 唯一匹配类型的子元素 only-of-type

CSS Code复制内容到剪贴板

<style>
.wrapper > div:only-of-type {
background: orange;
}
</style>
<div class="wrapper">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
</div>
<div class="wrapper">
<div>我是一个Div</div>
<ul>
<li>我是一个列表项</li>
</ul>
<p>我是一个段落</p>
</div>

11. 可用选择器 :enabled

CSS Code复制内容到剪贴板

<style>
div{
margin: 20px;
}
input[type="text"]:enabled {
background: #ccc;
border: 2px solid red;
}
</style>
<form action="#">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="可用输入框" />
</div>
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="禁用输入框" disabled="disabled" />
</div>
</form>

12. 不可用选择器 :disabled

CSS Code复制内容到剪贴板

<style>
form {
margin: 50px;
}
div {
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="#">
<div>
<input type="text" name="name" id="name" placeholder="我是可用输入框" />
</div>
<div>
<input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled />
</div>
</form>

13. 被选中选择器 :checked

CSS Code复制内容到剪贴板

<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="#">
<div class="wrapper">
<div class="box">
<input type="checkbox" checked="checked" id="usename" /><span>√</span>
</div>
<lable for="usename">我是选中状态</lable>
</div>
<div class="wrapper">
<div class="box">
<input type="checkbox" id="usepwd" /><span>√</span>
</div>
<label for="usepwd">我是未选中状态</label>
</div>
</form>

14. 被鼠标选中, 高亮选择器 ::selection

CSS Code复制内容到剪贴板

<style>
::-moz-selection {
background: red;
color: green;
}
::selection {
background: red;
color: green;
}
</style>
<p>拿鼠标选中我, 试试看!</p>

15. 只读选择器 :read-only

CSS Code复制内容到剪贴板

<style>
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
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="#">
<div>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</div>
<div>
<label for="address">地址:</label>
<input type="text" name="address" id="address" value="中国上海" readonly />
</div>
</form>

16. 非只读选择器 :read-write

CSS Code复制内容到剪贴板

<style>
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
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="#">
<div>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</div>
<div>
<label for="address">地址:</label>
<input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
</div>
</form>