Div>p{color:red} 表示div里面的p标签都为红色。<div><p></div>
Div+p{color:red}表示与div相邻的p标签为红色<div></div><p></p><p></p>
Div~p{color:red}表与div相邻的所有p标签为红色<div></div><p></p><p></p>
a[title] {
color: red;
}设置了title属性的超链接<a href=”http://www.aaa.doc”>bbbbb</a>
<a href=”http://www.ffff.pdf” title=”aa”>ccccccc</a>
a[href$=pdf] {
color: red;
} 表示以pdf结尾的超链接为红色<a href=”http://www.aaa.pdf”>aaaaaaa</a>
a[href^=pdf] {
color: red;
}表示以pdf开头的超链接为红色
a[href*=pdf] {
color: red;
}表示包含pdf的超链接为红色
input[id=”q”] {
color: red;
}设置了id=q的input表单元素或input[type=”button”]{ color:red;}表示设置了type=button属性的input
p:nth-child(3) {
color: red;
}表示p是其父元素的第三个元素满足是p元素
例题：<body>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<span>bbbbbbbbbbbbb</span>
<p>ccccccccccccccccccccc</p>
<div>
<span>dddddddddddddddd</span>
<p>ddddddddddddddddd</p>
<p>eeeeeeeeeeeeeeeeeee</p>
<div>fffffffffffffffffffffffff</div>
</body>
比较：
<body>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<span>bbbbbbbbbbbbb</span>
<p>ccccccccccccccccccccc</p>
<div>
<span>dddddddddddddddd</span>
<p>ddddddddddddddddd</p>
<span>ffffffffffffffffffffff</span> (不是p元素所以没有发生变化)
<div>fffffffffffffffffffffffff</div>
</body>
p:nth-of-type(3) {
color: red;
}表示其父元素的第三个p元素。
例题:
<body>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<span>bbbbbbbbbbbbb</span>
<p>ccccccccccccccccccccc</p>
<div>
<span>dddddddddddddddd</span>
<p>ddddddddddddddddd</p>
<p>eeeeeeeeeeeeeeeeeee</p>
<div>fffffffffffffffffffffffff</div>
<p>rrrrrrrrrrrrrrrrrrrrr</p>(父元素为div)
<p>wwwwwwwwwwwwwwwwwww</p>
</div>
<span>qqqqqqqqqqqqqqqqqqq</span>
<p>oooooooooooooooooooooooo</p>(父元素为body)
</body>
p:first-child {
color: red;
}表示其父元素的第一个元素满足是p元素。
<div>
<p>aaaaa</p>
<ul>
<li><p>xxxxxx</p></li>
</ul>
</div>
比较：
<div>
<span>sssssssssss</span>
<p>aaaaaaaaaaaaa</p>(因为不满足第一个元素是p元素)
<ul>
<li><p>xxxxxx</p></li>
</ul>
</div>
伪类一般是一个冒号：伪元素一般为两个冒号：：
p::first-line
{
color:red;
}表示第一行p元素为红色
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
p::before
{
content:”台词：”;
}表示在所有的p标签内容前面加“台词”
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>
