1、元素选择器
最常见的 CSS 选择器莫过于元素选择器,换言之,HTML 文档中的元素是最基本的选择器
body {color:black;}
h1 {color:gray;}
p {color:white;}
2、继承
根据 CSS 规则,子元素将会继承最高级元素所拥有的属性。例如,如果在 body 元素中定义了样式,那么在它的子元素中,如 <h1>、<p>,也会拥有相同的样式,如果想要改变子元素的样式,则需要重新定义子元素的样式以覆盖继承的样式
3、选择器分组
现在考虑这样一个问题,假如我们需要让所有的标题都变成蓝色,那么我们可以像下面这样定义样式表:
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
虽然这样的定义清晰易懂,但是也未免过于繁琐,所以我们可以将其合并写成下面的形式
h1,h2,h3,h4,h5,h6 {color: green;}
这称为选择器分组,可以把享有相同声明的元素放在一起,从而使得所有的定义清晰简洁
4、声明分组
既然我们可以对选择器进行分组,那么也同样可以对声明进行分组
还是考虑这样一个问题,假如我们需要让段落背景颜色为黑色,字体颜色为白色,一个简单声明如下:
p {background:black;}
p {color:blue;}
这样可以吗?当然可以,但是当声明增多时,也同样过于繁琐了,所以我们可以将同一个元素的声明合并在一起,此时要注意不同属性之间需要使用分号( ; )分隔
p {
background:black;
color:blue;
}
5、后代选择器
后代选择器可以帮助我们选择某元素的所有后代元素,其语法规则如下(注意和选择器分组的区别):
tag1 tag2 {
property: value;
...
}
上面语法可以理解为只对 tag1 中的后代元素 tag2 起作用,而对一般的 tag2 不起作用,例如,下面语法定义为在 <p> 元素中的 <em> 元素变成蓝色,而对一般的 <em> 元素不起作用
p em {
color: blue;
}
一个使用了上面 CSS 规则的 HTML 代码如下:
<h1>我是标题,<em>没有变成蓝色</em></h1>
<p>我是段落,<em>变成蓝色</em></p>
6、子元素选择器
与后代选择器相比,子元素选择器可以帮助我们缩小范围,只某一元素的子元素起作用,而非后代元素,其语法规则如下:
tag1 > tag2 {
property: value;
...
}
上面语法可以理解为只对 tag1 中的子元素 tag2 起作用,而对其它的 tag2 不起作用,例如,下面语法定义为 <p> 元素中的子元素 <strong> 变成红色,而其它 <strong> 元素不受影响
p > strong {
color:red;
}
一个使用了上面 CSS 规则的 HTML 代码如下:
<p>
这是段落,<strong>变成红色</strong>
这是段落,<em>这是强调,<strong>没有变成红色</strong></em>
</p>
7、相邻兄弟选择器
如果需要选择紧接在另一个元素之后的元素,而且二者有相同的父元素,那么可以使用相邻兄弟选择器,其语法规则如下:
tag1 + tag2 {
property: value;
...
}
上面语法可以理解为只对紧接在 tag1 中的 tag2 元素起作用,而对其它的 tag2 不起作用,例如,下面语法定义为紧接 <h1> 元素中的 <p> 变成绿色,而其它的 <p> 元素不受影响
h1 + p {
color:green;
}
一个使用了上面 CSS 规则的 HTML 代码如下:
<h1>这是一个标题</h1>
<p>这是一个段落,变成绿色</p>
<p>这是一个段落,没有变成绿色</p>
8、类选择器
类选择器允许以一种独立于文档元素的方式指定样式,但是只有在 HTML 文档中指定类名称后,才可以在 CSS 中使用类选择器,例如
<h1 class="important">这是一个标题</h1>
<p class="important">这是一个段落</p>
然后我们可以在 CSS 中使用类选择器给不同命名的元素指定不同的样式,其语法规定需要在类名前加上一个点号( . ),然后配合通配选择器( * )使用,但是也可以省略通配选择器,它们效果是一样的
*.important {font-style:italic;}
/* 这样,上面的 HTML 代码中 <h1> 元素和 <p> 元素中的内容都会变成斜体 */
当然,我们也可以结合元素选择器使用,给规定了类名的特定元素指定样式
p.important {font-style:italic;}
/* 这样,<h1> 元素中的内容不会变成斜体,而 <p> 元素中的内容将会变成斜体 */
如果有一个元素定义了多个类名又该怎么处理呢?
<h1 class="important">这是一个标题</h1>
<p class="important warning">这是一个段落</p>
没关系,只需要使用连续的点号和类名即可匹配,但是要注意此时仅可选择同时包含这些类名的元素
*.important.warning {font-style:italic;}
/* 这样,<h1> 元素中的内容不会变成斜体,而 <p> 元素中的内容将会变成斜体 */
9、ID 选择器
同样的,ID 选择器也允许以一种独立于文档元素的方式来指定样式,相比于类选择器有以下区别:
- 在 HTML 中指定 ID 时,不能重复使用,也就是说一个 ID 只能使用一次
- 在 CSS 中选择元素时,ID 选择器需要将在类选择器中使用的点号( . )替换成井号( # )
- 在 CSS 中选择元素时,不能使用 ID 词列表,因为 ID 属性不允许有以空格分隔的词列表
例如,在 HTML 文档中定义 ID 如下:
<p id="important">这是一个段落</p>
那么,可以在 CSS 中定义该元素样式如下:
p#important {font-weight:bold;}
10、属性选择器
属性选择器允许根据元素的属性和属性值来选择元素,其基本语法如下:
tag[attribute1="value"][...] {
property: value;
...
}
其中,value 可以指定,也可以省略,省略时表示选择带有 attribute 属性的 tag 标签,指定时表示选择带有 attribute 属性且其值为 value 的 tag 标签
a[href] {color:red;}
注意,上面使用 = 是表示完全匹配,即值必须完全一致时才匹配成功,此外还有其它匹配方法
- ~=:匹配属性值中包含指定词汇的元素
- |=:匹配属性值中包含以指定词汇开头的元素
- ^=:匹配属性值以指定值开头的每个元素
- $=:匹配属性值以指定值结尾的每个元素
- *=:匹配属性值中包含指定值的每个元素
11、伪类
伪类可以向某些选择器添加特殊的效果,常用于配合 CSS 类使用,基本语法如下:
selector.class:pseudo-class {
property: value;
...
}
常见的伪类有:
伪类 | 描述 |
---|---|
hover | 当鼠标悬浮在元素上方时,向该元素添加样式 |
actice | 当元素被激活时,向其添加样式 |
link | 向未被访问的链接添加样式 |
visited | 向已被访问的链接添加样式 |
first-child | 向元素的第一个子元素添加样式 |
lang | 向带有指定 lang 属性的元素添加样式 |
一个例子如下:
a:link {color: red} /* 未访问的链接显示红色 */
a:visited {color: green} /* 已访问的链接显示绿色 */
a:hover {color: blue} /* 鼠标移动到链接上显示蓝色 */
a:active {color: yellow} /* 选定的链接显示黄色 */
注意 :在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,a:active 必须被置于 a:hover 之后
12、伪元素
同样的,伪元素也可以向某些选择器设置特殊的效果,其基本语法如下:
selector.class:pseudo-element {
property: value;
...
}
常见的伪元素有:
伪元素 | 描述 |
---|---|
first-letter | 向文本的第一个字母添加特殊样式 |
first-line | 向文本的第一个行添加特殊样式 |
before | 在元素之前添加特殊样式 |
after | 在元素之后添加特殊样式 |
一个例子如下:
p:first-letter {font-size: xx-large;}
注意 :first-letter 伪元素只适用于块级元素