元素选择器
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
CSS分组
将 h2 和 p 选择器放在规则左边,然后用逗号分隔,就定义了一个规则。其右边的样式(color:gray;)将应用到这两个选择器所引用的元素。逗号告诉浏览器,规则中包含两个不同的选择器。如果没有这个逗号,那么规则的含义将完全不同。参见后代选择器。
可以将任意多个选择器分组在一起,对此没有任何限制
h2, p {color:gray;}
通配符选择
CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。
* {color:red;}
类选择器详解
类选择器允许以一种独立于文档元素的方式来指定样式。
CSS类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用,也可以与其他元素结合使
在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作。
为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。
结合元素选择器
p.important {color:red;}
多类选择器
一个 class 值中可能包含一个词列表,各个词之间用空格分隔.
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
-------
<p class="important warning">
This paragraph is a very important warning.
</p>
ID选择器详解
ID 选择器允许以一种独立于文档元素的方式来指定样式。
ID 选择器
语法:首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
*#intro {font-weight:bold;}
#intro {font-weight:bold;}
----
<p id="intro">This is a paragraph of introduction.</p>
- 只能在文档中使用一次
- 不能使用 ID 词列表
- ID 能包含更多含义
- 区分大小写
属性选择器
CSS 2 引入了属性选择器。
属性选择器可以根据元素的属性及属性值来选择元素。
*[title]{color:red;}
a[href]{color:red;}
a[href][title]{color:red;}
img[alt]{border:5px solid red;}
根据具体属性值选择
除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
属性与属性值必须完全匹配
<p class="important warning">This paragraph is a very important warning.</p>
p[class="important warning"] {color: red;}
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。
p[class~="important"] {color: red;}
类型 | 描述 |
---|---|
[abc^=”def”] | 选择 abc 属性值以 “def” 开头的所有元素 |
[abc$=”def”] | 选择 abc 属性值以 “def” 结尾的所有元素 |
[abc*=”def”] | 选择 abc 属性值中包含子串 “def” 的所有元素 |
后代选择器
后代选择器(descendant selector)又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
h1 em {color:red;}
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
语法解释
在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”,但是要求必须从右向左读选择器。
因此,h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器,可以换成以下说法:“包含 em 的所有 h1 会把以下样式应用到该 em”。
具体应用
div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}
子元素选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
选择子元素
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。
例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:
h1 > strong {color:red;}
语法解释
子选择器使用了大于号(子结合符)。子结合符两边可以有空白符,这是可选的
结合后代选择器和子选择器
table.company td > p
上面的选择器会选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性。
相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
选择相邻兄弟
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
语法解释
相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。
注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。
用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:
li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
结合其他选择器
相邻兄弟结合符还可以结合其他结合符:
html > body table + ul {margin-top:20px;}
这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。
伪类(Pseudo-classes)
伪类实例
a:hover
input:focus
:first-child
:lang
语法
selector : pseudo-class {property: value}
搭配CSS类使用
selector.class : pseudo-class {property: value}
伪类与CSS类
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
first-child
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素(在 HTML 中,这肯定是 ol 或 ul 元素)第一个子元素的所有 li 元素变成大写。
匹配第一个p元素
<html>
<head>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head>
<body>
<p>some text</p>
<p>some text</p>
</body>
</html>
* 匹配所有 p 元素中的第一个 i 元素*
<html>
<head>
<style type="text/css">
p > i:first-child {
font-weight:bold;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
匹配所有作为第一个子元素的 p 元素中的所有 i 元素
<head>
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
CSS2 - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中,:lang 类为属性值为 no 的 q 元素定义引号的类型:
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>
伪元素
CSS 伪元素用于向某些选择器设置特殊效果
语法
selector:pseudo-element {property:value;}
配合CSS类使用
selector.class:pseudo-element {property:value;}
:first-line
“first-line” 伪元素用于向文本的首行设置特殊样式。
first-line” 伪元素只能用于块级元素。
:first-letter
“first-letter” 伪元素用于向文本的首字母设置特殊样式:
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
伪元素和 CSS 类
伪元素可以与 CSS 类配合使用:
p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>
多重伪元素
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
:before伪元素
“:before” 伪元素可以在元素的内容前面插入新内容。
h1:before
{
content:url(logo.gif);
}
:after
“:after” 伪元素可以在元素的内容之后插入新内容。
h1:after
{
content:url(logo.gif);
}