[笔记]CSS 权威手册

1 选择器

1.1 属性选择器

子串匹配属性选择器

类型 描述
[foo^="bar"] 选择 foo 属性值以"bar" 开头 的属性
[foo$="bar"] 选择 foo 属性值以"bar" 结尾 的属性
[foo*="bar"] 选择 foo 属性值中包含字串"bar"的所有元素

1.2 后代选择器

ul ol ul em { color: gray; }

> 在一个无序列表中的一个有序列表的一个无序列表的强调部分设置为灰色。

> 无序 -> 有序 -> 无序 -> 强调

1.3 选择子元素

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>选择子元素</title>
<style>
h1 > strong {color: red;}
</style>

</head>
<body>
<h1>This is <strong>very</strong> important.</h1> <!-- very 红色 -->
<h1>This is <em>really <strong>very</strong></em> important.</h1> <!-- very 不是红色 -->
</body>
</html>

1.4 选择相邻兄弟元素

用一个结合符只能选择两个相邻兄弟中的第二个元素。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>选择相邻兄弟元素</title>
<style>
li+li { font-weight: bold; }
</style>

</head>
<body>
<ol>
<li>1</li>
<li>2</li> <!-- 加粗 -->
<li>3</li> <!-- 加粗 -->
</ol>
</body>
</html>

CSS 要求两个元素按“源顺序”出现。

1.5 伪类和伪元素

伪类的实质: 把某种幻像类关联到与伪类相关的元素。

伪类的顺序:link-visited-focus-hover-active

1.5.1 选择第一个子元素

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>选择第一个子元素</title>
<style>
p:first-child { font-weight: bold; }
li:first-child { text-transform: uppercase; }
</style>

</head>
<body>
<div>
<p>These are the necessary steps:</p> <!-- bold -->
<ul>
<li>Insert key</li> <!-- uppercase -->
<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>
</html>

1.6 伪元素选择器

所有伪元素都必须放在出现该伪元素的选择器后面。

选择器 说明
first-letter 首字母
first-line 第一行
before 设置之前 h2:before {content: "}}"; color: silver;
after 设置之后 body:after {content: " The End."; }

Date: <2016-03-23 Wed 20:39>

Author: cowlog

Created: 2016-03-23 Wed 21:31

Emacs 24.5.1 (Org mode 8.2.10)

Validate