CSS定义选择器

1. ID与类
2. 层叠
3. 分组
4. 继承
5. 上下文选择器
6. 子类选择器
7. 其他选择器
8. 结构与注释

   20.1 ID与类

   选择器是用于控制页面设计的样式.即ID选择器何类选择器.

   一直以来,许多开发人员经常将ID与类混淆,或者不能正确的使用这两种选择器,或者简单的认为是一个代替另一个.这种认知是及其错误的.

   (1).应用ID

   每个ID在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID只用于页面的唯一元素,如页眉,主导航条,布局区块等.

   示例:<p id="hightlight">This paragraph has red text.</p>

   相应的CSS代码:

   #hightlight{

   color:#FFFFFF;

   }

   (2).将ID与选择器结合

   /*适合所有h2标题*/

   h2{

   color:#333;

   font-size:16px;

   }

   /*只适合title的h2标题*/

   h2#title {

   color:#eee;

   }

   相应的XHTML代码:<h2>Title Of My Article</h2>

   <h2 id="title">Title Of My Article</h2>

   (3).ID的使用场合

   对于每个ID,每个页面只能有一个元素使用该样式,因此ID应该为每个页面唯一存在并仅使用一次的元素不保留,

   (4).避免使用ID的场合

   当一个以上的地方需要使用同一CSS规则时,不应该使用ID.

   (5).应用类

   类可以无限次的使用,因此它是应用CSS的非常灵活的方法.

   <p class="hightlight">his paragraph has red text.</p>

   相关CSS代码:

   .hightlight {

   color:FFFFFF;

   }

   (6).结合多个类和ID

   范例:

   <ul id="drinks">

   <li class="mix">Beer</li>

   <li class="mix">Spirtis</li>

   <li class="hot">Cola</li>

   <li class="hot">Lemonade</li>

   </ul>

   相应的CSS代码:

   ul#drinks {

   color:FF6600;

   }

   .mix {

   Color:#999999;

   }

   .hot {

   Color:#333333;

   }

   (7).利用类改写基本样式:

   p{

   Color:#ff6600;

   }

   .bleached {

   Color:#ccc;

   }

   相应的XHTML代码:

   <p>This paragraph has red text.</p>

   <p class="bleached">This paragraph has red text.</p>

   (8).直接将类链接到元素上

   p.bleached {

   color:red;

   }

   相应的XHTML代码:

   <p class="bleached">This paragraph has red text.</p>

   (9).避免,适合

   对于class,如果多次重复使用或者使用子类选择器，那么就选择class，如果是定义唯一性的标记，比如布局，那么用id。

   20.2 层叠

   (1).外部链接实现层叠

   <link rel="stylesheet" type="text/css" href="css/one.css">

   <link rel="stylesheet" type="text/css" href="css/two.css">

   <link rel="stylesheet" type="text/css" href="css/three.css">

   (2).导入样式实现层叠

   @import url("one.css")

   @import url("two.css")

   @import url("three.css")

   注意点:必须牢记一个规则,越晚给的规则越重要.

   20.3 分组

   h1{

   Font-family:隶书,宋体,楷体;

   Line-height: 140%;

   Color:#333;

   }

   h2{

   Font-family:隶书,宋体,楷体;

   Line-height: 140%;

   Color:#333;

   }

   h3{

   Font-family:隶书,宋体,楷体;

   Line-height: 140%;

   Color:#333;

   }

   /*分组后*/

   h1,h2,h3{

   Font-family:隶书,宋体,楷体;

   Line-height: 140%;

   Color:#333;

   }

   /*分组例外*/

   h1{

   Font-style:italic;

   }

   20.4 继承

   h1 {

   Color:#333;

   }

   <h1>This is the greatest heading <i>in the world</i></h1>

   从BODY继承

   Body {

   Margin:10px;

   Font-family:隶书;

   Background:#000;

   Color:#fff;

   }

   20.5 上下文选择器

   h1{

   Color: #ccc;

   }

   i {

   Color:#000;

   }

   /*使用上下文选择器*/

   h1 I {

   Color:#000;

   }

   20.6 子类选择器

   .box {

   color:red;

   }

   .box1 {

   font-weight:bold;

   }

   .box2 {

   font-style:italic;

   }

   <div class="box">Box</div>

   <div class="box box1">Box1</div>

   <div class="box box2">Box2</div>

   20.7 其他选择器

   (1).类型选择器

   p{color:black;}

   a{text-decoration:underline;}

   h1{font-weight:bold;}

   (2).后代选择器

   h2 i{

   color:red;

   }

   li a{

   text-decoration:none;

   }

   #main h1{

   Color:red;

   }

   (3).伪类

   a:link{color:blue;}

   a:visited{color:green;}

   a:hover,a:active{color:red;}

   input:focus{background-color:yellow;}

   (4).通用选择器

   *{

   Padding:0;

   Margin:0;

   }

   (5).高级选择器

   高级选择器,目前支持还不太完善,所以,对于站点功能很重要的任何元素上,应该避免使用这些高级选择器.

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

   子选择器（只有其儿子才有效果，孙子没有效果）

   #nav > li {background:url(bg.gif) no-repeat left top;}

   <ul id="nav">

   <li>Home</li>

   <li>Server

   <ul>

   <li>Development</li>

   <li>Consultancy</li>

   </ul>

   </li>

   <li>Contact Us</li>

   </ul>

   相邻同胞选择器:

   h1+p{font-weight:bold;}

   <h1>Main Heading</h1>

   <p>First Paragraph</p>

   <p>Second Paragraph</p>

   2.属性选择器

   <strong title="Cascading Style Sheets">CSS</strong>

   strong[title] {border-bottom: 1px dotted #999;}

   strong[title]:hover {cursor:help;background:#ccc}

   20.8 代码注释与结构

   /*body styles*/

   body {

   Font-size:67.5%;

   }

   1.添加结构性注释

   /*---------------------------------------------------

   Version: 1.1

   Author: andy budd

   Email:info@andybudd.com

   Website:http:www.andybudd.com

   -----------------------------------------------------*/

   2.自我提示

   /*

   Use the star selector hack to give IE a different font size

   http://www.info.co.ph

   */

   布局结构：使用有意义的标记。

   表格成了一种布局工具而不是显示数据的方式,人们使用块引用(blockquote)来添加空白而不是表示引用.Web很快就失去了意义,成了字体和表格标签的大杂烩.而现在我们可以使用DIV+CSS来控制布局.