css选择器

关系选择器

子代选择器：以“>”连接

后代选择器（包含子代选择器）：以空格连接

相邻兄弟选择器（捕获紧跟该元素后面的第一个兄弟元素）以“+”连接

后面兄弟选择器（捕获紧跟该元素后面的兄弟元素）以“~”连接

 

属性选择器

html标签的六大公共属性：name，title，class，id，style，data-*

[name]：匹配含有name属性的标签

[name="user"]：匹配name属性名为user的标签

[name="user"][title]：匹配name属性名为user的，且含有title属性的标签

[id^="us"]：匹配id属性名中含有以us开头的连续字符的标签

[id$="er"]：匹配id属性名中含有以er结尾的连续字符的标签

[id*="ue"]：匹配id属性名中含有连续字符ue的标签

[class~="container"]：匹配具有class属性且属性值为空格分隔的字词列表，其中一个类名等于container的元素

[class|="my"]：匹配具有class属性，其值是以my开头并用连接符"-"分隔的字符串的元素；如果值仅为my, 可以匹配

伪类选择器

.ClassName : link   ：未被访问

.ClassName : visited  ：已访问

.ClassName : hover  ：鼠标悬浮

.ClassName : active  ：被选择

ps :  以上伪类选择器同时出现时的使用顺序不可乱：

        a:hover必须放置在a:link , a:visited之后，a:active必须放在hover之后   LoVe HAte   love hate ==》 爱与恨 ^_^

.ClassName:not(.ClassName)：否定伪类

.ClassName:first-child：获取该类的第一个元素

.ClassName:last-child：获取该类的最后一个元素

.ClassName:nth-child(n)：获取指定元素，n代表指定的第几个元素

.ClassName:only-child：选择只有一个元素

.ClassName:empty：选择空元素

input框的属性：checked（勾选）、enable（允许）、disable（禁止）

元素选择器

通配符选择器，代表所有标签：*；通配符选择器一般不建议使用，存在功能分歧

标签选择器：如div、span，p等

id选择器：“#+IDName”

类选择器：“  .  + ClassName ”