CSS选择器

1.为文档添加样式的三种方法

a.行内样式

b.嵌入样式

c.链接样式

在head标签插入如下代码引入外部样式表:

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

d.@import指令

@import url(css/style.css)

@import指令必须出现在样式表中其他样式之前，否则@import引用的样式不会被加载。

2.上下文选择符(后代组合式选择符)

格式：标签1 标签2 {声明}

实例：article p {font-weight:bold;}

Tip:上下文选择符以空格作为分隔符，而分组选择符则以逗号作为分隔符。

3.特殊的上下文选择符

3.1 子选择符 >

格式：标签1 > 标签2

实例：section > h2 {font-style:italic;}

说明：标签2必须是标签1的子元素，或者反过来说，标签1必须是标签2的父元素。与常规的上下文选择符不同，这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素。

3.2 紧邻同胞选择符 +

格式：标签1 + 标签2

实例：h2 + p {font-variant:small-caps;}

说明：标签2必须紧跟在其他同胞标签1的后面。

3.3 一般通报选择符~

格式：标签1 ~ 标签2

实例：h2 ~ a {color:red;}

说明：标签2必须跟(不一定紧跟)在其他同胞标签1后面。

3.4 通用选择符 *

格式：* {...}

实例：* {color：green}

说明：会导致所有元素(的文本和边框)都变成绿色。

实例1: p * {color:red;} //p包含的所有元素文本变成红色。

实例2：section * a {font-size:1.3em;} //构成非子选择符。即任何section孙子元素，而非子元素的a标签都会被选中。

4. ID和类选择符

4.1 类属性

4.1.1 类选择符

格式：.类名

实例：.specialtext{font-style:italic;}

4.1.2 标签带类选择符

格式：标签名.类名

实例：p.speicaltext{color:red;}

4.1.3 多类选择符

格式：.类名.类名

实例：.specialtext.featured{font-size:120%};

说明：两个类名之间没有空格，选择的是同时具有这两个类名的那个元素。如果加了空格，就变成了“祖先/后代”关系的上下选择符。

4.2 ID属性

格式：#ID名 或 标签名#ID名

实例：#specialtext {CSS 样式声明}或者 p#specialtext {CSS 样式声明}