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;
}

效果: