css权威指南——特殊选择器

属性选择器

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用 如， input[type="text"]

• h1[class]{}表示选择包含class属性的h1

• h1[class][color]{}表示选择包含两个属性的h1

• h1[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元素前加一对银色中括号