<!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>