CSS样式中‘包含选择符’有什么作用？

html-css011

CSS样式中‘包含选择符’有什么作用？,第1张

包含选择符又叫后代选择符，就是说只有被指定的元素所包含（或者说是指定的元素的后代）的子元素才会被选中。比如：

<style>

div span {color:red} /*让包含在div中的span显示为红色*/

</style>

<span>这个不是红色，因为它没有包含在div内</span>

<div><span>这个是红色，因为它包含在div内</span></div>

<h1><span>这个不是红色，因为它没有包含在div内</span></h1>

<div><p><span>这个是红色，因为它包含在div内</span></p></div>

因为低版本IE浏览器的存在（不支持部分选择器），所以能用到的并不多。

常用的有：

标签选择器：p{...}（可以是任何标签，这里拿p标签举例）

id选择器：#id{...}

类选择器：.class{...}

父子选择器：.class p{...} 或者 #id .class p{...}（等等）

还有许多选择器器，你可以百度“CSS选择器”来看看详细的解释。

[attribute~=value] 选择器用于选取属性值中包含指定词汇的元素。

所有主流浏览器都支持 [attribute~=value] 选择器。

对于 IE8 及更早版本的浏览器中的 [attribute~=value]，必须声明 <!DOCTYPE>。

CSS3 兄弟选择符(E~F)

语法：

E~F{ sRules }

说明：

选择E元素后面的所有兄弟元素F。