一、基本选择器
1、通配符选择器 *{marigin: 0; padding: 0; }
2、类名选择器 （1）选择指定 class 属性值为“class”的任意类型的任意多个元素。比如下面给使用了 important 这个类名的元素设置样式。
（2）类选择器还可以结合元素选择器来使用。比如我们有好多个元素使用了类名“items”，但如果只想对使用这个类名的 p 元素上修改样式那么可以这么写：p.items { color: red; }
3、标签选择器 用于选择指定类型的 HTML 元素，如 div、ul、li 等。
4、id 选择器 选择指定 ID 属性值为“id”的任意类型元素。比如下面选择了 id 为"first"的元素。
二 、层级选择器
1、子代选择器 (E>F)
2、后代选择器 (E F )
3、交集选择器 (E.F)
4、并集选择器 (E,F)
三、属性选择器
|
[target] |
选择所有带有target属性元素 |
2 |
|
|
[target=-blank] |
选择所有使用target="-blank"的元素 |
2 |
|
|
a[src^="https"] |
选择每一个src属性的值以"https"开头的元素 |
3 |
|
|
a[src$=".pdf"] |
选择每一个src属性的值以".pdf"结尾的元素 |
3 |
|
|
a[src*="runoob"] |
选择每一个src属性的值包含子字符串"runoob"的元素 |
<style>
[class] {
100px;
height: 60px;
background: aquamarine;
}
[class = "box1"] {
background: hotpink;
line-height: 60px;
}
[class ^= "b"] {
border-radius: 20px;
}
[href $= "m"] {
background: chartreuse;
}
[class *= "o"] {
font: 20px;
color: #00ffff;
}
</style>
</head>
<body>
<div class="box1">我是div1</div>
<button class="btn">点我点我</button>
<a href="https://www.baidu.com" target="_self">百度</a>
<a href="https://www.淘宝.com" target="_blank">淘宝</a>
<div class="outer">haohaoxuexi</div>
</body>
四、伪类选择器
|
p:nth-child(2) |
选择每个p元素是其父级的第二个子元素 |
3 |
|
|
p:nth-last-child(2) |
选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 |
3 |
|
|
p:nth-of-type(2) |
选择每个p元素是其父级的第二个p元素 |
3 |
|
|
p:nth-last-of-type(2) |
选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 |
3 |
|
|
p:last-child |
指定只有选择每个p元素是其父级的最后一个子级。 |
||
|
p:first-child |
指定只有当<p>元素是其父级的第一个子级的样式 |
||
/* 第三个是li 的话显示样式 */
ul li:nth-child(3) {
background: chartreuse;
}
/* 从后往前 */
ul li:nth-last-child(2){
color: magenta;
}
/* 只会验证li标签 其他的不管 */
ul li:nth-of-type(3) {
background: #ff00ff;
}
/* 会验证第一个是不是li标签 */
ul li:first-child {
color: lime;
}
四、动态伪类选择器
之所以称为动态伪类，因为这些伪类并不存在于 HTML 中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含如下两种：
- 一种是我们在链接中常看到的锚点伪类，如":link",":visited"
- 另一种被称作用户行为伪类，如“:hover”,":active"和":focus"
1，使用锚点伪类设置链接样式
要特别注意这四个锚点伪类的设置，他们是有先后顺序的。要让他们遵守一个爱恨原则 LoVe/HAte,也就是 Link--visited--hover--active。如果把顺序搞错了会样式就会出现问题。
|
1
2
3
4
|
a:link {color:gray;} /*链接没有被访问时前景色为灰色*/a:visited{color:yellow;} /*链接被访问过后前景色为黄色*/a:hover{color:green;} /*鼠标悬浮在链接上时前景色为绿色*/a:active{color:blue;} /*鼠标点中激活链接那一下前景色为蓝色*/ |
2，使用用户行为伪类设置按钮样式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>hangge.com</title> <style> .form-submit { transition: border-color 0.218s ease 0s; background: none repeat scroll 0 0 #F5F5F5; border: 1px solid #DCDCDC; border-radius: 2px 2px 2px 2px; color: #333333; font: 11px/27px arial,sans-serif; height: 27px; padding: 0 8px; text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } .form-submit:hover { background-color: #F8F8F8; border-color: #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); color: #333333; } .form-submit:active { border-color: #4D90FE; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset; color: #000000; } .form-submit:focus { border: 1px solid #4D90FE !important; } </style></head><body> <button class="form-submit">hangge.com</button></body></html> |
五、UI元素状态伪类选择器
我们把":enabled",":disabled",":checked"伪类称为 UI 元素状态伪类，这些主要是针对于 HTML 中的 Form 元素操作，比如：
- <input type="text"/> 有 enable 和 disabled 两种状态，前者为可写状态后者为不可写状态
- <input type="radio"/> 和 <input type="checkbox"/> 有 checked 和 unchecked 两种状态。
|
1
2
3
4
5
6
7
|
/** 下面对所不可用的文本框设置样式 **/input[type="text"]:disabled {}/** 下面对所选中的的复选框设置样式 **/input[type="checkbox"]:checked {} |
六、结构伪类选择器
1，E:empty
选择没有子元素的元素，而且该元素也不包含任何文本节点
|
1
2
3
4
|
/** 比如有三个段落，其中一个段落什么都没有，完全是空的。想要这个p不显示，可这样写 **/p:empty { display: none;} |
2，E:first-child
用来选择某个元素的第一个子元素，与 E:nth-child(1) 等同。
|
1
2
3
|
/** 选择.demo下第一个li子元素 **/.demo li:first-child {} |
3，E:last-child
选择是的某个元素的最后一个子元素，与 E:nth-last-child(1) 等同。
|
1
2
3
|
/** 选择.demo下最后一个li子元素 **/.demo li:last-child {} |
4，E F:nth-child(n)
选择父元素 E 的第 n 个子元素 F。其中 n 可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
/** 选择.demo下第3个li子元素 **/.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) {} |
5，E F:nth-last-child(n)
选择父元素 E 的倒数第 n 个子元素 F。此选择器与 E:nth-child(n) 选择器计算顺序刚好相反。
其中 n 同样可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
/** 选择.demo下倒数第3个li子元素 **/.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) {} |
6，E:only-child
选择父元素只包含一个子元素，且该子元素匹配 E 元素。
|
1
2
3
|
/** .demo下只有一个字元素，且该元素为p **/.demo p:only-child {} |
7，其他
- 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 元素
（1）如果父元素下的子元素类型都是一样的，那么上面的 *type 和 *child 选择器使用起来效果是一样的。
（2）但如果父元素下有各种子元素，那就有区别了。这里以 E:fisrt-child 和 E:first-of-type 做个比较：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/** 匹配不到，因为.demo下第一个元素是p **/.demo li:first-child { color: red;}/** 可以匹配的到，.demo下派出其他元素，第一个出现li **/.demo li:first-of-type { color: green;}<div class="demo"> <p>文章列表：</p> <li>条目1</li> <li>条目2</li> <li>条目3</li></div> |
七、否定伪类选择器
匹配所有除元素 F 外的 E 元素，类似以 jQuery 中的 :not 选择器。
|
1
2
3
4
|
/** 对form中所有input加边框，但又不想submit也起变化 **/input:not([type="submit"]) { border: 1px solid red;} |
八、伪元素
1，::first-line
选择元素的第一行
|
1
2
3
4
|
/** 比如说改变每个段落的第一行文本的样式 **/p::first-line { font-weight:bold;} |
2，::first-letter
选择文本块的第一个字母，除非在同一行里面包含一些其它元素。这个主要运用于段落排版上多。
|
1
2
3
4
5
6
|
/** 首字下沉 **/p::first-letter { font-size: 56px; float:left; margin-right:3px;} |
3，::before和::after
这两个主要用来给元素的前面或后面插入内容。
（1）这个最常用的便是是清除浮动了，无需再添加一个空的 div 并应用 clear:both; 样式，只需如下样式即可在元素尾部自动清除浮动。
|
1
2
|
/** .clearfix元素尾部自动清除 **/.clearfix::after {clear: both;} |
（2）与"content"配合使用，可以实现许多特效。比如下面样式，当鼠标移动到链接上方，链接左右会出现悬浮方括号。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
a { position: relative; display: inline-block; outline: none; text-decoration: none; font-size: 16px; color: #FFF; padding: 5px 15px;}a:hover::before, a:hover::after { position: absolute;}a:hover::before { content: "5B"; left: -2px;}a:hover::after { content: "5D"; right: -2px;} |
4，::selection
用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性：一个就是 background,另一个就是 color 属性。
|
1
2
3
4
|
p::selection { background: red; color: #fff;} |