白驹过隙，这篇文章距今已有一年以上的历史。技术发展日新月异，文中的观点或代码很可能过时或失效，请自行甄别：）

选择器

/* 匹配name值为hello的input框 */
input[name="hello"]{color:red;}

/* 匹配name值中含有name属性的input框,如<input class="name input-item" /> */
input[class~="name"]{color:red;}

/* 匹配name值中含有hello字符的input框 */
input[name*="hello"]{color:red;}

/* 匹配name值中以hello开头的input框 */
input[name^="hello"]{color:red;}

/* 匹配name值中以hello结尾的input框 */
input[name$="hello"]{color:red;}

/* 匹配lang值等于en或者以en-开头的input框,注意这里等于en,如果有一个lang的值为"en zh"将不会被匹配 */
input[lang|="en"]{color:red}

/* 匹配input的class为input-item的元素 */
input.input-item{color:red;}

/* 匹配input紧挨着的下一个class为hello的div元素(中间不能翁有任何的其他元素) */
input+.hello{color:red;}

伪类选择器

:link:超链接未访问的锚点

:visited:已访问的超链接

:hover:鼠标停留的元素

:focus:拥有输入焦点的元素

:activate:被用户输入激活的元素,如鼠标点击一个超链接

:before:元素之前

:after:元素之后

:first-child:第一个子元素

:first-letter:块级元素首字母样式

:first-line:元素的第一个文本行

选择器的特殊性

选择器的特殊性有选择器本身的组件确定.特殊性值表述为4部分,0,0,0,0,一个选择器的具体特殊性如下:

  1. ID属性值 0,1,0,0,如#abc
  2. 类属性,属性选择,伪类 0,0,1,0,如.name,*[href="www.baidu.com"]
  3. 元素和伪元素 0,0,0,1,如p,div,:hover
  4. 内联样式 1,0,0,0,如<div style="color:red;">hello world</div>
- 写于