css樣式表的繼承、後代選擇器與子選擇器的區別、相鄰選擇器
阿新 • • 發佈：2018-12-26
一、css的繼承
-在style中設定div的顏色為紅色，<p>、<h1>、<h2>不設定任何樣式
<style type="text/css"> div{ color: red; } </style> <body> <div> 我是第一層div <p>我是段落 <h1>我是一級標題 <h2>我是二級標題</h2> </h1> </p> </div> </body>
-結果<p>、<h1>、<h2>繼承了div的樣式，顏色都變成紅色
-最為常見的可繼承屬性有 color、font-size、font-style等非常多的屬性
-注意並非所有屬性都可繼承
二、後代選擇器
-寫一段 style 樣式，設定ul的em元素為紅色
<style type="text/css"> ul em{ color:red; } </style> <body> <ul> <li><em>被選擇了</em> <ol> <li><em>被選擇了</em> <ol> <li> <em>被選擇了</em> </li> </ol> </li> </li> </ol> </li> </ul> </body>
-ul和ol的區別在其符號的不同，可通過type屬性更改符號
-ul元素與後代元素em之間的層次間隔可以無限
-任意後代em元素都被設為紅色
三、子選擇器【>】
-style樣式設定子元素的顏色為綠色，字型大小為20畫素
<style type="text/css"> h1>em{ color: green; font-size:20px; } </style> <body> <h1> <em>我是第一個em</em> <p><em>我是第二個em</em></p> <h2><em>我是第三個em</em></h2> </h1> </body>
-觀察效果圖，第一個子元素em被選中，第二第三個em元素都沒有選中
-父元素與子元素之間有層次間隔會破壞子選擇器的作用效果
四、相鄰選擇器【+】
-相鄰選擇器語法規則：相鄰兄弟選擇器使用了加號（+）
<style type="text/css">
li+li{
font-weight:bold;
}
</style>
<body>
<div>
<ul>
<li>List item1</li>
<li>List item2</li>
<li>List item3</li>
</ul>
<ol>
<li>List item1</li>
<li>List item2</li>
<li>List item3</li>
</ol>
</div>-效果圖如下：item1的兄弟是item2，item2的兄弟是iem3，item2與item3都被選中
-再看看w3School上的demo，以下內容出自W3School
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {color:red}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
相鄰兄弟結合符還可以結合其他結合符：
html > body table + ul {margin-top:20px;}
這個選擇器解釋為：選擇緊接在 table 元素後出現的所有兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素。