前端学习-CSS选择符1

CSS选择符1

元素选择符(Element Selectors)

1. 通配选择符*

通配选择符可以匹配所有的元素对象.

语法:

* {
  property: value;
}

IE6及之前的不支持通配选择符

栗子:

* {
  color: red;
}

2. 类型选择符

类型选择符匹配的是HTML中的元素,比如P,H1等.

语法:

E {
  property: value;
}

栗子:

p {
  color: red;
}

<p>123</p>

3. ID选择符

以唯一标识符id属性的值作为选择符.

语法:

#id {
  property: value;
}

栗子:

#a {
  color: red;
}

<p id="a">123</p>

id是唯一的

4. class选择符

以class属性的值作为选择符,class值可以为多个,用空格隔开.

语法:

.value {
  property: value;
}

栗子:

.a {
  color: red;
}

.b {
  font-size: 10px;
}
<p class="a b">123</p>

或者使用多类选择符:

.a.b {
  color: red;
}

IE6及之前的不支持多类选择符

关系选择符(Ralationship Selectors)

1. 包含选择符

选择被E元素包含的F元素.E F

语法:

E F {
	property: value;
}

栗子:

div p {
  color: red;
}

<div>
	<p>123</p>
	<p>
		<span>123</span>
		<span>123</span>
	<p>
</div>

这里的span元素也会更改

2. 子选择符

选择E元素下的子元素F,E>F

语法:

E>F {
	property: value;
}

栗子:

div>p {
  color: red;
}
<div>
	<p>111</p>
	<p>
		<span>123</span>
		<span>123</span>
	<p>
</div>

这里只有p标签111的生效

3. 相邻选择符

选择E元素相邻之后的F元素(同级), E+F

语法:

E+F {
	property: value;
}

栗子:

div+p {
  color: red;
}

<div>111</div>
<p>123</p>
<p>123</p>
<div>222</div>
<p>123</p>
<p>123</p>

4. 兄弟选择符

选择E元素后面的所有F元素(同级),E~F

语法:

E~F {
	property: value;
}

栗子:

div~p {
  color: red;
}

<div>
	<p>
    111
  </p>
  <div>
    222
  </div>
  <p>
    333
  </p>
</div>