当前位置:Gxlcms > html代码 > CSS之后代选择器与多类选择器

CSS之后代选择器与多类选择器

时间:2021-07-01 10:21:17 帮助过:41人阅读

<新人报到,欢迎拍砖#- ->

一、后代选择器

  说起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。完毕。

人气教程排行