课时71.后代选择器(掌握)

1.什么是后代选择器?

作用:找到指定标签的所有后代标签,设置属性。

首先你要明确什么是后代?

你的儿子,孙子,重孙子等,只要有你的血脉的,都是你的后代。

我们先来举个例子

我们想让div中的标签变红

1.用标签选择器可以做吗?

不可以,它会选中页面上的所有p,包括div以外的

2.用id选择器可以做吗?

可以,可以给div中的两个p设置id,然后通过id选择器给这两个p设置颜色

3.用class选择器可以做吗?

可以,分别给它们设置class,然后设置颜色

但是无论是用id,class选择器都有一个弊端,就是如果一个界面,div中有成千上万个p怎么办?难道你要一个个的去设置?这样工作量就比较大了,所以要用到一个后代选择器。

格式:

标签名称1 标签名称2{
         属性:值;

}

先找到标签名称叫做标签名称1的标签,然后再在这个标签下面去查找所有名称叫做标签名称2的标签,然后再设置属性

div p{}

注意点:

1.后代选择器必须用空格隔开

2.后代不仅仅是儿子,也包括孙子/重孙子,只要最终是放到指定标签中的都是后代

3.后代选择器不仅仅可以使用标签名称,还可以使用其它选择器

1.将id名称与标签名称结合使用

    

2.将类名称与标签名称结合使用

   

3.将id名称与id名称结合使用

    

4.将id名称与类名称结合使用

  

我们在这里需要补充一点:后代选择器可以无限的往下延伸

  

有一个空格代表是一个后代

div  ul代表先找到div,从div中找到所有名字叫做ul的后代,只有一个名字叫做ul的,然后再来个空格,代表着从ul中去找到名称叫做li的后代,那我们这里有几个li的后代呢?我们可以找到两个,后面又有了空格,代表着从li里面去找p的后代,先找到li里面叫做p的后代,找到了,就设置颜色,而第二个里面没有名字叫做p的后代,就没有找到,没有找到就什么都不做,而如果第二段li中也有p,那么就会有两个p变颜色。

 

本文转载于:猿2048➞https://www.mk2048.com/blog/blog.php?id=chjchjb&title=课时71.后代选择器(掌握)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370354.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java小球碰撞界面设计_JavaScript实现小球碰撞特效

JavaScript实现小球碰撞特效。类似自由落体运动。实现原理非常简单,就是动态的改变每个元素的坐标。使用radius属性将图片圆角化。使用left,top属性动态的改变小球的位置。碰撞反弹球,当碰撞到容器的边缘后,进行反弹,反…

es6常用基础合集

es6常用基础合集 在实际开发中,ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。 ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大。值得高兴的是,如果你熟悉ES5,学习ES6并不…

java接口开发_如果你想学好Java,这些你需要了解

01基本知识  在学习Java之前,您需要了解计算机的基本知识,然后再学习Java。同时,您需要熟悉DOS命令、Java概述、JDK环境安装配置、环境变量配置。JDK和环境变量配置完成后,就可以编写Java程序了。02编程格式  此时&#xff0c…

从Java程序生成QR码图像

如果您精通技术和小工具,则必须了解QR码。 这些天,到处都可以找到它-在博客,网站,甚至在某些公共场所。 这在移动应用程序中非常流行,在移动应用程序中,您可以使用QR Code扫描仪应用程序扫描QR Code&#x…

LintCode-最长公共子串

给出两个字符串,找到最长公共子串。并返回其长度。 您在真实的面试中是否遇到过这个题? Yes例子 给出A“ABCD”,B“CBCE”,返回 2 注意 子串的字符应该连续的出如今原字符串中,这与子序列有所不同。标签 Expand 相关…

课时67.标签选择器(掌握)

通过上节课的学习我们明白了如何通过十六进制来表示颜色 例如:红色的几种表示方法 我们发现在学习CSS当中的一些属性的时候,它都有一些套路 只要知道属性的名称,属性有什么作用,它有哪些取值,这个属性有什么注意点 …

计算几何问题 java_【转载】ACM计算几何题目推荐

2107 Quoit Design 典型最近点对问题POJ 3714 Raid 变种最近点对问题B,最小包围圆最小包围圆的算法是一种增量算法,期望是O(n)。ZOJ 1450 Minimal CircleHDU 3007 Buried memoryC,旋转卡壳POJ 3608 Bridge Acr…

jdbc连接oracle的几种格式

1. SID的方式。已经不推荐使用这种方式了。 jdbc:oracle:thin:[<user>/<password>]<host>[:<port>]:<SID> 2.Service Name的方式。 jdbc:oracle:thin:[<user>/<password>]//<host>[:<port>]/<service> 3.TNSNames…

