CSS5-選擇器5-子元素選擇器
1、子元素選擇器
div>p選擇div的直接子元素p。注意與後代選擇器的對比。
2、效果演示
原始碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素選擇器</title>
<style type="text/css">
#id1>p{
color: red;
}
</style>
</head>
<body>
<div id="id1">
<div id="id2">
<div id="id3"></div>
<p>內部p元素</p>
</div>
<p>外部p元素</p>
<p>外部p2元素</p>
</div>
</body>
</html>
執行效果：
image.png
相關文章
- jQuery選擇器——子元素過濾選擇器jQuery
- jQuery子元素過濾選擇器jQuery
- CSS3新增選擇器（屬性選擇器、結構偽類選擇器、偽元素選擇器）CSSS3
- jQuery選擇器——表單元素過濾選擇器jQuery
- CSS 元素選擇器CSS
- 002---選擇器（標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器）字元
- jQuery選擇器介紹：基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- jq選擇子元素
- jQuery選擇器——基本選擇器jQuery
- 基本CSS選擇器,複合選擇器,後代選擇器CSS
- CSS選擇器（6）——偽元素CSS
- jQuery選擇器——層次選擇器jQuery
- JQuery選擇器——可見性篩選選擇器和屬性篩選選擇器jQuery
- jQuery選擇器之層次選擇器jQuery
- CSS選擇器（5）——屬性選擇器CSS
- jQuery選擇器——基本過濾選擇器jQuery
- CSS ID選擇器與CLASS選擇器CSS
- CSS E::after 偽元素選擇器CSS
- jQuery子選擇器和後代選擇器區別簡單介紹jQuery
- CSS-選擇器6-兄弟選擇器CSS
- jQuery選擇器——內容過濾選擇器jQuery
- jQuery選擇器——屬性過濾選擇器jQuery
- jQuery選擇器 標籤選擇元素+css簡單新增移除操作jQueryCSS
- css3 選擇器：屬性選擇器（五）CSSS3
- CSS-選擇器4-後代選擇器CSS
- jQuery選擇器——可見性過濾選擇器jQuery
- 使用 CSS 選擇器實現對不含 title 屬性元素的選擇CSS
- jQuery選擇器jQuery
- jQuery 選擇器jQuery
- CSS 選擇器CSS
- CSSHack 選擇器CSS
- CSS選擇器CSS
- 偽類選擇器：愛恨法則；偽元素選擇器：before，after；清除浮動
- jQuery 選擇器彙總-思維導圖-選擇器jQuery
- jQuery選擇器獲取前幾個元素jQuery
- 淺談邏輯選擇器 -- 父選擇器它來了！
- CSS :required 選擇器CSSUI
- CSS :optional 選擇器CSS