css 选择器

W3school css选择器


input, h1                       标签选择器,可用逗号分隔，指定多个标签
*                               通配符选择器 ,* 匹配所有
.class1                         类选择器,定义一个css类，提供使用 class="class1"
#id1                            id选择器,任意标签 id="id1"
p.class1                        标签选择器结合类选择器 <p class="class1">


/* 属性选择器 */
[property]                      任意标签 含有 property 属性 <* property />
p[property]                     指定标签(p) 含有 property 属性 <p property />
[property="use"]                含有mode
[property][type]                同时有 <* property type /> 属性
[property],[type]               含有 property 或者 type <* property /> <* type />
p[class="c1 c2"]                多属性选择器,class属性等于固定值"c1 c2" <* class="c1 c2" />
p[property~="part"]             部分属性选择器 <* mode="part other" />  不同于上面的属性选择器,需要全部匹配 这个只需要匹配部分


[attribute]                        用于选取带有指定属性的元素。
[attribute=value]              用于选取带有指定属性和值的元素。
[attribute~=value]             用于选取属性值中包含指定词汇的元素。
[attribute|=value]             用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]             匹配属性值以指定值开头的每个元素。
[attribute$=value]             匹配属性值以指定值结尾的每个元素。
[attribute*=value]             匹配属性值中包含指定值的每个元素。


/* 后代选择器 */
div span                        匹配所有 div 下面的span, 子项，孙项 等等
div > span                      匹配子项  不包括孙项
li + li                         匹配兄弟项 <li><li> 第二个应用样式


/* 伪类 */
p:first-child                   匹配第一个<p>元素
q:lang{quotes: "~" "~"}

属性               描述                                         CSS版本
:active           向被激活的元素添加样式。                       1
:focus            向拥有键盘输入焦点的元素添加样式。              2
:hover            当鼠标悬浮在元素上方时，向元素添加样式。        1
:link             向未被访问的链接添加样式。                     1
:visited          向已被访问的链接添加样式。                     1
:first-child      向元素的第一个子元素添加样式。                 2
:lang             向带有指定 lang 属性的元素添加样式。           2



/* 伪元素 */
属性                描述                                        CSS版本
:first-letter          向文本的第一个字母添加特殊样式。              1
:first-line            向文本的首行添加特殊样式。                     1
:before                在元素之前添加内容。                        2
:after                 在元素之后添加内容。                        2