CSS的一点笔记 选择器 基本概念

本文所有例子均摘自 www.w3school.org

 

CSS是为了能够防止对HTML元素进行重复定义。 比如说，我们希望所有的标题都是黑色粗体， 那么只需要统一定义“黑色粗体”的类型叫做A， 然后指定所有的标题的“类型”都是A，就达到了目的。 这样代码量较小。 同时也可以统一进行修改。

 

有以下几种情况可能会导致重复定义：

 

1.  不同HTML元素具有相同的属性   比如指定图片、文字居中等。

 

2.  在不同页面中用到的某些特定的HTML 元素

 

3.  某些具有相对位置的元素。 比如 在某 DIV 下的 OL, LI 应该是怎样的

 

对于第一种情况，一般是使用类选择器， 也就是制定一类XX 元素是XX样子的。 定义方式是 .xxx

 

举例：

.center
 {text-align: center} 



<h1 class="center"
>

This heading will be center-aligned

</h1>



<p class="center"
>

This paragraph will also be center-aligned.

</p>



注意到这里 P 和 h1 是不同的元素，但是可以使用相同的类选择器
。也就是说，类选择器可以被不同的属性继承。 

第二种情况下 ，需要指定某页面中某个特定元素的形式， 比如指定logo的摆放形式的。 因为是特定元素， 因此需要用id选择器 。 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。

 

#red
 {color:red;}

<p id="red"
>这个段落是红色。</p> 

id选择器在一个文档中只能用一次。 

 

 

 

如果希望指定某些元素在特定位置时表现的情况不一样，则可以使用派生选择器 。

 

li strong
 {

    font-style: italic;

    font-weight: normal;

  }



这个例子指定了在li元素下的strong会是何种情况。 这种情况与只定义 strong{} 不同。  

=================================================

 

事实情况可能较为复杂。

 

比如说， 某种元素，比如li， 分为两类，一类是用户列表，一类是书籍列表， 这种情况下如果只用类选择器，容易与其他元素混淆。  这时的定义方式是：

td.fancy
 {

	color: #f60;

	background: #666;

	}

<td class="fancy" >     上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

 

 

比如说， 若我们希望指定标定为“a类”的所有元素的下级元素都符合某种标准， 则可以将类选择器和派生选择器结合使用， 如

.fancy td
 {

	color: #f60;

	background: #666;

	}

这个说明了，如果一个元素（比如 div， table）的类为 fancy， 那么其中的td 必须满足上述定义。

 

 

同样的，id选择器也可以和派生选择器一起用 （很烦人是不是。。。），比如说

 

#sidebar p
 {

	font-style: italic;

	text-align: right;

	margin-top: 0.5em;

	}

意思是说，如果有一个元素的id是 sidebar （不管它是div，table还是ol）， 那么它下面的p 就必须按照上面的形式。

 

id选择器一般不单独使用（老版本的IE不支持）。 解决办法是明确写明该id选择器用于何种元素， 比如

 

DIV#SIDEBAR  说明sidebar 只能用于div。

 

========================

 

整个css最复杂的就是这几个破概念，搞明白了其他就容易理解了。  是否真有必要设计这么麻烦呢？