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

一、后代选择器

　　说起CSS的后代选择器。它属于派生选择器中的一种，两者附属关系如下：

-->派生选择器

 ----CSS 后代选择器

 

 ----CSS 子元素选择器

 ----CSS 相邻兄弟选择器

　　那么问题来了，什么时候需要用到后代选择器嘞？假设你需要为p元素中的span元素（.A类）设置特殊样式，可以用后代选择器选择该元素：

<span style="color: #800000;">/*方式1*/<br>p span</span>{<span style="color: #ff0000;">...</span>}<br>/*方式2*/<br>p .A{...}

     注意，上述代码的两个选择器间以空格空格空格分隔。另外，后代选择器使用起来灰常自由。这么说吧，上述例子中p元素不一定必须是span的老爸，只要是span的直系长辈比如爷爷都可以。换句话说，在p元素包含span元素的情况下，后代选择器就可以发挥作用了。

 

二、多类选择器

　　接下来，来说说多类选择器。举个例子：

<span style="color: #800000;">.funny</span>{<span style="color: #ff0000;">...</span>}<span style="color: #800000;">
.handsome</span>{<span style="color: #ff0000;">...</span>}<span style="color: #800000;">
.funny.handsome</span>{<span style="color: #ff0000;">...</span>}

     注意，上述代码的两个选择器间没有没有没有空格分隔。好的，现在有.funny和.handsome这两个类，显然“我是个有趣并且帅的boy，两者缺一都不是我”是一个真命题，所以只有“.funny.handsome”这个多类选择器才可以选择我。但是单独的“.funny”不能选择我，原因见前文提到的真命题，“.handsome”选择器同理。

     好吧不闹了，多类选择器的用处挺多的，比如要设置“1、被点击(.selected)；2、按钮的样式”，就可以用：

<span style="color: #800000;">button.selected</span>{<span style="color: #ff0000;">...</span>}

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