《精彩绝伦的CSS》——选择器（五）多种选择方式

五、多种选择方式 
1、元素类型选择器 
2、类选择器 
3、id选择器 
4、通用选择器（*）——匹配文档中所有元素 
个人经常喜欢用该选择器做一下简单的兼容如： 
*{ 
margin:0; 
padding:0; 
  } 
但建议还是用一些规范的兼容设置，如： 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
margin: 0; 
padding: 0; 
border: 0; 
font-size: 100%; 
font: inherit; 
vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
display: block; 
} 
body { 
line-height: 1; 
} 
ol, ul { 
list-style: none; 
} 
blockquote, q { 
quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
content: ”; 
content: none; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 

参照：http://meyerweb.com/eric/tools/css/reset/ 

5、属性选择器：匹配具有符合指定条件属性的所有元素。 
以下是几种条件匹配形式： 
[attr] 选择定义attr属性的元素，忽略属性值 
[attr=”value”] 选择定义attr属性，且属性值为value的元素 
[attr^=”value”] attr属性值以字符串value打头的元素 
[attr$=”value”] attr属性值以value结尾的元素 
[attr*=”value”] attr属性值包含字符串value的元素 
[attr~=”value”] attr属性具有多个值，其中一个为字符串value的元素 
[attr|=”value”] attr属性值为连字符（“-”）分割的多个值，其中一个为字符串value的元素

大部分都好理解，就最后一个举个例子：

<p>I like <span lang="en-gb">chunmei</span>and meimei</p>

对于上面这个<span>元素的选择就可以这样：
[lang|="en"]{
border:thin pink solid;
}

小tips：

属性选择器前可以加上其他选择器辅助选择，如：a[href=”https://www.baidu.com”]

属性选择器中的attr很灵活，可以是width，height也可以是类class等

6、并集选择器：可同时选择多个选择器 
ul,li,table,img,p{ 
padding:0; 
margin:0; 
} 
设置兼容时就是很常见的并集选择器

7、后代选择器：匹配某元素的所有符合条件的后代元素（不仅仅是子元素） 
div ul{ 
list-style:none; 
} 
匹配div下的所有ul元素

8、子代选择器：匹配某元素的所有符合条件的子元素（仅是子元素，不包括子元素的后代） 
div>ul{ 
list-style:none; 
}

9、相邻兄弟选择器：匹配紧跟在某元素之后的对应元素 
li+li{ 
list-style:none; 
}

10、普通兄弟选择器：匹配某元素之后对应的兄弟元素但不包含直接相邻的兄弟元素。 
li~h1{ 
font-size:250%; 
} 
匹配li元素后且与之共享父元素的h1元素，除第一个h1之外。