CSS之后代选择器与多类选择器
程序员文章站
2022-03-28 14:03:56
...
一、后代选择器
说起CSS的后代选择器。它属于派生选择器中的一种,两者附属关系如下:
-->派生选择器
----CSS 后代选择器
----CSS 子元素选择器
----CSS 相邻兄弟选择器
那么问题来了,什么时候需要用到后代选择器嘞?假设你需要为p元素中的span元素(.A类)设置特殊样式,可以用后代选择器选择该元素:
/*方式1*/
p span{...}
/*方式2*/
p .A{...}
注意,上述代码的两个选择器间以空格空格空格分隔。另外,后代选择器使用起来灰常*。这么说吧,上述例子中p元素不一定必须是span的老爸,只要是span的直系长辈比如爷爷都可以。换句话说,在p元素包含span元素的情况下,后代选择器就可以发挥作用了。
二、多类选择器
接下来,来说说多类选择器。举个例子:
.funny{...} .handsome{...} .funny.handsome{...}
注意,上述代码的两个选择器间没有没有没有空格分隔。好的,现在有.funny和.handsome这两个类,显然“我是个有趣并且帅的boy,两者缺一都不是我”是一个真命题,所以只有“.funny.handsome”这个多类选择器才可以选择我。但是单独的“.funny”不能选择我,原因见前文提到的真命题,“.handsome”选择器同理。
好吧不闹了,多类选择器的用处挺多的,比如要设置“1、被点击(.selected);2、按钮的样式”,就可以用:
button.selected{...}
这是我在博客园写下的第一篇博文,XD。完毕。
上一篇: 有什么php开源的分销管理程序?
推荐阅读
-
css3类选择器之结合元素选择器和多类选择器用法
-
css3类选择器之结合元素选择器和多类选择器用法
-
HTML5实战与剖析之CSS选择器——querySelectorAll()
-
HTML5实战与剖析之CSS选择器——querySelector()
-
前端笔记知识点整合之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
-
HTML5实战与剖析之CSS选择器——getElementsByClassName()方法
-
CSS样式表及选择器相关内容(二)-伪类与伪元素选择器
-
CSS选择器(通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器)
-
css3之UI元素状态伪类选择器实例演示
-
python 之 前端开发(基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器)