css选择器的一些运用

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>