7.2 CSS选择器

CSS规则的语法形式为：

CSS选择器{CSS属性：值；CSS属性：值；…CSS属性：值；}

CSS选择器可以是html标签：

div{width:960px; } p{font-size:16px; text-align:center; } ul{list-style-type:none; }

如果想为多个元素应用同一个样式，可以将应用相同样式的多个选择器用逗号隔开，一起作为CSS规则的选择器（这时的选择器成为分组选择器）：

h2, p { color:gray; }

将h2和p放在规则的左边，并用逗号隔开，这样就定义了一个规则，其右边的样式（color:gray;）将应用到h2和p中。CSS2引用了通配选择器“*”，可以与任何元素匹配，从而使通配选择器中定义的样式可以应用到所有HTML标签中，如将网页所有元素的内外边距设置为0，同时清除所有元素的边框线：

* { margin:0px; padding:0px; border:0px; }

由于*会匹配所有的元素，从而影响网页渲染的时间，在实际的网页设计中将需要统一设置的元素使用分组选择器一次性设置：

a, b, big, body, caption, center, del, , div, em, form, h1, h2, h3, h4, h5， h6, header, hr, html, i, img, li, p, pre, section, small, span, strike, strong， sub, sup, table, tbody, td, tfoot, th, thead, tr, ul { margin:0px; padding:0px; border:0px; }

CSS选择器也可以是CSS类：

.warning { font-size:16px; background-color:#ddd; }

要将此类应用到HTML标签，需要指定该标签的“class”属性为CSS类名：

在定义CSS类时，可以指定该类作用的HTML标签，如定义上面的CSS类“.warning”样式只能应用于<p>，在类名前加上HTML标签名p：

p.warning { font-size:16px; background-color:#ddd; }

若同时将该类应用于<p>和其他元素如<span>：

则<p>会应用warning类中的样式，而<span>不会应用warning类中的样式。HTML标签中“class”属性还可以指定多个类的名字，类名之间用空格分隔，这样可以将多个类的样式应用到同一个HTML元素。如有类的定义：

.urgent{ border:1px solid; } .warning { font-size:16px; background-color:#ddd; }

可以将上述定义的两个类都应用于HTML元素中，如：

<div class="warning urgent"> 多类选择器 </div>

需要注意的是，在IE7之前的版本中，不同平台的Internet Explorer都不能正确地处理多类选择器。

ID选择器的定义以“#”开头，后面跟ID选择器名字，名字由用户定义：

#first-para{text-indent:32px; }

将ID选择器应用到HTML元素：

<p id="first-para">id选择器可以为标有特定id的HTML元素指定特定的样式。</p>

ID选择器与类选择器不同的是id属性只能在每个HTML文档中出现一次，而类选择器可以出现多次。

以标签选择器、类选择器和ID选择器为基础，还可以构造出其他选择器。

（1）后代选择器。后代选择器是将多个选择器用空格隔开，选择器后面定义的样式，只对嵌套在前面HTML元素中的后面的HTML元素生效，下面的代码定义了一个后代选择器：

h1 em {color:red; }

上面CSS代码定义的样式只应用于<h1>中的<em>标签，对没有嵌套在<h1>中的<em>标签不生效，如下面的HTML代码：

<h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p>

<h1>中的<em>标签中的文字颜色为红色，<p>中的<em>标签中的文字颜色不是红色。下面再给出两个后代选择器的定义，对于不理解的CSS属性，可以暂时不理会。

.menu .container { height: 65px; overflow: visible ! important; } .menu .logo { width: 148px; height: 50px; position: absolute; top: 10px; left: 0px; }

后代选择器在网页设计中较常见，例7-3以购物网站的商品名为例演示怎样在网页设计中使用后代选择器。

例7-3 7-3.html

<! DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>华为mate9（MHA-AL00）4GB+64GB香槟金华为（HUAWEI）手机</title> <style type="text/css"> body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6， hr, input, legend, li, ol, p, td, textarea, th, ul { margin: 0; padding: 0; } body { position:relative; background-color:#fff; font:12px/1.5 Arial, SimSun; } a, body { color: #666; } .proinfo-title { padding: 13px 20px 12px 10px; background: #fff; } .proinfo-title h1 { font-size: 16px; line-height:24px; font-family:"微软雅黑", "Microsoft YaHe"; color: #222; _margin-left: -3px; word-break: break-all; } .proinfo-title h1 span.zy { background-color: #f50; } .proinfo-title h1 span { float: left; min-width: 42px; padding: 0 1px; height: 20px; margin: 2px 5px 0 0; _margin-top: 4px; font-size: 12px; font-weight: 400; text-align: center; color: #fff; line-height: 20px; vertical-align: middle; } .proinfo-title h2 { font-size:14px; line-height:18px; font-family:"微软雅黑", "Microsoft YaHe"; color: #666; margin-top: 3px; _margin-left: -3px; word-break: break-all; } </style> </head> <body > <div style="width:500px"> <div class="proinfo-title"> <h1 id="itemDisplayName"> <span class="zy" id="itemNameZy">自营</span> 华为mate9（MHA-AL00）4GB+64GB香槟金</h1> <h2 id="promotionDesc" style="display: block; ">官网价售完即止！年度重量级新旗舰，徕卡双摄像头，4000毫安大电池。    </h2> <a name="item_db_01_pro" class="enter-compare" style= "display: none; " href="javascript:; ">+对比</a> </div> </div> </body> </html>

例7-3在浏览器中的显示效果如图7-4所示。

图7-4 例7-3在浏览器中的显示效果

对于本例中没有学习过的CSS属性，读者可以自行上网查阅了解其含义，也可以暂时不去理会，主要对照HTML和CSS理解清楚哪条规则设置了哪个HTML元素的样式。

（2）选择子元素。使用子结合符（>）可以选择一个元素的子元素（不是后代元素），如：

h1 > strong {color:red; }

这个规则将把下面HTML代码的第一个<h1>中的<strong>变成红色，但第二个<strong>不受影响：

<h1>This is <strong>very</strong>import! </h1> <h1>This is <em>really<strong>very</strong></em>import! </h1>

（3）选择相邻兄弟元素。使用子结合符（+）可以选择紧接在一个元素后的元素，这两个元素有相同的父元素，如：

h1 + p{color:red; }

这个规则将把紧接在<h1>元素后面的<p>标签设置为红色。例7-4演示了怎么选择相邻兄弟元素。

例7-4 7-4.html

<! DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>选择相邻兄弟元素</title> <style type="text/css"> h1+ p { background-color:green; } </style> </head> <body > <h1>詹姆斯称圈内仅3好友：甜瓜、韦德和保罗</h1> <p> 詹姆斯、保罗、韦德、安东尼都是联盟中的顶级巨星，四人场下也有着非常好的关系，很多人都称他们是“风尘四侠”，或者是“香蕉船兄弟”。 </p> <p> 近日，当媒体问及韦德，是否期待“风尘四侠”联手在一支球队效力时，韦德回应称，“这是你想要看到的事情，他们都是你最好的朋友，谁不想和自己最好的朋友们在一起打球呢？” </p> </body> </html>

例7-4在浏览器中的显示效果如图7-5所示。