CSS选择器

    1. CSS的基本组成

    CSS由选择器和声明组成，这里的选择器一般指的是你需要改变样式的HTML元素，每一条声明都是由键值对组成的，即属性和对应的值。

 

h1 {color:red; font-size:14px;}

p {font-family: "sans serif";}

    可以看到一个选择器可以包含一条或多条声明，它们之间用分号隔开；对于属性值有若干单词的要添加引号。

    2. 选择器的分组

    前面已经看到了CSS是由选择器和声明这样的模式存在的，但是有时候，希望多个选择器都有相同的声明，这样就出现了选择器分组的概念。

 

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

    3. 选择器的继承

    子元素从父元素中继承属性。

 

body {
     font-family: Verdana, sans-serif;
     }

    4. 派生选择器

    这是一种比较特殊的选择器，它是根据元素在其上下文的关系来定义样式的。也许你会希望在你的列表中，所有的strong变成斜体字，那么就可以使用派生选择器。

 

li strong {
    font-style: italic;
    font-weight: normal;
  }

    这样这段代码只会影响在li中的strong元素，不会对所有的strong产生影响。

    <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

    <ol>

<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>

<li>我是正常的字体。</li>

</ol>

    5. id选择器

    显然这又是一种相对于普通的选择器相对特殊的选择器，这种选择器可以为标有特定id的html元素指定特定的样式。这种选择器以#来定义。

 

#red {color:red;}
#green {color:green;}

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

    6. id选择器和派生选择器的综合运用

    在现代布局中，id选择器常用来建立派生选择器。注：id 属性只能在每个 HTML 文档中出现一次

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

 

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

   上面这样的样式，只会出现在id为sidebar的段落和标题内，当然需要注意的是在一个html文档中，某个元素可能是div,也可能是span, 一旦它的属性中的id被标记被sidebar. 那么这个文档中，再也不能出现其它的标签有相同的id.

    7. 类选择器

    类选择器以.号开头。

 

.center {text-align: center}

    在Html文档中，所有拥有center类的Html元素都是居中显示的。

 

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

.fancy td {
	color: #f60;
	background: #666;
	}

    和id选择器一样，类选择器也可以做派生选择器。在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）。