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

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

一、后代选择器

　　说起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)”的样式，就可以用：

button.selected{...}

     这是我在博客园写下的第一篇博文，XD。完毕。

转载于:https://www.cnblogs.com/wuyq/p/5734043.html