Java 7:使用NIO.2进行文件过滤-第1部分

NIO.2是自Java 7起JDK中包含的用于I / O操作的新API。使用此新API&#xff0c;您可以执行与 java.io以及许多出色的功能&#xff0c;例如&#xff1a;访问文件元数据和监视目录更改等。 显然&#xff0c;由于向后兼容&#xff0c;java.io包不会消失&#xff0c;但是我们鼓励为…

第十三周活动进度表

学习进度表&#xff1a; 第三周内容时间周一&#xff08;4&#xff1a;10-6&#xff1a;00&#xff09;上课&#xff0c;周二晚上&#xff08;8&#xff1a;00-9&#xff1a;00&#xff09;&#xff0c;周四晚上&#xff08;8&#xff1a;00-8&#xff1a;30&#xff09;&#…

课时66.颜色控制属性下(理解)

今天来讲解十六进制控制属性的方法&#xff0c;其实用十六进制表示的方式本质就是rgb&#xff0c;只不过它们的格式不一样而已&#xff0c;十六进制中是通过每两位表示一种颜色的方式来给颜色赋值。 如 #FF0000 FF----r 00----g 00----b 修改前两位相当于修改rgb中的第一…

idea复制java_IntelliJ IDEA的剪切、复制和粘贴

IntelliJ IDEA的剪切、复制和粘贴本节内容概览&#xff1a;• 剪切、复制和粘贴的基本使用• 复制选定的文本片段• 将路径复制到文件• 将引用复制到一行或一个符号• 剪切选定的文本片段• 从剪贴板粘贴最后一个条目• 将最后一个条目从剪贴板粘贴为纯文本• 从剪贴板粘贴特定…

python方差的计算公式为什么减一_样本标准差分母为何是n-1

欢迎各位学习从0到1Python数据科学之旅&#xff0c;腾讯课堂和网易云课堂入口分别如下&#xff1a;(腾讯课堂新营业&#xff0c;报名可领取20元优惠券)微信公众号&#xff1a;pythonEducation模型和统计项目QQ&#xff1a;231469242大家好&#xff0c;今天给大家介绍标准差。标…

pxe+kickstart 自动化部署linux操作系统

kickstart 是什么&#xff1f; 批量部署Linux服务器操作系统 运行模式&#xff1a; C/S client/server 服务器上要部署&#xff1a; DHCP tftp&#xff08;非交互式文件共享&#xff09; 安装系统的三个步骤&#xff1a; 1、加载vmlinuz、 initrd (微型启动根目录&#xff0c;它…

课时57.HTML被废弃的标签(掌握)

1.为什么HTML中有一部分标签会被废弃&#xff1f; 因为当前HTML中的标签只有一个作用&#xff0c;就是用来添加语义&#xff0c;而早期的HTML标签中有一部分标签是没有语义的 有一部分标签是用来修改样式的 所以这部分标签就被淘汰了 <br><hr><font> <…

Java编码约定被认为是有害的

在Oracle网站上有Java编程语言指南的正式代码约定 。 您可能希望这份超过20页的文档将是有关Java语言的最佳实践&#xff0c;提示和技巧的最完整&#xff0c;最全面和最权威的来源。 但是一旦你开始阅读它&#xff0c;失望和愤怒就会增加。 我想指出本指南中最明显的错误&#…

flash php socket通信_php socket通信机制实例说明

php socket通信机制实例说明与代码----什么是socket 所谓socket一般也称作"套接字"&#xff0c;用于描述ip地址和端口&#xff0c;是一个通讯链的句柄。使用程序一般经过"套接字"向network发出请求也许应对network请求。说白了就是一种通讯机制。它类似于银…

python的ogr模块_python GDAL/OGR模块安装注意事项

软件准备&#xff1a;首先&#xff0c;确保电脑里已安装python2.7(2.x版本的比较好用&#xff0c;因为还使用ArcGIS)&#xff0c;然后从http://www.gisinternals.com网站上下载这两个文件GDAL-2.1.3.win32-py2.7.msi和gdal-201-1500-core.msi。软件安装&#xff1a;首先安装gda…

课时55.详情和概要标签(理解)

1.什么是详情和概要标签&#xff1f; 作用&#xff1a;利用summary标签来描述概要信息&#xff0c;利用details标签来描述详情信息 默认情况下是折叠展示&#xff0c;想看见详情必须点击 格式&#xff1a; <details> <summary>概要信息</summary> 详情信…

Spring Security可以做的十件事

一 您可以在Spring XML配置文件中指定您选择的授权提供者。 您可以通过配置Spring的http://www.springframework.org/schema/security/spring-security-3.1.xsd模式中定义的authentication-manager来实现。 简化的authentication-manager元素定义看起来像这样&#xff1a; &l…