属性选择器
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用 如, input[type="text"]
h1[class]{}
表示选择包含class属性的h1h1[class][color]{}
表示选择包含两个属性的h1h1[class="urgent warning"]{}
只选择class= urgent warning
的元素 (包括顺序,完全匹配) 与h1.urgent.warning{}
不同a[href="www.baidu.com"][title="hhh"] {}
同样属性需要完全匹配h1[class~="warning"] {}
表示选择选择class属性包含warning的h1 与h1.warning{}
等价 class可换成任何属性
子串选择器
foo|="bar"
选取带有以指定值bar开头的属性值的元素,该值必须是整个单词bar 或 bar-。
foo^="bar"
选择foo属性以bar开头的所有元素
foo$="bar"
选择foo属性以bar结尾的所有元素
foo*="bar"
选择foo属性中包含子串bar的所有元素
相邻兄弟选择器
h1+p
选择紧接在h1后面出现的段落,h1与p要有共同的父元素,
元素要求按html中顺序出现书写
一些伪类
伪元素必须放在出现该伪元素的选择器的最后面
P:first-child
选择作为某元素的第一个子元素的p*:lang(en)
语言伪类选择器 相当于*|=lang()a:link:hover {}
伪元素
:first-line{} :first-letter{}
body:after {content:"The End";}
在文档的最后用一个适当的结束语结束h2:before {content:"}}";color:silver;}
表示在每个h2元素前加一对银色中括号