html的后代选择器,html5怎么使用后代选择器？html选择后代的两种方式详解！

在项目开发的过程中，同一个文档中可能会用到很多相同的标签，也有可能用到很多相同的类名，这就导致 html 在开发中选择器不好使用的问题，如果全部使用 id 选择器又不符合语义化的效果。这时候，我们就可以使用后代选择器了。接下来就让小编来告诉你，html5 中怎么使用后代选择器吧。

首先，html 中有两种可以选择后代的选择器，一种是子元素选择器，一种是后代选择器，两种选择器在选择方式上有所区别，以下图的文档结构为例，我们来介绍一下这两种选择器。

后代选择器

使用方式：/*后代选择器可以使用具有父子关系的元素进行选择(最少两个)，另外，每个子元素可以用标签方式表达，也可以用类名，id，伪类等表达*/

element1 element2 element3{

样式；

}

注：后代选择器实际上是由多个选择器组合而成，选择器之间以空格隔开。

只要一个元素是另一个元素的子元素(子元素的子元素也可以)。

以上图为例，要选择li元素，可以使用如下方式：/*简写为,content ul li{}也可*/

.content .model ul li{

样式：

}

子元素选择器

使用方式/*子元素选择器使用具有直接父子关系的元素进行选择(最少两个)，另外，每个子元素可以用标签方式表达，也可以用类名，id，伪类等表达*/

element1>element2>element3{

样式；

}

注：子元素选择器实际上也是由多个选择器组合而成，选择器之间以>隔开。

子元素选择器要求相邻两个元素之间具有直接父子关系(也就是不能使用子元素的子元素)，以后代选择器的案例为例，可以使用 .content>.model>ul>li 选择，也可以使用 .model>ul>li 进行选择，但是不能使用 .content>ul>li 进行选择。

小结

有些教程喜欢把后代选择器成为派生选择器或者父子选择器，喜欢把子元素选择器称为直接子元素选择器。但他们都能选择后代，只不过子元素选择器比后代选择器更加精准(但是项目中使用后代选择器的情况更多一些)。这两种选择器都是 html5 与 css3 都支持的(也就只有这两种选择器可以选择后代)。以上就是 html 使用后代选择器的全部介绍，学习 HTML，就上W3Cschool!

html的后代选择器,html5怎么使用后代选择器？html选择后代的两种方式详解！相关推荐

html5链接access数据库,JDBC连接Access数据库的几种方式详解
前几天老师让作几个JSP连接数据库的例子,而且连接的数据库是Access数据库,对于这个数据库自己也不是太了解,后来了解到学习JDBC的时候,连接access是很方便的,很容易的,但是在连接的时候也出 ...
js获取日期选择器值html,利用Query+bootstrap和js两种方式实现日期选择器
前言所谓日期选择是在下拉列表中选择年.月.日,年显示前后的五年,12个月,日就是有30.31.29.28天的区别,随着月份的变而变,本文介绍了利用Query+bootstrap和js实现日期选择器的 ...
html5渐变的两种方式,HTML5的渐变色渐变的两种类型 createLinearGradient 和createRadialGradient...
今天又再看了html5的颜色渐变API,发现没有第一次看那么复杂. 不过我对这个颜色渐变存在着一个疑惑就是两种色带之间,那段是属于两种颜色混合的,有点模糊. 比如从红色变成黄色,在红与黄之间的那个地方 ...
在Scrapy中如何利用Xpath选择器从HTML中提取目标信息（两种方式）
点击上方"Python爬虫与数据挖掘",进行关注回复"书籍"即可获赠Python从入门到进阶共10本电子书今日鸡汤坚定,严谨,勤奋,开拓前一阵子我 ...
html5生日福利页面,福利到！HTML5实现动画两种方式
该楼层疑似违规已被系统折叠隐藏此楼查看此楼正在学习或者自学html5的小伙伴,是不是有的已经让video动画整疯掉了呢?哈哈!下面华清远见的小编就为大家两种实现方式!好好学习哦! (1) canv ...
react 调用 html5,React-Native Webview 和H5交互的两种方式
React-Native WebView 和H5交互有两种方式: 方式1:RN Webview 向H5注入JS 此方式可作为Webview向H5端传递数据. RN Webview 有以下属性,可以注入 ...
荒岛求生html5母狼攻,荒岛求生各资源作用及获取方法详解
荒岛求生各资源作用及获取方法详解 2018-03-06 13:45:22来源:游戏下载编辑:野狐禅评论(0) 荒岛求生地图中有很多资源可以获取,它们各有什么作用呢?下面就为大家带来荒岛求生资源作用及获 ...
数学难题html5小游戏答案,高中五星级题库数学答案及难题详解（第5版）.pdf
. 一函数 1 1.集合与常用逻辑用语 1 2.函数的概念与性质 3 3.指数函数与对数函数 11 4.函数的综合问题 17 5.导数的概念与应用 29 . 二三角函数 52 1.任意角的三角函数 ...
Vue+element ui 表格中时间选择器范围控制(两种方式)
1.页面 <el-table v-loading="loading" :data="tableList" border> <!-- 方法1 - ...

html的后代选择器,html5怎么使用后代选择器？html选择后代的两种方式详解！

html的后代选择器,html5怎么使用后代选择器？html选择后代的两种方式详解！相关推荐

最新文章

热门文章