CSS学习笔记（一）：选择器

以前学习过CSS的一些内容，但是没有及时总结，很多信息没有固化下来。所以重新学习一遍，并做总结。

学习资料为：http://www.w3school.com.cn/css/css_syntax.asp

一、CSS语法

1.CSS语句规则为：

选择器 {属性1：值1；属性2：值2；...}

例如：

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

2.选择器的分组：

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

3. 继承：

默认情况下，子元素将继承父元素的样式。但是可能出现浏览器不支持的情况。所以可以用冗余方法来处理继承问题。比如：

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

p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p, td, ul, ol, li, dl, dt, dd 等是body的子元素。

如果不希望某个子元素继承其父元素的属性，应该为这个子元素创建专门的规则，比如：

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

td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

二、选择器

1. 派生选择器

1.1 后代选择器：

选择器之间用空格（“  ”）表示，选择的是空格前元素的后代元素，包含所有的后代和后代的后代，但是不包含这些后代的父元素即空格前的元素。例如以下代码选择了h1下面的em元素。

h1 em {color:red;}

1.2 子元素选择器：

选择器之间用>表示，选择的是“>”前元素的子元素，不包含子元素的子元素。例如

h1 > strong {color:red;}

1.3 兄弟元素选择器：

选择器之间用+表示，选择的是+后面的元素。例如

h1 + p {margin-top:50px;}

选择紧接在 h1 元素后出现的p元素，h1 和 p 元素拥有共同的父元素。

1.4 派生选择器可以相互组合

例如以下表示：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

html > body table + ul {margin-top:20px;}

总结：选择器永远选择最靠近{的元素，其他元素只是用来定位。

2. id选择器

id选择器可以用来选择标有特定id的HTML元素的样式，选择器以#打头，例如：

 

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

 

这里的id选择器写为：

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

在HTML中一个id只能有一个。id选择器可以与派生选择器组合

 

3. 类选择器

与id选择器类似，类选择器可以用来选择标有特定class的HTML元素的样式，选择器以.打头，例如：

 

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

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

 

这里的类选择器写为：

 

.center {text-align: center}

 

类名的第一个字符不能使用数字。类选择器可以与派生选择器组合。

4. 属性选择器

选择拥有指定属性的选择器，例如下面的例子为带有 title 属性的所有元素设置样式：

 

[title]
{
color:red;
}