CSS後代選擇器、子元素選擇器、相鄰兄弟選擇器區別與詳解

時間 2019-12-19

標籤 css 後代選擇器元素相鄰兄弟區別詳解欄目 CSS 简体版

原文原文鏈接

派生選擇器用的不少，派生選擇器具體包括爲後代選擇器、子元素選擇器、相鄰兄弟選擇器，咱們來理解一下他們之間的具體用法與區別。css

一、css後代選擇器
語法：h1 em {color:red;} 表示的是從h1開始裏面包含的全部的em元素變成紅色，h1爲祖先，其餘的em都是後代，即選中後代，無論是兒子仍是孫子，只要是都會被選中，爲後代選擇器。
例如html

<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}
</style>
</head>

<body>
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>

運行結果：spa

即，不管你在哪裏，我都要選中你，由於你是個人後代。3d

二、css子元素選擇器
語法：h1>em{color:red;} 表示的是從h1開始裏面的第一層em元素變成紅色，h1爲祖先，em爲兒子，就像世襲制同樣，只能傳給兒子，孫子和其餘堂親都不行，例如code

<style type="text/css">
h1 > strong {color:red;}
</style>

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

運行結果：htm

只有第一個h1會變色。blog

三、相鄰兄弟選擇器
語法：h1 + p {margin-top:50px;} 表示是「選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素」這是官方的說法，理解的誤區在於這個加號，h1和p並非同時被選中的，而是選擇的是h1緊跟着後面的p元素，是遞進的關係，例如：it

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {color:red;}
</style>
</head>

<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</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>