Question

CSS选择器有多少种类型？

Answer 1

<div id="demo">
<div class="inner">
<p><a href="#">链接</a></p>
<p><input type="checkbox" name="" id="" /></p>
</div>
</div>
class 选择器 .inner{ width:100px;}
id 选择器 #demo{ width:100px;}
标签 选择器 p{ width:100px;}
后代选择器 p a{ color: #f60;}
伪类选择器 a:hover{ color: #f00;}
伪元素选择器 a:after{ clear: both;}
属性选择器 input[type=checkbox]{ margin-left: 10px;}
css3选择器
由于ie的问题，比较常用的是前4种选择器。

Answer 2

n元素选择器：
html {color:black;}
h1 {color:blue;}
div {color:silver;}
n 选择器分组：
body, h2, p, table, th, td, pre, strong, em { color:gray; }
n 通配符选择器：
* {color:red; margin:0px;padding:0px;}
n 类选择器：类选择器允许以一种独立于文档元素的方式来指定样式
*.imp { color:red; } //可省略*
<p>重要的提示语</p>
n 子串匹配属性选择器
p.important {color:red;} <==> p[class="important"]
h1.important {color:blue;}
n 多类选择器
<div class="imp urgent warning">多类选择器</div>
nID选择器：区分大小写
#user {color:black;}
n 属性选择器：
*[title] {color:red;}
a[href][title] {color:red;}
n 具体属性值选择：
a[href="www.w3school.com.cn"][title="W3School"] {color: red;}
n 属性与属性值必须完全匹配：
<p class="important warning">完全匹配</p>
p[class="important warning"] {color: red;}
n 部分属性值选择
p[class~="important"] {color: red;}
n 子串匹配属性选择器
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
*[lang|="en"] {color: red;}
选择 lang 属性等于 en 或以 en- 开头的所有元素
n选择子元素：
h1 > strong {color:red;}
n相邻兄弟选择器：
h1 + p {margin-top:50px;}
li + li {font-weight:bold;}
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Answer 3

3种