1、基本选择器
（1）通配符选择器（*）
|
1
2
3
4
|
* { marigin: 0; padding: 0;} |
（2）标签选择器 如div p li
|
1
2
3
4
|
p{ background-color: grey; color: orange;} |
(3) 类选择器（.class）
|
1
2
3
4
|
.important { font-weight: bold; color: yellow;} |
(4)多类名 选择器
|
1
2
3
|
p.items { color: red;} |
（5）id选择器
|
1
2
3
4
|
#first { background: lime; color: #000;} |
（6）群组选择器
|
1
2
3
4
5
|
.first, .last { background: green; color: yellow; border: 1px solid #ccc;} |
2、复杂选择器
（1）后代选择器
|
1
2
3
|
.demo li { color: blue;} |
（2）子元素选择器
|
1
2
3
4
|
ul > li { background: green; color: yellow;} |
（3）兄弟元素选择器
|
1
2
3
4
5
|
li + li { background: green; color: yellow; border: 1px solid #ccc;} |
（4）通用兄弟选择器
|
1
2
3
4
5
|
.active ~ li { background: green; color: yellow; border: 1px solid #ccc;} |
3、CSS3属性选择器
[attribute] [target]选择所有带有target属性元素
|
1
2
|
.demo a[href][title] {} |
[attribute=value] [target=-blank]选择所有使用target="-blank"的元素
|
1
2
3
4
5
6
7
|
/**选择了.demo下id="first"的a元素 **/.demo a[id="first"] {} /**选择了.demo下id="first"，且拥有title属性的a元素 **/.demo a[id="first"][title] {} |
[attribute^=value] a[src^="https"]选择每一个src属性的值以"https"开头的元素
|
1
2
|
a[href^="mailto:"] {} |
[attribute$=value] a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素
|
1
2
|
a[href$="png"] {} |
[attribute*=value] a[src*="runoob"]选择每一个src属性的值包含子字符串"runoob"的元素 元素值匹配。
a[title*="site"] {
}
E[attribute|=value]
|
1
2
3
4
5
6
7
|
img[src|="figure"] { } <img src="figure-0.png" alt="图1"><img src="figure-1.png" alt="图1"><img src="figure-2.png" alt="图1"> |
E[attribute~=value]
|
1
2
3
4
|
a[class~="links"] {} <a href="" class="links item">hangge.com</a> |
4、动态伪类选择器
|
1
2
3
4
|
a:link {color:gray;} /*链接没有被访问时前景色为灰色*/a:visited{color:yellow;} /*链接被访问过后前景色为黄色*/a:hover{color:green;} /*鼠标悬浮在链接上时前景色为绿色*/a:active{color:blue;} /*鼠标点中激活链接那一下前景色为蓝色*/ |
5、UI元素状态伪类选择器
- <input type="text"/> 有 enable 和 disabled 两种状态，前者为可写状态后者为不可写状态
- <input type="radio"/> 和 <input type="checkbox"/> 有 checked 和 unchecked 两种状态。
-
123456
input[type="text"]:disabled {}/** 下面对所选中的的复选框设置样式 **/input[type="checkbox"]:checked {}
5、CSS3伪类选择器
:nth-child(n) p:nth-child(2)选择每个p元素是其父级的第二个子元素 父类的2个元素要是标签，不是则不匹配。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.demo li:nth-child(3) {} /** 选择.demo下所有偶数位置的li子元素（2,4,6...） **/.demo li:nth-child(even) {} /** 选择.demo下第5个位置起的所有li子元素（5,6,7...） **/.demo li:nth-child(n+5) {} /** 选择.demo下前5个li子元素（1,2,3,4,5） **/.demo li:nth-child(-n+5) {} /** 选择.demo下从1起，隔3取1的所有li子元素（1,5,9...） **/.demo li:nth-child(4n+1) {} |
:nth-last-child(n) p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.demo li:nth-last-child(3) {} /** 选择.demo下倒数第2个起偶数位置的li子元素（倒数第2个,倒数第4个...） **/.demo li:nth-last-child(even) {} /** 选择.demo下倒数第5个位置起的所有li子元素（倒数第5个,倒数第6个...） **/.demo li:nth-last-child(n+5) {} /** 选择.demo下最后5个li子元素（倒数第1,2,3,4,5） **/.demo li:nth-last-child(-n+5) {} /** 选择.demo下从最后1个起，隔3取1的所有li子元素（倒数第1,5,9...） **/.demo li:nth-last-child(4n+1) {} |
:last-child p:last-child指定只有选择每个p元素是其父级的最后一个子级。
|
1
2
|
.demo li:last-child {} |
:first-child p:first-child指定只有当<p>元素是其父级的第一个子级的样式
|
1
2
|
.demo li:first-child {} |
E:only-child
|
1
2
|
.demo p:only-child {} |
E:empty
|
1
2
3
|
p:empty { display: none;} |
- E:first-of-type：类似于 E:fisrt-child，只不过它选择父元素内具有指定类型的第一个 E 元素
- E:last-of-type：类似于 E:last-child，只不过它选择父元素内具有指定类型的最后一个 E 元素
- E:nth-of-type(n)：类似于 E:nth-child(n)，只不过它选择父元素内具有指定类型的第 n 个 E 元素
- E:nth-last-of-type(n)：类似于 E:nth-last-child(n)，只不过它选择父元素内具有指定类型的倒数第 n 个 E 元素
- E:only-of-type：类似于 E:only-child，只不过它选择父元素只包含一个同类型子元素，且该子元素匹配 E 元素
6、否定伪类选择器
匹配所有除元素 F 外的 E 元素，类似以 jQuery 中的 :not 选择器。
|
1
2
3
|
input:not([type="submit"]) { border: 1px solid red;} |
7、CSS3伪元素选择器
是一个行内元素，需要转换成块:display:block float:**position:。
注意： Before 与 after
必须添加content,哪怕不设置内容，也需要content:””。
E:after、E:before在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、
E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。
:first-letter p:first-letter选择每一个<P>元素的第一个字母或者第一个汉字
|
1
2
3
4
5
6
|
/** 首字下沉 **/p::first-letter { font-size: 56px; float:left; margin-right:3px;} |
:first-line p:first-line选择每一个<P>元素的第一行
|
1
2
3
4
|
/** 比如说改变每个段落的第一行文本的样式 **/p::first-line { font-weight:bold;} |
:before p:before在每个<p>元素之前插入内容 使用contant插入内容
|
1
|
.clearfix::before {clear: both;} |
:after p:after在每个<p>元素之后插入内容
::selection
用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性：一个就是 background,另一个就是 color 属性。
|
1
2
3
4
|
p::selection { background: red; color: #fff;} |