CSS3笔记---选择器
2016-11-05 本文已影响0人
珍珠林
1.1. 属性选择器
- [att*=val]
选中name值包含person的input元素：
input[name*=person]
- [att^=val]
选中name值以person打头的input元素：
input[name^=person]
- [att$=val]
选中name值以person收尾的input元素：
input[name$=person]
1.2 伪类选择器
伪类选择器与类选择器的区别是，类选择器可以随便起名，而伪类选择器是CSS中已定义好的选择器。
CSS中最常用的伪类选择器是使用在a元素上的几种选择器：
a:link {color:#FF0000; text-decoration:none}
a:visited {color:#00FF00; text-decoration:none}
a:hover {color:#FF00FF; text-decoration:none}
a:active {color:#0000FF; text-decoration:none}
1.3. 伪元素选择器
并不是对真正的元素使用的选择器，而是针对CSS中已定义好的伪元素使用的选择器
- first-line伪元素选择器
对段落的第一行进行着色：
p:first-line {color:#0000FF}
- first-letter伪元素选择器
对段落的首字符着色：
p:first-letter {color:#0000FF}
- before伪元素选择器
给每个列表项设置前导项目符●：
li:before {content: ●}
- after伪元素选择器
给每个列表项后面插入某段文字：
li:after {content: "（仅用于测试，请勿用于商业用途。）"}
1.4. 结构性伪类选择器
结构性伪类选择器的共同特征是允许开发者根据文档树中的结构指定元素的样式。
- root选择器
root选择器将样式绑定到文档树的根元素上，在HTML页面中就是<html>元素。
将整个网页背景设置为黄色，body元素的背景色设为绿色：
:root {background-color: yellow;}
body {background-color: limegreen;}
- not选择器
指定body的背景色为黄色，派出h1元素：
body *:not(h1) {background-color: yellow;}
- empty选择器
指定表格中空单元格的背景色为黄色：
table td:empty{background-color: yellow;}
- target选择器
我们把id被当作超链接来使用的元素，称为target元素。target选择器可作用于此类元素。
只在用户点击了页面中的超链接，并且跳转到target元素后起作用，样式起作用：
target {background-color: yellow}
- first-child和last-child选择器
指定第一个和最后一个列表元素的样式
li:first-child {background-color: yellow;}
li:last-child {background-color: skyblue;}
- nth-child和nth-last-child选择器（IE8不支持）
指定第二个和倒数第二个列表元素的样式：
li:nth-child(2) {background-color: yellow;}
li:nth-last-child(2) {background-color: yellow;}
循环指定列表项的样式：
li:nth-child(4n+1) {background-color: yellow;}
li:nth-child(4n+2) {background-color: limegreen;}
li:nth-child(4n+3) {background-color: red;}
li:nth-child(4n+4) {background-color: white;}
指定表格奇数行与偶数行指定不同背景样式：
li:nth-child(odd) {background-color: yellow;}
li:nth-child(even) {background-color: skyblue;}
- nth-of-type和nth-last-of-type选择器（IE8不支持）
nth-child选择器在计算子元素是第奇数个还是第偶数个时，是连同父元素的所有子元素一起计算的。因此，如果奇偶样式未能达到预期效果，可使用nth-of-type和nth-last-of-type代替：
li:nth-of-type(odd) {background-color: yellow;}
li:nth-of-type(even) {background-color: skyblue;}
- only-child选择器
指定当列表项只有唯一一项时的列表样式：
li:only-child {background-color: yellow;}
1.5. UI元素状态伪类选择器
当元素处于某种状态下时才起作用，默认状态下不起作用。在CSS3中，共有17种UI元素状态选择器（除了hover和focus外，IE8支持都不太好）：
- E:hover：鼠标指针移上去时应用样式
- E:active：鼠标在元素上按下但未松开时应用样式
- E:focus：元素获得光标时应用样式
- E:enabled：元素处于可用状态时应用样式
- E:disabled：元素处于不可用状态时应用样式
- E:read-only：元素只读时的应用样式（FireFox中需要加-moz-前缀）
- E:read-write: 元素非只读时应用样式（FireFox中需要加-moz-前缀）
- E:checked：单选或复选按钮选中时应用样式
- E:selection：内容选中时应用样式
- E:defalut（各浏览器支持均不太好，不做了解）
- E:indeterminate（各浏览器支持均不太好，不做了解）
- E:invalid：元素内容不能通过HTML5诸如required、pattern等属性的检查，或元素内容不符合规定格式（例如通过type属性值为Email的input元素来限定元素内容必需为有效的Email格式）时应用样式
- E:valid：与E:invalid相反
- E:required：指定允许使用required属性，且已指定required属性的input、select及textarea元素的样式
- E:optional：指定允许使用required属性，且未指定required属性的input、select及textarea元素的样式
- E:in-range：指定当元素有效值被限定在一定范围之内（min属性值与max属性值来限定），且实际输入值在该范围之内时使用的样式
- E:out-of-range：指定当元素有效值被限定在一定范围之内（min属性值与max属性值来限定），且实际输入值在该范围之外时使用的样式
1.6. 通用兄弟元素选择器
指定div的同辈p兄弟元素的样式：
div ~ p {background-color: #00FF00;}
