前端之关系选择器
关系选择器可以根据 元素与元素之间所处关系 来选择元素。
关系选择器一说选择符。
后代选择器（空格）
可以选择第一个元素的任意后代。
语法：
<style>
父元素 子元素 孙元素 ……{
声明;
}
</style>
<style>
/* 标题——后代选择器 */
/* -------------------------------------------------- */
body h1{
text-align: center;
color: #00FFFF;
text-shadow: 3px 3px 1px black;
}
</style>
<body>
<h1>关系选择器</h1>
<small>关系选择器可以根据 元素与元素之间所处关系 来选择元素。</small>
<hr>
<article>
<h2>绘梨衣语录</h2>
<section>
<p>作为一名《龙族》爱好者，要说那一段最令我感触最深，那一定是因为路明非的迟到，从而失去上杉绘梨衣的那一段。路明非失去了那个将世界分给了他一半的女孩的时候，我真是久久不能平静，憋屈和难受不足以形容，当时想打作者的心都有了。</p>
<ul>
<li>
<a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">想要……一个好朋友。</a>
</li>
<li>
<a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">我会很乖。</a>
</li>
<li>
<a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">世界很温柔。</a>
</li>
<li>
<a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">世界很温柔。</a>
</li>
<li>
<a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">外面的世界好大！</a>
</li>
<li>
<a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">我很喜欢这样的世界······但世界不喜欢我。</a>
</li>
</ul>
<p>没关系的，跟Sakura在外面到处玩，很开心，所以我能坚持下来。这是我一生里最自由的时间，以前没有过，以后也不会有。</p>
<p>
我无所谓喜不喜欢，既然Sakura不喜欢，那就杀掉好了。</p>
<p>
我们都是小怪兽，有一天会被正义的奥特曼杀死！</p>
<p>
······Sakura······Sakura······Sakura！</p>
<ol>
<li>
“04.24，和Sakura去东京天空树，世界上最暖和的地方在天空树的顶上。”
</li>
<li>
“04.26，和Sakura去明治神宫，有人在那里举办婚礼。”
</li>
<li>
“04.25，和Sakura去迪士尼，鬼屋很可怕，但是有Sakura在，所以不可怕。”
</li>
</ol>
<p>
和sakura去东京天空树，世界上最暖和的地方在天空树顶上。</p>
<p>
“Sakura最好了。”</p>
</section>
</article>
</body>
子代关系选择器（大于号）
只能选择第一个元素的子代元素。
语法：
<style>
父元素 > 子元素{
声明；
}
</style>
<style>
/* 文章标题 —— 后代选择器 */
/* -------------------------------------------------- */
article>h2{
font-style:italic;
border-bottom: 1px solid black;
}
</style>
article标签内的所有h2元素都会加上斜体、黑色下边框。
邻接兄弟（加号）
选择紧随其后后的元素。
语法：
<style>
/* 有序列表——邻接兄弟
-------------------------------------------------- */
p + ol {
color: hotpink;
}
</style>
通用兄弟（波浪线）
不用紧随其后，但是前面的不会受影响。
语法：
<style>
/* div之后的section字体变大变粗 —— 通用兄弟选择器
--------------------------------------------------*/
div~section {
font-size: 1.2em;
font-weight: bold;
}
</style>
<body>
<h1>关系选择器</h1>
<small>关系选择器可以根据 元素与元素之间所处关系 来选择元素。</small>
<hr>
<article>
<h2>绘梨衣语录</h2>
<section>
<section>
<p>作为一名《龙族》爱好者，要说那一段最令我感触最深，那一定是因为路明非的迟到，从而失去上杉绘梨衣的那一段。路明非失去了那个将世界分给了他一半的女孩的时候，我真是久久不能平静，憋屈和难受不足以形容，当时想打作者的心都有了。</p>
</section>
<ul>
<li> <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">想要……一个好朋友。</a> </li>
<li> <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">我会很乖。</a> </li>
<li> <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">世界很温柔。</a> </li>
<li> <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">世界很温柔。</a> </li>
<li> <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">外面的世界好大！</a> </li>
<li> <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">我很喜欢这样的世界······但世界不喜欢我。</a> </li>
</ul>
<div>
<p>没关系的，跟Sakura在外面到处玩，很开心，所以我能坚持下来。这是我一生里最自由的时间，以前没有过，以后也不会有。</p>
<p> 我无所谓喜不喜欢，既然Sakura不喜欢，那就杀掉好了。</p>
<p> 我们都是小怪兽，有一天会被正义的奥特曼杀死！</p>
<p> ······Sakura······Sakura······Sakura！</p>
</div>
<ol>
<li>“ 04.24，和Sakura去东京天空树，世界上最暖和的地方在天空树的顶上。” </li>
<li> “04.26，和Sakura去明治神宫，有人在那里举办婚礼。” </li>
<li> “04.25，和Sakura去迪士尼，鬼屋很可怕，但是有Sakura在，所以不可怕。” </li>
</ol>
<section>
<p> 和sakura去东京天空树，世界上最暖和的地方在天空树顶上。</p>
<p> “Sakura最好了。”</p>
</section>
</section>
</article>
</body>
选择器的小试牛刀
去掉表格table的间隙
<style>
table {
border-collapse: collapse;
}
</style>
下一节：前端之盒模型
701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
