html 子元素選擇器
阿新 • • 發佈：2018-12-25
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>子元素選擇器</title>
<style>
/*div>p{
color:red;
}*/
/*#identity>p{
color:blue;
}*/
div>ul>li>p{
color:purple;
}
</style>
</head>
<body>
<!--
1.什麼是子元素選擇器?
作用:找到指定標籤中所有特定的直接子元素,然後設定屬性
格式:
標籤名稱1>標籤名稱2{
屬性:值;
}
先找到名稱叫做"標籤名稱1"的標籤,然後在這個標籤中查詢所有直接子元素名稱叫做"標籤名稱2"的元素
注意點:
1.子元素選擇器只會查詢兒子,不會查詢其他被巢狀的標籤
2.子元素選擇器之間需要用>符號連線,並且不能有空格
3.子元素選擇器不僅僅可以使用標籤名稱,還可以使用其他的選擇器
4.子元素選擇器可以通過>符號一直延續下去
-->
<p>我是段落</p>
<div id="identity">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
</body>
</html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>子元素選擇器</title>
<style>
/*div>p{
color:red;
}*/
/*#identity>p{
color:blue;
}*/
div>ul>li>p{
color:purple;
}
</style>
</head>
<body>
<!--
1.什麼是子元素選擇器?
作用:找到指定標籤中所有特定的直接子元素,然後設定屬性
格式:
標籤名稱1>標籤名稱2{
屬性:值;
}
先找到名稱叫做"標籤名稱1"的標籤,然後在這個標籤中查詢所有直接子元素名稱叫做"標籤名稱2"的元素
注意點:
1.子元素選擇器只會查詢兒子,不會查詢其他被巢狀的標籤
2.子元素選擇器之間需要用>符號連線,並且不能有空格
3.子元素選擇器不僅僅可以使用標籤名稱,還可以使用其他的選擇器
4.子元素選擇器可以通過>符號一直延續下去
-->
<p>我是段落</p>
<div id="identity">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
</body>
</html>