HTML连载19-子元素选择器&交集选择器
一、子元素选择器
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大数据学习视频礼包
HTML连载19-子元素选择器&交集选择器的更多相关文章
- js进阶 10-9 -of-type型子元素伪类选择器
js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...
- css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器
高级选择器: 后代选择器 子代选择器 并集选择器 交集选择器 一.后代选择器: 使用空格表示后代选择器,父元素的后代(包括儿子,孙子,从孙子) 也就是说,box类下的所有span标签 字体颜色都被设置 ...
- jQuery选择器(子元素过滤选择器)第七节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 前端 CSS的选择器 高级选择器
高级选择器分为: 后代选择器 儿子选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器.父元素的后代(包括儿子,孙子,重孙子) 后代选择器 在CSS中使用非常频繁 因为HTML元素可以嵌 ...
- CSS3 nth-of-type(n)选择器 last-of-type选择器 nth-last-of-type(n)选择器 CSS3 only-child选择器 only-of-type选择器
CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素.当某个元素中的子元 ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
随机推荐
- WPF 透明掩码 OpactiyMask
原文:WPF 透明掩码 OpactiyMask 在WPF中提供了Opacity属性使得元素的所有内容都是透明的.而OpacityMask属性可以使元素的特定区域变成透明. OpacityMask属性接 ...
- 项目管理 BUG管理 —— 禅
眼下市场管理BUG该平台是非常,例如 QC(Quality Center) 国际顶级.功能强大但收费. Bugzilla 开源免费.功能还不错.但界面丑陋,配置繁琐. EasyBUG 在线式.无需配置 ...
- debian 下py2.7 安装mysql模块
先安装pip 然后用pip安装 setuptools 安装模块的时候会报错 python setup.py install sh: mysql_config: command not found Tr ...
- WPF中ItemsControl应用虚拟化时找到子元素的方法
原文:WPF中ItemsControl应用虚拟化时找到子元素的方法 wpf的虚拟化技术会使UI的控件只初始化看的到的子元素, 而不是所有子元素都被初始化,这样会提高UI性能. 但是我们经常会遇到一个 ...
- 【全面解禁!真正的Expression Blend实战开发技巧】十一章 全面解析布局(Grid & Canvas &StackPanel &Wrappanel)
原文:[全面解禁!真正的Expression Blend实战开发技巧]十一章 全面解析布局(Grid & Canvas &StackPanel &Wrappanel) 写这篇文 ...
- 教你干掉win10全家桶
原文: 教你干掉win10全家桶 这些并不好用的自带应用例如:groove音乐,相片,股票……一直占据着我们的默认应用.如果它们是一直静静的躺在那里还好,最多不用就是了.当我们想要浏览图片或者看视频的 ...
- LOCK_TIMEOUT
SET LOCK_TIMEOUT 1000 begin tran TranNameA select * from tablenameA WITH (updlock) where... waitfor ...
- 零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中)
原文:零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中) 我们接着进行动画MenuBar的制作 接续着上 ...
- ef 查询总结
1.Linq 查询两张表:a表和b表,要得到的数据是a表数据b表没有 例如:a表有5条数据1,2,3,4,5:b表有2条数据1,3:那么就用dataGridView1输出2,4,5:link语句要怎么 ...
- uwp汉堡菜单的实现
---恢复内容开始--- 现在uwp上面的汉堡菜单(就是那个三道杠,点击之后会出现菜单)使用的越来越普遍,比如微软自己家的Cortana.现在我使用的实现方法是使用SplitView实现.首先Spli ...