CSS3选择器

伪元素选择器

first-line匹配内容的第一行元素

first-letter     匹配内容的第一个字符

:before{

content:"内容";          在一个元素之前插入内容

}

:after{

content:"内容";          在一个元素之后插入内容

}

::selection{

color:#000;

background:#000;

}                                   使元素鼠标点击滑过文字后，有颜色变化效果

---

目标伪类选择器

TAB菜单切换效果

:target{}

div:target{

width: 100px;

height: 200px;

background-color: orange;

}

---

状态伪类选择器

常适用input标签

:disabled          禁用

:enabled          非禁用

:read-only          只读

:focus          获得焦点——这个要放在其他情况下面才能生效，权重低。

:checked          选中

获得焦点:

禁     用:

非禁用:

只    读:

选中:

---

结构伪类选择器

:root          根元素(一般指的是body)

:empty          内容为空的元素

----------- 不常用 -------------

:first-child     第一个

:last-child     最后一个

:nth-child(n)     找到第n个元素

:nth-last-child(n)     找到倒数第n个元素

:only-child     找到属于其父元素的唯一子元素的每个元素

------------- 常 用 -------------

:first-of-type          找到第一个元素

:last-of-type          找到最后一个元素

:nth-of-type(n)          找到指定的第n个元素

:nth-last-of-type(n)          找到指定的倒数第n个元素

:only-of-type          找到属于父元素的特定类型的唯一子元素的每个元素

:nth-of-type(odd)          找到元素中的奇数元素

:nth-of-type(even)          找到元素中的偶数元素

---

否定伪类选择器

:not          找到除了not出来的元素

选择器找的非指定元素

---

属性选择器

通过元素的属性或属性值来获取元素

[value]               [属性名]选择某个属性的元素

[value][name]               [属性名][属性名]可同时筛选多个

input[value]               匹配条件[属性名]

[value = "按钮"]          [属性名 = "属性值"]选取某个指定属性值的元素

[name ~= "b"]          [属性名 ~= "属性值1 2 3 4"]选取具有某个属性且包含的所有属性

[name |= "inner"]          [属性名 != "属性值"]具有某个属性，且属性值以某些字符串作为前缀

[name *= "按钮"]          [属性名 *= "属性值"]包含某些字符的

[name ^= "inner"]          [属性名 ^= "属性值"]以某些字符开头的

[name $= "html"]          [属性名 $= "属性值"]以某些字符结尾的