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中的常用选择器使用示例整理的详细内容，更多请关注其它相关文章！
