900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 后代子元素选择器交集并集选择器 4大复合选择器的区别

后代子元素选择器交集并集选择器 4大复合选择器的区别

时间:2023-03-30 16:21:23

相关推荐

后代子元素选择器交集并集选择器 4大复合选择器的区别

①后代选择器(重点)

【空格隔开】

概念:后代选择器又叫包含选择器

为什么要用复合选择器?因为基础选择器不够强大,不能快速高效准确精细的完全页面style设置。复合选择器是两个或多个基础选择器组合而成的。

作用:用来选择元素或者元素的子孙后代

写法:把外层标签写在前面,内存标签写在后面,中间用空格分隔,先写爷爷父亲,再写儿子孙子。

语法:父级 子级 {属性:属性值;属性:属性值}

注:当标签发生嵌套时,内层标签就成了外层标签的后代标签

/*后代选择器*//* 常山 赵子龙 */.nav a {color:red;}.wang ul li {color:red;}

②并集选择器(重点)

【逗号隔开】

如果某些选择器定义的样式是相同的样式,就可以利用并集选择器。可以让代码更简洁。并集选择器(css选择器分组)是各个选择器通过连接而成的。通常用于集体申明。

任何基础选择器都能组合成并集选择器。

记忆技巧:用于集体申明,各个选择器用“,”分隔。“,”可以理解成“和”的意思。

/*并集选择器*/p,div,.my {color:red;}

③子元素选择器

【 > 隔开】

作用:只能选择某元素(亲儿子)的元素。

写法:父亲标签写在前面 + > + 儿子标签 {}

注意:子元素必须是亲儿子,不包含孙子重孙子之类的。

/*子元素选择器*/div>strong {color:red;}

④交集选择器

【.号连接】

条件:交集选择器由两个选择器组成。找到的标签必须满足:既有第一个标签的特点,又有第二个标签的特点。

记忆技巧:交集是并且的意思,即是。。。又是。。。的意思。但通常用的不多,也不建议使用。

/*交集选择器*/<p class="red">红色</p>p.red {color:red;}

/post/27.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。