<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>selector-context.html</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!--
派生选择器：派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。
每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
CSS 子元素选择器：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。
结合后代选择器和子选择器:table.company td > p
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
CSS 伪类用于向某些选择器添加特殊的效果。
selector:pseudo-class {property: value} 或者 selector.class:pseudo-class {property: value} 冒号两边不能有空格。
锚伪类：在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
first-child 伪类：使用 :first-child 伪类来选择元素的第一个子元素。
提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。
lang 伪类：:lang 伪类使你有能力为不同的语言定义特殊的规则。
CSS 伪元素用于向某些选择器设置特殊效果。
selector:pseudo-element {property:value;} 或者 selector.class:pseudo-element {property:value;}
:first-line 伪元素：用于向文本的首行设置特殊样式。
注释："first-line" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "first-line" 伪元素：
•font
•color
•background
•word-spacing
•letter-spacing
•text-decoration
•vertical-align
•text-transform
•line-height
•clear
:first-letter 伪元素：用于向文本的首字母设置特殊样式：
注释："first-letter" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "first-letter" 伪元素：
•font
•color
•background
•margin
•padding
•border
•text-decoration
•vertical-align (仅当 float 为 none 时)
•text-transform
•line-height
•float
•clear
:before 伪元素：可以在元素的内容前面插入新内容。
:after 伪元素：可以在元素的内容之后插入新内容。
-->
<style type="text/css">
h1 em {
color: red;
}
h2 > strong {
color: blue;
}
div.company h3 > p {
color: green;
}
li + li {
font-weight: bold;
}
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
li.firstelement:first-child {text-transform:uppercase;}
q:lang(no) {
quotes: "~" "~"
}
p.firstline:first-line {
color: #ff0000;
font-variant: small-caps
}
</style>
</head>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
<hr />
<h2>This is <strong>very</strong> <strong>very</strong> important.</h2>
<h2>This is <em>really <strong>very</strong></em> important.</h2>
<hr />
<div class="company">
<h3><p>this is a paragraph in div</p></h3>
<h3><em><p>this is a paragraph in div</p></em></h3>
</div>
<hr />
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<hr />
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
<p><b>注释：</b>提示：伪类名称对大小写不敏感。</p>
<hr />
<ul>
<li class="firstelement">Intert Key</li>
<li class="firstelement">Turn key <strong>clockwise</strong></li>
<li class="firstelement">Push accelerator</li>
</ul>
<hr />
<p>:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，在下面的例子中，:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型：</p>
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>
<hr />
<p class="firstline">
You can use the :first-line pseudo-element to add a special effect to the first line of a text!You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>
</html>
本文详细介绍了CSS中的各种选择器，包括派生选择器、后代选择器、子元素选择器、相邻兄弟选择器等，并讲解了如何使用伪类和伪元素实现特殊样式效果。
扫一扫
3446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
