css 选择符 应用

1.属性选择符：

eg.1）所有包含alt属性的图像都将会有一个灰色的边框

img[alt]?{

border:1px ?dotted #999;

}

<img src=”http://happysnail.org” alt=”happysnail” />

2）包含title属性的链接将是红色

a[title]{

color:#C00;

}

<a href=”http://happysnail.org” ?title=”happysnail” >happysnail</a>

2、子对象选择符

eg.

这个规则将设置所有属于<div>元素子对象的链接的样式

div > a {

text-indent :-9999px;

}

<div >

<a href=””>happysnail</a>

<ul>

<li><a href=””>happy</a></li>

<li><a href=””>snail></a></li>

</ul>

</div>

只有div 的直接 子对象a 才会有 text-indent 的属性，而<ul><li>下的a将不会有text-indent效果

3、相邻选择符

eg.只有snail是红色的

h2+p {

color:#C00;

}

<h2>happy</h2>

<p>snail</p>

<p>.org</p>

4、伪类和伪对象

1) 只有第一个P有效果

<div class=news>

<p>I’m the first child</p>

<p>I’m the second child</p>

</div>

news.p:first-child{

font-size:200%;

}

2）：focus将应用于那些获得焦点的对象

input[type=text]:focus{

color:#000;

background:#ffc;

}

3）p的第一行和第一个字母的效果

p:first-line

{

font:##C00;

}

p:first-letter

{

font-size:400%;

font-weight:bolid;

}