HTML5培训_CSS基础之后代选择器和子元素选择器.docxVIP

CSS-后代选择器和子元素选择器 讲师：李南江 后代选择器 !DOCTYPE html html lang=en head meta charset=UTF-8 title12-后代选择器/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 title13-子元素选择器/title style /* divp{ color: red; } */ /* #identityp{ color: blue; } */ divullip{ color: purple; } /style /head body !-- 1.什么是子元素选择器? 作用: 找到指定标签中所有特定的直接子元素, 然后设置属性 格式: 标签名称1标签名称2{ 属性:值; } 先找到所有名称叫做标签名称1的标签, 然后在这个标签中查找所有直接子元素名称叫做标签名称2的元素 注意点: 1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签 2.子元素选择器之间需要用符号连接, 并且不能有空格 3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器 4.子元素选择器可以通过符号一直延续下去 -- !--divullip-- p我是段落/p div id=identity p我是段落/p p我是段落/p ul lip我是段落/p/li /ul /div p我是段落/p /body /html 后代选择器和子元素选择器 !DOCTYPE html html lang=en head meta charset=UTF-8 title14-后代选择器和子元素选择器/title /head body !-- 1.后代选择器和子元素选择器之间的区别? 1.1 后代选择器使用空格作为连接符号 子元素选择器使用作为连接符号 1.2 后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会