《精通CSS——高级WEB标准解决方案》-为样式找到目标

有效且良好的文档，为应用样式提供了一个框架。要想使用CSS将样式应用于特定的XHTML元素，需要有办法找到这个元素。

常用选择器

1.类型选择器=元素选择器=简单选择器

p{color:black;}

a{text-decoration:underline;}

 2.后代选择器

li a{text-decoration:underline;}

3.ID选择器(#)和类选择器(.)

#intro{font-weight:bold;}

.detePosted{color:green;}

<p id="intro">Some Text</p>

<p class="datePosted">24/3/2006</p>

避免不合理的文档结构，避免添加不必要的类，不要给每个元素制定不同的类，讲一个类或是ID应用于他们祖先，然后使用后代选择器定位他们。

最好的办法是：使用以上几种选择器的结合。

#mainContent h1{font-size:1.8em;}

<div id="mainContent">

<h1>Welcome to my site</h1>

</div>

伪类（pseudo-class）

:link和：visited称为链接伪类，只能应用于锚元素。:hover＼:active和:focus称为动态伪类,理论上可以应用于任何元素,只有少数现代浏览器(比如FireFox)支持这种功能.IE6和更低版本只注意应用于锚链接的:active和:hover选择器,完全忽略:focus.

 通用选择器(最强大最少使用)

一般用来对页面上的所有元素应用样式

*{padding:0;

   margin:0;}

在与其他选择器结合使用时,通用选择器可以用来对特定元素的所有后代应用样式,或者跳过一级后代.

高级选择器

CSS2有许多其他有用的选择器.虽然Firefox和Sefari等现代浏览器支持这些高级选择器,但是IE6以及更低版本不支持.

在创建CSS时,考虑到了向后兼容性.如果浏览器不理解某个选择器,那么它会忽略整个规则.因此,可以在现代浏览器中应用样式和易用性方面的改进,同时不必担心它在考虑浏览器中造成问题.

1.子选择器和相邻同胞选择器

后代选择器与子选择器的区别

后代选择器:一个元素的所有后代(比如,儿子,孙子).子选择器:元素的直接后代,即子元素(只有儿子).

 

 

 

IE6中,通用选择器模拟子选择器的效果.(先在所有后代上应用子元素具有的样式,然后,使用通用选择器覆盖子元素的后代上的样式.)