CSS3 选择器进阶 - 高级选择器 - two #23
Description
上篇我们讲了CSS3特性下的某些选择器传送门，现在我们来补充一下伪元素/伪类/结构选择器。最近比较忙，都没时间更文 (@_@;)
<div class="content">
<div class="first-item">
<h3 class="first-item-child-1">First item child .1 content</h3>
<div class="first-item-child-2">First item child .2 content</div>
<div class="first-item-child-3">First item child .3 content</div>
<p class="first-item-child-4">First item child .4 content</p>
<p class="first-item-child-5">First item child .5 content</p>
</div>
<div class="second-item">Second item content <br /> other content</div>
<div class="third-item">Third item content</div>
<div class="fourth-item">
<span>Fourth item content</span>
</div>
</div>/* 伪元素选择器 */
/* 文本块的第一行 */
.second-item::first-line { /* 匹配内容: 'Second item content' */
color: #ff0000;
}
/* 文本的首字符 */
.third-item::first-letter { /* 匹配内容: 'T' */
color: #00ff00;
}
/* 伪类选择器 */
/* 在元素内容之前(默认是行内元素) */
.first-item:before { /* 在.first-item内容最前插入元素 */
content: 'I am :before';
display: block;
}
/* 在元素内容之后(默认是行内元素) */
.first-item:after { /* 在.first-item内容最后插入元素 */
content: 'I am :after';
display: block;
}
/* 补充: 其他比较常见的伪类选择器 */
/* :link -> 没有被访问过的超链接样式 <a> */
/* :visited -> 已经访问过的超链接样式 <a> */
/* :hover -> 鼠标悬停时的样式 all */
/* :active -> 点击时元素的样式 all */
/* :enabled -> 启用状态元素的样式 <input>,<button> */
/* :disabled -> 禁用状态元素的样式 <input>,<button> */
/* :checked -> 单选或复选框被选中的元素样式 <input> */
/* :default -> 默认的元素样式 <input>,<button> */
/* 结构选择器 */
/* 第一个子元素 # */
.first-item :first-child { /* .first-item-child-1 */
font-weight: bold;
}
/* 最后一个子元素 # */
.first-item :last-child { /* .first-item-child-5 */
font-weight: bold;
}
/* 正序指定索引子元素 # */
.first-item :nth-child(3) { /* .first-item-child-3 */
color: #0000ff;
}
/* 倒序指定索引子元素 # */
.first-item :nth-last-child(2) { /* .first-item-child-4 */
color: #0000ff;
}
/* 奇数索引子元素 # */
.first-item :nth-child(odd) {
/* .first-item-child-1, .first-item-child-3, .first-item-child-5 */
background-color: #666666;
}
/* 偶数索引子元素 # */
.first-item :nth-child(even) {
/* .first-item-child-2, .first-item-child-4 */
background-color: #999999;
}
/* an+b索引子元素,n为计数器,初始值1,a为倍数,b为偏移值 # */
.first-item :nth-child(1n+4) {
/* .first-item-child-4, .first-item-child-5 */
padding: 10px 0;
}
/* 特定类型第n个子元素,n可以是数字/关键词/公式 */
.first-item > p:nth-of-type(2n) { /* .first-item-child-5 */
padding-left: 15px;
}
/* 特定类型倒数第n个子元素,n可以是数字/关键词/公式 */
.first-item > p:nth-last-of-type(2) { /* .first-item-child-4 */
border: 1px solid #ff0000;
}
/* 特定类型唯一子元素 */
.first-item > h3:only-of-type { /* .first-item-child-1 */
border: 2px dotted #00ff00;
}
/* 唯一子元素 # */
.fourth-item :only-child { /* .fourth-item > span */
background-color: #cccccc;
}
/* #: 警告!选择器冒号前要有空格 */彩蛋
:root根元素，返回<html>