CSS选择器1

cover-image

####一、基本选择器

选择器 含义
* 通配选择器（universal selector)，匹配所有元素
E 元素选择器，匹配所有使用E标签的元素
.info 类选择器，匹配所有class为info类的元素
#header ID选择器，匹配id为header的元素
####二、多元素组合选择器
选择器 含义
E, F 多元素选择器，同时匹配所有E元素或F元素
E F 后代选择器，匹配所有E元素后代的F元素
E > F 子元素选择器，匹配E元素的所有子元素F
E + F 相邻兄弟元素选择器，匹配所有紧跟E元素之后的同级元素F
E ~ F 同级元素选择器，匹配任何在E元素之后的同级元素F（无论直接相邻与否）

####实例 #####后代选择器（E F）VS 子元素选择器（E > F） html:

<p>This is <strong> very</strong> important.</p>
<p>This is <em>really <strong>very</strong></em> important</p>

CSS：

  1. 后代选择器（E F）：
p strong {
	color: red;
}

效果：

  1. 子元素选择器（E > F）
p &gt; strong {
	color: red;
}

效果：

#####相邻兄弟元素选择器（E + F）VS 同级元素选择器（E ~ F）

html

<div>
    <p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>

CSS: 1.相邻元素选择器

div + p {
	color: red;
}

效果：

2.同级元素选择器

div ~ p {
	color: red;
}

效果：