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 ...
随机推荐
- 自定义Behavior 实现Listbox自动滚动到选中项
原文:自定义Behavior 实现Listbox自动滚动到选中项 blend为我们提供方便的behavior来扩展我们的控件,写好之后就可以在blend中方便的使用了. 下面是自定义的behavior ...
- WPF图形/文字特别效果之一:交叉效果探讨(续)
原文:WPF图形/文字特别效果之一:交叉效果探讨(续) 在"WPF图形/文字特别效果之一:交叉效果探讨"(http://blog.csdn.net/johnsuna/archive ...
- 关于hibernate组件配置
建立关系数据模型的一个重要原则是在不会导致数据冗余的前提下,尽可能减少数据库表的数目及表之间的外键参照关系.以员工信息为例,员工信息中有员工的家庭地址信息,如果把地址信息单独放在一张表中,然后建立员工 ...
- postgresql && .net core 使用空间数据
这里主要讲遇到的一些报错 增删改查 && 计算部分基本和sql server的空间数据操作一毛一样,感谢微软大大的倾情支持,直接看demo即可(-￣▽￣)- 前往sql server ...
- WCF Rest用法
GET GET单参数 服务器 [OperationContract] string GetOneParameter(string value); [WebInvoke(Method = "G ...
- 查看安卓APK源码破解
原文:查看安卓APK源码破解 工具准备: <1>.android4me的AXMLPrinter2工具 <2>dex2jar <3>jd-gui 工具下载:http: ...
- 在 Excel 中如何使用宏示例删除列表中的重复项
概要:在 Microsoft Excel 中,可以创建宏来删除列表中的重复项.也可以创建宏来比较两个列表,并删除第二个列表中那些也出现在第一个(主)列表中的项目.如果您想将两个列表合并在一起,或者如果 ...
- 【转】Powerdesigner逆向工程从sql server数据库生成pdm
第一步:打开"控制面板"中的"管理工具" 第二步:点击"管理工具"然后双击"数据源(odbc)" 第三步:打开之后,点击 ...
- Win8 Metro(C#)数字图像处理--2.49Zhang二值图像细化算法
原文:Win8 Metro(C#)数字图像处理--2.49Zhang二值图像细化算法 [函数名称] 二值图像细化算法 WriteableBitmap ThinningProcess ...
- Win8Metro(C#)数字图像处理--2.11图像锐化
原文:Win8Metro(C#)数字图像处理--2.11图像锐化 [函数名称] 图像锐化函数SharpeningProcess(WriteableBitmap src,double sharpe ...