CSS-派生选择器一个学习记录
CSS 后代选择器
来源： CSS 后代选择器
1.在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。
选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。
2.有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深
CSS 子元素选择器
来源：CSS 子元素选择器
使用大于号（子结合符）。只选择某个元素的子元素，而不是任意层次的子孙元素。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>
<body>
<h1>This is
<strong>very</strong>
<strong>very</strong>
important.
</h1>
<h1>This is
<em>really
<strong>very</strong>
</em>
important.
</h1>
</body>
</html>
h1 > strong {color:red;} 效果：
CSS 相邻兄弟选择器
来源： CSS 相邻兄弟选择器
选择紧接在另一个元素后的元素，而且二者有相同的父元素。
使用加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<div>List item 3</div>
<li>List item 3</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
</html>
li + li {font-weight:bold;} 效果为：
扫一扫
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
