CSS 选择器
1、CSS 元素选择器
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
<style type="text/css">
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落。</p>
2、CSS 选择器分组
<style type="text/css">
/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}
</style>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<p>这是一段<b>普通</b>的段落文本。</p>
</body>
通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
例如，下面的规则可以使文档中的每个元素都为红色：
<style type="text/css">
* {color:red;}
</style>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<p>这是一段<b>普通</b>的段落文本。</p>
</body>
3、CSS 类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
<style type="text/css">
p.important {color:red;}
h1.important {color:blue;}
</style>
<body>
<h1 class="important">This heading is very important.</h1>
<p class="important">This paragraph is very important.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
4、CSS ID 选择器
ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
类选择器和ID选择器的区别
- 区别 1：只能在文档中使用一次
与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。 - 区别 2：不能使用 ID 词列表
不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。 - 区别 3：ID 能包含更多含义
类似于类，可以独立于元素来选择 ID。
5、CSS 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
[title]
{
color:red;
}
a[href]
{
color:red;
}
6、CSS 后代选择器
注：两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
7、CSS 子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。
<style type="text/css">
h1 > strong {color:red;}
</style>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
8、CSS 相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
html > body table + ul {margin-top:20px;}
这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
用一个结合符只能选择两个相邻兄弟中的第二个元素。
li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
9、CSS伪类
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
CSS - :first - child伪类选择元素的第一个子元素
<style type="text/css">
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
</style>
<body>
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
</body>
作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。
- 例子 1 - 匹配第一个 < p > 元素
<head>
<style type="text/css">
p:first-child {
color: red;
}
</style>
<body>
<p>some text</p>
<p>some text</p>
</body>
- 例子 2 - 匹配所有 < p > 元素中的第一个 < i > 元素
<style type="text/css">
p > i:first-child {
font-weight:bold;
}
</style>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
- 例子 3 - 匹配所有作为第一个子元素的 < p > 元素中的所有 < i > 元素
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
CSS - :lang 伪类使你有能力为不同的语言定义特殊的规则
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
</body>
10、CSS 伪元素
CSS 伪元素用于向某些选择器设置特殊效果。
伪元素的语法：
selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用：
selector.class:pseudo-element {property:value;}
:first-line 伪元素用于向文本的首行设置特殊样式。只能用于块级元素。
下面的属性可应用于 "first-line" 伪元素：
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
<style>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
<body>
<p>this is a demo</p>
</body>
:first-letter 伪元素用于向文本的首字母设置特殊样式。用于块级元素。
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
<body>
<p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式：</p>
</body>
注意： 下面的属性可应用于 "first-letter" 伪元素：
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
网友评论