css-选择器

1.CSS选择符有哪些？

1.1 通配符选择器

*

1.2 id选择器

(# idName)

1.3 类选择器

(.className)类名中**包含**className即应用样式–多类选择器

1.4 属性选择器

(a[attribute = attributeName])

简单属性值选择

有calss属性(值不限)的所有h1元素：h1[class]；

包含title属性的所有元素：*[title]

同时包含href和title属性的HTML超链接元素：a[href][title]

具体属性值选择

class属性值是（完全匹配，不是包含）urgent warning的planet元素：planet[class = “urgent warning”]
注意和类选择器的区别

部分属性值选择

–其实就是词之间用空格分隔，可以根据其中任意一个词来进行选择，就和类选择器的用法类似

p[class~=”warning”] 和p.warning是一致的，但是~可以用于所有所有属性，不止class属性

css3新增–子串匹配属性选择器(3个)

[attribute^=”value”]

eg:a[src^=”https”] 选择其 src 属性值以 “https” 开头的每个 a 元素。

[attribute$=”value”]

eg:a[src$=”.pdf”] 选择其 src 属性以 “.pdf” 结尾的所有a元素

[attribute*=”value”]

eg:a[src*=”abc”] 选择其 src 属性中包含 “abc” 子串的每个 a 元素。

[class*=”col-“]类名中包含col-子串的元素

特定属性选择类型

[attribute|=”value”]

eg：| 只匹配连字符分割的属性，比如*[lang|=en] 匹配 lang属性等于en或者以en-开头的所有元素

1.5 标签选择器

div, h1, p等

1.6 后代选择器

li a

1.7 子选择器

ul > li

不想选择一个任意的后代元素，希望缩小范围，只选择另一个元素的子元素

1.8 相邻选择器

h1 + p

选择紧接在一个h1元素后出现的所有段落，h1要和p元素有共同的父元素

1.9 伪类选择器

a:link,a:visited,a:hover,a:active

p:first-letter,p:first-line,p:first-child

p:before,p:after

css3新增的伪类选择器

http://blog.youkuaiyun.com/github_34514750/article/details/51122212

eg:p:only-child 选择属于其父元素的唯一子元素的每个

元素。