一、子元素選擇器 1.定義:找到指定標簽中所有特定的直接子元素,然後設置屬性 2.格式: 3.釋義:先找到叫做“標簽名稱1”的標簽,然後在這個標簽中查找所有直接子元素名稱叫做“標簽名稱2”的元素 : (1)子元素選擇器智慧查找兒子,不會查找孫子,重孫子等等 (2)子元素選擇器之間需要用“>”符號相連 ...
一、子元素選擇器
1.定義:找到指定標簽中所有特定的直接子元素,然後設置屬性
2.格式:
標簽名稱一>標簽名稱2{
屬性:值;
}
3.釋義:先找到叫做“標簽名稱1”的標簽,然後在這個標簽中查找所有直接子元素名稱叫做“標簽名稱2”的元素
div>p{ color:red; } .......省略代碼....... <div> <p>我是段落一</p> <p>我是段落2</p> <p>我是段落3</p> <ul> <li><p>我是段珞4</p></li> </ul> </div>
4.註意
:
(1)子元素選擇器智慧查找兒子,不會查找孫子,重孫子等等
(2)子元素選擇器之間需要用“>”符號相連接,而且不能有空格。
(3)子元素選擇器不僅僅可以用標簽名稱,還可以用其他選擇器。如:用id選擇器或者classa選擇器。
#id1>p{ color:green; } .......省略代碼....... <div id="id1"> <p>我是帶id的那個測試</p> </div>
(4)子元素選擇器可以用>符號一致延續下去。例如:
div>ul>li>p{ color:blue; } .......省略代碼....... <div> <ul> <li><p>我是段珞4</p></li> </ul> </div>
二、後代選擇器與子元素選擇期的區別和相同點以及企業開發中如何選擇
1.二者區別
(1)
後代選擇器使用空格作為連接符號
子元素選擇器使用>作為連接符號
(2)後代選擇器會選中指定標簽,所有的特定後代標簽,也就是選中兒子/孫子...,只要是被放到指定標簽中的特定標簽都會選中(即不嚴格後代)
子元素標簽只會選中特定標簽中,所有的特定的直接標簽,也就是只會選中特定的兒子標簽(嚴格後代)
2.二者的共同點
(1)都可以使用標簽名稱,id名稱,class名稱
(2)都可以通過各自的連接符號一致延續下去
3.適用場景
通過不同點就可以看出來了,或者他們的定義
三、交集選擇器
1.定義:給所有選擇器選中的標簽中,相交的那部分標簽設置屬性
2.格式:
選擇器1選擇器2{
屬性:值;
}
3.註意點:
(1)選擇器和選擇器之間沒有任何連接符號
(2)選擇器可以使用標簽名稱/id名稱/class名稱
<style> p.abc1{ color:red; } .abc2#open1{ color: blue; } </style> </head> <body> <p class="abc2" id="open1">測試1</p> <p class="abc1">測試2</p> <p class="abc3">測試3</p> </body>
(3)企業開發中很少使用,只做瞭解,用其他選擇器足以完成,不要這麼複雜的結構。
四、源碼:
d72_subelement_selector
d74_intersection_selecotr
地址:
https://github.com/ruigege66/HTML_learning/tree/master
2.CSDN:https://blog.csdn.net/weixin_44630050(心悅君兮君不知-睿)
3.博客園:https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號:傅里葉變換,後臺回覆“禮包”獲取Java大數據學習視頻禮包