14-后代选择器和子元素选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>14-后代选择器和子元素选择器</title>

</head>

<body>

<!--

1.后代选择器和子元素选择器之间的区别?

1.1

后代选择器使用空格作为连接符号

子元素选择器使用>作为连接符号

1.2

后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中

子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

2.后代选择器和子元素选择器之间的共同点

2.1

后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器

2.2

后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去

选择器1>选择器2>选择器3>选择器4{}

3.在企业开发中如何选择

如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器

如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

-->

</body>

</html>

作为连接符号
1.2
后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中
子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

2.后代选择器和子元素选择器之间的共同点
2.1
后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
2.2
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
选择器1>选择器2>选择器3>选择器4{}

3.在企业开发中如何选择
如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

-->

H5 14-后代选择器和子元素选择器的更多相关文章

  1. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  2. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  3. CSS选择器的组合选择器之后代选择器和子元素选择器

    实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  4. CSS选择器（通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器）

    通配符选择器  *   与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B    对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...

  5. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  6. css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器

    1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...

  7. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  8. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  9. jquery子元素选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. [转载]Windows 2003 R2 SP2 VOL 企业版（简体中文）

    Windows 2003 R2 SP2 VOL 企业版(简体中文) 要是这个的话,分享个电驴的下载连接吧(可以复制后用快车和迅雷直接下)32位版CD1:SHA1值:d0dd2782e9387328eb ...

  2. Incorrect key file for table错误解决方法

    问题现象: alter table portal_app_xxxx_xxx add devno varchar(64) NOT NULL DEFAULT '' COMMENT '设备机编',add s ...

  3. 利用系统函数模拟实现nginx 系统脚本启动的特殊颜色专业效果

    利用系统函数模拟实现nginx 系统脚本启动的特殊颜色专业效果/etc/init.d/nginxd {start/stop/restart/reload}利用if语句实现: ============= ...

  4. 了解 IP 地址，默认网关，子网掩码，DNS 的概念和作用。

    DNS(Domain Name System):域名解析服务器,在 Internet 上域名与 IP 地址一一对应,域名便于人记忆,但是机器只认识 IP 地址,他们之间的转换工作称为 ‘域名解析’,域 ...

  5. shell 在终端中打开另一个终端执行命令

    gnome-terminal -x bash -c "/home/XX/cc.sh; exec bash"

  6. 谱聚类算法(Spectral Clustering)优化与扩展

    谱聚类(Spectral Clustering, SC)在前面的博文中已经详述,是一种基于图论的聚类方法,简单形象且理论基础充分,在社交网络中广泛应用.本文将讲述进一步扩展其应用场景:首先是User- ...

  7. JDBC复习1

    1.什么是JDBC JDBC是java数据库连接技术的简称(Java DataBase Connectivity) jdbc是接口,jdbc驱动才是接口的实现,负责连接各种不同的数据库.jdbc的AP ...

  8. chrome的source工具

    http://www.cnblogs.com/ys-ys/p/5597717.html http://www.cnblogs.com/strick/p/5556434.html

  9. 贪心 C - Polycarp's New Job

    Polycarp has recently got himself a new job. He now earns so much that his old wallet can't even sto ...

  10. ElasticSearch（一）：CentOS7 安装 ElasticSearch6.4.0

    一.安装jre支持 在CentOS中安装ElasticSearch需要Java1.8.0,可执行命令#  java -version查看当前系统所安装Java版本是否为1.8.0版本. 若非1.8.0 ...