<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代選擇器</title>
<style>
/*
div p{
color: red;
}
*/
/*
#identity p{
color: red;
}
*/
/*
.para p{
color: blue;
}
*/
/*
#identity #iii{
color: skyblue;
}
*/
/*
#identity .ccc{
color: purple;
}
*/
div ul li p{
color: red;
}
</style>
</head>
<body>
<!--
1.什么是后代選擇器?
作用: 找到指定標簽的所有特定的后代標簽, 設置屬性
格式:
標簽名稱1 標簽名稱2{
屬性:值;
}
先找到所有名稱叫做"標簽名稱1"的標簽, 然后再在這個標簽下面去查找所有名稱叫做"標簽名稱2"的標簽, 然后在設置屬性
div p{}
注意點:
1.后代選擇器必須用空格隔開
2.后代不僅僅是兒子, 也包括孫子/重孫子, 只要最終是放到指定標簽中的都是后代
3.后代選擇器不僅僅可以使用標簽名稱, 還可以使用其它選擇器
4.后代選擇器可以通過空格一直延續下去
-->
<!--div ul li p-->
<p>我是段落</p>
<div id="identity" class="para">
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>
<!--<p id="iii" class="ccc">我是段落</p>-->
<p>我是段落</p>
</li>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
<p>我是段落</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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.子元素選擇器可以通過>符號一直延續下去
-->
<!--div>ul>li>p-->
<p>我是段落</p>
<div id="identity">
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li><p>我是段落</p></li>
</ul>
</div>
<p>我是段落</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代選擇器和子元素選擇器</title>
</head>
<body>
<!--
1.后代選擇器和子元素選擇器之間的區別?
1.1
后代選擇器使用空格作為連接符號
子元素選擇器使用>作為連接符號
1.2
后代選擇器會選中指定標簽中, 所有的特定后代標簽, 也就是會選中兒子/孫子..., 只要是被放到指定標簽中的特定標簽都會被選中
子元素選擇器只會選中指定標簽中, 所有的特定的直接標簽, 也就是只會選中特定的兒子標簽
2.后代選擇器和子元素選擇器之間的共同點
2.1
后代選擇器和子元素選擇器都可以使用標簽名稱/id名稱/class名稱來作為選擇器
2.2
后代選擇器和子元素選擇器都可以通過各自的連接符號一直延續下去
選擇器1>選擇器2>選擇器3>選擇器4{}
3.在企業開發中如何選擇
如果想選中指定標簽中的所有特定的標簽, 那么就使用后代選擇器
如果只想選中指定標簽中的所有特定兒子標簽, 那么就使用子元素選擇器
-->
</body>
</html>
