CSS3选择器
1、属性选择器
|
[target] |
选择所有带有target属性元素 |
|
|
[target=-blank] |
选择所有使用target="-blank"的元素 |
|
|
a[src^="https"] |
选择每一个src属性的值以"https"开头的元素 |
|
|
a[src$=".pdf"] |
选择每一个src属性的值以".pdf"结尾的元素 |
|
|
a[src*="runoob"] |
选择每一个src属性的值包含子字符串"runoob"的元素 |
|
|
a[class~="link"] |
选择class属性值中包含link的元素 |
|
|
img[src|="link"] |
选择src属性值等于link或以link-开头的所有元素 |
2、CSS伪类选择器
|
p:nth-child(2) |
选择每个p元素是其父级的第二个子元素 |
|
|
p:nth-last-child(2) |
选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 |
|
|
p:nth-of-type(2) |
选择每个p元素是其父级的第二个p元素 |
|
|
p:nth-last-of-type(2) |
选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 |
|
|
p:last-child |
指定只有选择每个p元素是其父级的最后一个子级。 |
|
|
p:first-child |
指定只有当<p>元素是其父级的第一个子级的样式 |
|
|
:empty |
p:empty |
选择没有子元素的p标签元素 |
|
:only-child |
p:only-child |
选择只有一个子元素的p标签元素 |
3、CSS伪元素选择器
|
p:first-letter |
选择每一个<P>元素的第一个字母或者第一个汉字 |
|
|
p:first-line |
选择每一个<P>元素的第一行 |
|
|
p:before |
在每个<p>元素之前插入内容 |
|
|
p:after |
在每个<p>元素之后插入内容 |
|
|
:selection |
p:selection |
改变p标签中的默认效果，只能设置background、color属性 |
4、基本选择器
(1)通配符选择器
|
* |
* { } |
选择页面上的所有元素 |
|
选择器 * |
.box* { } |
选择box元素下的所有元素 |
(2)元素选择器
|
E |
li { } |
选择li元素 |
(3)类名选择器
|
.class |
.box { } |
选择类名为box的元素 |
|
E.class |
p.box { } |
选择类名为box的p标签元素 |
(4)ID选择器
|
#ID |
#box { } |
选择ID为box的元素 |
(5)群组选择器
|
selector1,selector2……. |
.left,.right { } |
选择类名为left、right的元素 |
5、层次选择器
(1)后代选择器
|
E F |
ul li { } |
选择ul标签元素下的所有li标签元素 |
(2)子代选择器
|
E>F |
ul>li { } |
选择ul标签元素下的子元素li标签 |
(3)相邻兄弟元素选择器
|
E+F |
img+p { } |
选择紧邻img标签的p标签元素 |
(4)通用兄弟选择器
|
E~F |
Img~p { } |
选择img标签后的所有的p标签元素 |
6、动态伪类选择器
(1)锚点伪类
|
a:link |
链接未访问的样式 |
|
|
:visited |
a:visited |
链接已访问过的样式 |
|
:hover |
a:hover |
鼠标悬浮在链接上的样式 |
|
:active |
a:link |
鼠标选中链接时的样式 |
(2)用户行为伪类
|
:hover |
a:visited |
用户用鼠标划过对应的元素，但是未激活显示的样式 |
|
:focus |
a:hover |
一个元素本身具备焦点（接受键盘、鼠标、form的输入等）之后，显示的样式 |
|
:active |
a:link |
用户按下鼠标后，但是并未离开时候的样式 |
7、UI元素状态伪类选择器
|
:enabled |
a:visited |
对可用的文本框设置样式 |
|
:disabled |
a:hover |
对不可用的文本框设置样式 |
|
:checked |
a:link |
对选中的的复选框设置样式 |
8、否定伪类选择器
|
:not |
input:not([type="submit"]) { } |
对form中除了类型为submit所有input设置样式 |
