基本选择器
子元素选择器（IE8+）
语法：
父元素 > 子元素
相邻兄弟元素选择器（IE8+）
语法：
元素 + 兄弟相邻元素
通用兄弟元素选择器（IE8+）
语法：
元素 ~ 后面所有兄弟相邻元素
群组选择器
将具有相同样式的元素分组在一起，使用“，”隔开
语法：
元素1 ， 元素2 ，…元素n
属性选择器
对带有指定属性的HTML元素设置样式。
使用CSS3属性选择器，你可以只指定元素的某个属性，
或者你还可以同时指定元素的某个属性和其相对的属性值。
Element [ attribute]（IE8+）
为带有attribute属性的Element元素设置样式
实例：
有href属性的，a元素设置样式
a[href] { text-decoration: none};Element [ attribute=”value”]（IE8+）
为attribute=”value”属性的Element元素设置样式
实例：
href属性等于#的，a元素设置样式
a[href="#"] { text-decoration: none};Element [ attribute~=”value”]（IE8+）
为attribute属性包含“value”单词的元素设置样式
实例：
class 包含two这个单词 的，都会被选到。
下面这两个a标签都会被选中。
CSS
a[class~="two"]{ color: #eee; }
HTML
<a class="one two">
<a class="two three">
Element [ attribute^=”value”]（IE8+）
为attribute属性以“value”开头的元素设置样式
实例：
href属性以#开头的，a元素设置样式
下面这两个a标签都会被选中。
CSS
a[href^="#"] { text-decoration: none};
HTML
<a href="#1">
<a href="#2">
Element [ attribute$=”value”]（IE8+）
为attribute属性以”value”结尾的元素设置样式
Element [ attribute*=”value”]（IE8+）
为attribute属性包含“value”字符串的所有元素设置样式
补充：
~= && *=
~=：选中的是单词，与前面的词用空格分开的
*=：选中的是字符串
实例：
比如<img title='yes this' /> ，~=this 可以选中；
<img title='thisistrue' /> ， *=this 可以选中。
Element [ attribute|=”value”]（IE8+）
为attribute属性为“value”或以“value —”开头的所有元素
实例：
CSS
a [href|="countDown"]
HTML
<a href="countDown">
<a href="countDown-1">
伪类选择器
动态伪类
这些伪类并不存在于HTML中，只有当用户和网页元素交互的时候才能体现出来。
锚点伪类
:link （超链接默认样式）
:visited （访问过的链接样式）
用户行为伪类
:hover
:focus（光标进入文本框时）
:active（被选中的时候）
UI元素状态伪类
:enabled （input可用） （IE9+）
:disabled （input不可用） （IE9+）
:checked （复选框被选中） 仅有Opera可用
CSS3结构伪类
Element:first-child （IE8+）
选择 父元素中的首个子元素是 Element的元素
需要满足2个条件：
父元素中的首个子元素；
恰好这个元素又是Element。
实例：
第一个div整个选中，第二个div里的2-1会被选中。
第一个div是相对于父元素body的首个div元素；2-1是相对于父元素div的首个div元素。
CSS
div:first-child{ color:#fff ;}
HTML
<body>
<div>
<div>1-1</div>
<div>1-2</div>
</div>
<div>
<div>2-1</div>
<div>2-2</div>
</div>
</body>
Element:last-child （IE8+）
选择 父元素中的最后一个子元素是 Element的元素
需要满足2个条件：
父元素中的最后一个子元素；
恰好这个元素又是Element。
Element:nth-child(N) （IE9+）
从1开始
选中父元素下的“第N个Element子元素”。
需要满足2个条件：
父元素中的第N个子元素；
恰好这个元素又是Element。
扩展用法：
选择全部子元素
Element:nth-child(n) （IE9+）
选中所有父元素下的Element子元素
选择偶数
Element:nth-child(2n) （IE9+）
Element:nth-child(even) （IE9+）
从1开始
选中所有父元素下的 偶数 Element子元素
选择奇数
Element:nth-child(2n+1) （IE9+）
Element:nth-child(odd) （IE9+）
从1开始
选中所有父元素下的 奇数 Element子元素
Element:nth-last-child(N) （IE9+）
从1开始
选中父元素下的“倒数第N个Element子元素”。
需要满足2个条件：
父元素中的倒数第N个子元素；
恰好这个元素又是Element。
Element:nth-of-type(N) （IE9+）
选中父元素下的“第N个Element元素”，特定类型。
Element:nth-last-of-type(N)（IE9+）
选中父元素下的“倒数第N个Element元素”，特定类型。
Element:first-of-type（IE9+）
选中父元素下的“第1个Element元素”，特定类型。
Element:last-of-type（IE9+）
选中父元素下的“最后一个Element元素”，特定类型。
Element:only-child（IE9+）
选中父元素下，唯一Element子元素
需要满足2个条件：
父元素中的唯一子元素；
恰好这个元素又是Element。
Element:only-of-type（IE9+）
选中父元素下，唯一Element类型的Element子元素，特定类型。
Element:empty（IE9+）
选中父元素下，空标签
否定选择器
Element:not（元素/选择器）（IE9+）
选中非指定元素
实例：
div:not(p)
a:not(:last-of-type)
伪元素（IE9+）
用于向某些选择器设置特殊效果。
Element::first-line （块级元素）
选中Element元素的首行文本
div::first-line {
color: #f00;
font-weight: bold;
}Element::first-letter（块级元素）
选中文本首字母
Element::before
在元素前面插入新内容
特点：
1. 行级元素
2. 内容通过content写入
div::before {
content: "我在内容的前面"
}Element::after
在元素后面插入新内容
常用于清除浮动
header::after{
content: '';
display: block;
height: 0;
overflow: hidden;
clear: both;
} 扩展：
content属性
假设我们有一个元素：
<a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a>
可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：
a:after {
content:attr(title);
color:#f00;
}
扫一扫
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
