CSS 元素选择器
元素选择器又称为类型选择器(type selector)。
例: html {color:black;} h1 {color:blue;} h2 {color:silver;} CSS 元素选择器(类型选择器)也可以设置 XML 文档中元素的样式: 案例:CSS设置XML中的文档样式选择器分组
假设希望 h2 元素和段落都有灰色。为达到这个目的,最容易的做法是使用以下声明:
h2, p {color:gray;}声明分组
我们可以将声明分组在一起:h1 {font: 28px Verdana; color: white; background: black;}
注意,对声明分组,一定要在各个声明的最后使用分号,这很重要。通配符选择器
CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。例如,下面的规则可以使文档中的每个元素都为红色:
* {color:red;}
它能使文档中所有元素的 color 属性值指定为 red。
CSS 类选择器
在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作。
为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。<h1 class="important"> This heading is very important. </h1> <p class="important"> This paragraph is very important. </p>
结合元素选择器
类选择器可以结合元素选择器来使用。
例如,您可能希望只有段落显示为红色文本:
p.important {color:red;}CSS 多类选择器
在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。
例如:<p class="important warning"> This paragraph is a very important warning. </p>
词语无顺序关系。
那么多类的效果是什么样的呢?
看这个例子:亲自试一试
这个我是不会用它的,不好用,容易出现冲突。CSS ID 选择器
ID 选择器前面有一个 # 号请看下面的规则:
*#intro {font-weight:bold;}与类选择器一样,ID 选择器中可以忽略通配选择器。前面的例子也可以写作:
#intro {font-weight:bold;}
与类不同,在一个 HTML 文档中,一个 ID 选择器只会使用一次。
不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。
请注意,类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。
HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。CSS 属性选择器
CSS 2 引入了属性选择器。
属性选择器可以根据元素的属性及属性值来选择元素。
简单属性选择
如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。
如果您希望把包含标题(title)的所有元素变为红色,可以写作:
[title] {color:red;}还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。
例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:
a[href][title] {color:red;}注:HTML 标签可以拥有属性。如标签 <a> href,标签 <table> 的 border,标签<img>的 alt等。为 XML 文档使用属性选择器
假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素,使之显示为红色,以便能更关注有 moons 的行星,就可以这样写:
planet[moons] {color:red;}根据具体属性值选择
除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。
使用方法和 简单属性选择器 一样,也同样适用于XML。
属性与属性值必须完全匹配
如果属性值包含用空格分隔的值列表,匹配就可能出问题。
那么可以用下面的方法:
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。
假设您想选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点:
p[class~="important"] {color: red;}部分值选择器等价于我们在类选择器中讨论过的点号类名记法。
也就是说,p.important 和 p["important"] 应用到 HTML 文档时是等价的。
但是 部分值选择器 能用于任何属性,而不只是 class,而类选择器就不能用于普通标签的 属性。
更高级的选择器模块:
子串匹配属性选择器
下表是对这些选择器的简单总结:
类型 | 描述 |
---|---|
[abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 |
[abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 |
[abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 |
有点像数据库中的模糊查询。
提示:任何属性都可以使用这些选择器。
最后介绍:
特定属性选择类型
*[lang|="en"] {color: red;}这种属性选择器最常见的用途还是匹配语言值。上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。
因此,以下示例中的前三个元素将被选中,而不会选择后两个元素:
<p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p>
最后对 属性选择器 的用法做一个总结:
选择器 | 描述 |
---|---|
[attribute] | 用于选取带有指定属性的元素。 |
[attribute=value] | 用于选取带有指定属性和值的元素。 |
[attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
[attribute|=value] | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
[attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
CSS 后代选择器
举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:
h1 em {color:red;}上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中。
有关后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的。
例如,如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。
因此,ul em 将会选择以下标记中的所有 em 元素:
<ul> <li>List item 1 <ol> <li>List item 1-1</li> <li>List item 1-2</li> <li>List item 1-3 <ol> <li>List item 1-3-1</li> <li>List item <em>1-3-2</em></li> <li>List item 1-3-3</li> </ol> </li> <li>List item 1-4</li> </ol> </li> <li>List item 2</li> <li>List item 3</li> </ul>CSS 子元素选择器
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>CSS 相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
实例;相邻兄弟选择器
但是,如果在 h1 标签与 其后的 p 标签中间添加一个 其他标签 如 h2呢,相邻兄弟选择器 将会失效。
更多的关于相邻兄弟选择器的语法,见W3cschool:相邻兄弟选择器CSS 伪类 (Pseudo-classes)
锚伪类
链接的不同状态:a:link
{color: #FF0000} /* 未访问的链接 */a:visited
{color: #00FF00} /* 已访问的链接 */a:hover
{color: #FF00FF} /* 鼠标移动到链接上 */a:active
{color: #0000FF} /* 选定的链接 */提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类名称对大小写不敏感。
伪类可以与 CSS 类配合使用:
a假如上面的例子中的链接被访问过,那么它将显示为红色。.red
: visited {color: #FF0000} <a class="red
" href="css_syntax.asp">CSS Syntax</a>
伪类
W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。
属性 | 描述 | CSS |
---|---|---|
:active | 向被激活的元素添加样式。 | 1 |
:focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式。 | 1 |
:link | 向未被访问的链接添加样式。 | 1 |
:visited | 向已被访问的链接添加样式。 | 1 |
:first-child | 向元素的第一个子元素添加样式。 | 2 |
:lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
CSS 伪元素 (Pseudo-elements)
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
实例
p:first-line { color:#ff0000; font-variant:small-caps; }
注释:"first-line" 伪元素只能用于块级元素。
:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式:
p:first-letter { color:#ff0000; font-size:xx-large; }
注释:"first-letter" 伪元素只能用于块级元素。
伪元素和 CSS 类
伪元素可以与 CSS 类配合使用:
p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
也结合多个伪元素来使用:
p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; }
CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1> 元素前面插入一幅图片:
h1:before { content:url(logo.gif); }
CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片:
h1:after { content:url(logo.gif); }