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 ...
随机推荐
- NYOJ 24 素数的距离问题
素数的距离问题 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描写叙述 如今给出你一些数.要求你写出一个程序,输出这些整数相邻近期的素数,并输出其相距长度.假设左右有等距离长 ...
- [WebGL入门]十一，着色器编译器和连接器
注意:文章翻译http://wgld.org/,原作者杉本雅広(doxas).文章中假设有我的额外说明.我会加上［lufy:］.另外.鄙人webgl研究还不够深入.一些专业词语,假设翻译有误.欢迎大家 ...
- 【UVA】11992 - Fast Matrix Operations（段树模板）
主体段树,要注意,因为有set和add操作,当慵懒的标志下推.递归优先set,后复发add,每次运行set行动add马克清0 WA了好几次是由于计算那一段的时候出问题了,可笑的是我对着模板找了一个多小 ...
- 怎么给罗技K480 增加Home、End键
最近看张大妈上很多人分享了我的桌面,有感于整天低头码字不利健康,隧鼓捣起自己的电脑桌了. 此处省略N字... 进入正文,我码字用的是罗技的K480蓝牙键盘 码了几行代码,发现没有Home.End键,这 ...
- 2019 renew 博客目录
.net && .net core Microsoft.AspNet.SignalR实现弹幕(即时通讯) C#调用JS httpclient POST请求(urlencoded) 二维 ...
- 【C++】【TinyXml】xml文件的读写功能使用——写xml文件
TinyXml工具是常用比较简单的C++中xml读写的工具 需要加载 #include "TinyXml\tinyxml.h" 在TinyXML中,根据XML的各种元素来定义了一些 ...
- SQLite 的版本问题
原文:SQLite 的版本问题 在SQLite官方网站上的下载包真可以看花眼.不同的.net版本,还有不同的平台,开发和发布时需要加以注意. 在网上搜了搜,早有人注意到了. 关于在.Net开发中使用S ...
- ajax 异步长连接遭遇堵塞，“排序执行请求”的问题解决
今天开发一个网页聊天程序,利用AJAX保持着一个长连接监听新的聊天信息,之后又调用了另外一个AJAX来发言,于是就发生了一个AJAX线程被阻塞的问题. 在未监听到新的聊天信息的之前,发言用的AJAX就 ...
- 利用WIX制作安装包(2)
原文 利用WIX制作安装包(2) 这一篇文章将为大家介绍如何使用WIX自定义UI.上一篇文章我们讲过WIX为我们提供了五种安装界面.每种安装界面都是由不同的Dialog组成.在这里我们挑选一种比较常用 ...
- c#获取电脑运行状态（cpu,内存，网络，系统运行时间）
public class DeviceMonitor { static readonly PerformanceCounter cpuCounter = new PerformanceCounter( ...