The CSS selectors (Explanation of Symbols)

First, the space (offspring)

• Writing

.class1 .class2{
  ...
}

• effect

All elements within the container containing the selected action of class2 class1

• Examples

<style>
.class1 .class2{
  background-color:#f00;
}
</style>

<div class="class1">
	<p class="class2">第一行</p>
 	<p>第二行</p>
 	<div>
     	<p class="class2">第三行</p>
 	</div>
</div>
<p class="class2">外面的行</p>

The effect is: the first row and the third row is a red background

Greater than> (progeny)

• Writing

.class1 > .class2{
  ...
}

• effect

Select the parent element is class1, class2 child element to element

• Examples

<style>
.class_1 > .class_2{
  background-color:#f00;
}
</style>

<div class="class_1">
	<p class="class_2">第一行</p>
 	<p class="class_2">第二行</p>
	<div>
   		<p class="class_2">第三行</p>
	</div>
</div>
<p class="class_2">外面的行</p>

• Effect: only the first and second rows red background

Third, the plus sign + (close to the brothers)

• Writing

.class1 + .class2{
  ...
}

• effect

Select class1 class2 siblings element immediately

• Examples

<style>
.class1 + .class2{
  background-color:#f00;
}
</style>

<div class="class1">
	<p class="class2">第一行</p>
 	<p class="class2">第二行</p>
	<div>
   		<p class="class2">第三行</p>
	</div>
</div>
<p class="class2">外面的行1</p>
<p class="class2">外面的行2</p>

• Effect: Only 外面的行1displayed in red

Fourth, a tilde (Brother)

• Writing

.class1 ~ .class2{
  ...
}

• effect

All class1 class2 siblings After selecting the elements

• Examples

<style>
.class1 ~ .class2{
  background-color:#f00;
}
</style>

<div class="class1">
	<p class="class2">第一行</p>
 	<p class="class2">第二行</p>
	<div>
   		<p class="class2">第三行</p>
	</div>
</div>
<p class="class2">外面的行1</p>
<div>
   <p class="class2">外面的行2</p>
</div>
<p class="class2">外面的行3</p>

• Effect: There 外面的行1and 外面的行3displayed in red

Fifth, unsigned (mainly for tagged union)

• Writing

 标签div/p.class2{
  ...
}

• effect

Tag element, and corresponds to the "and" relationship, all class2 select the corresponding label;

• Examples

<style>
  p.class2{
  background-color:#f00;
}
</style>

<div class="class2">
	<p class="class2">第一行</p>
 	<p>第二行</p>
 	<div>
     	<p class="class1.class2">第三行</p>
 	</div>
</div>
<p class="class2">外面的行</p>

The effect is: Only 第一行and 外面的行red background

Sixth, the comma (Normal ruled character, selecting a plurality of elements)

• Writing

 .class1 , .class2{
  ...
}

• effect

Equivalent to two statements the same values ​​of class selectors, as class1 and class2 effect, no relationship between father and his sons

• Examples

<style>
  .class1 , .class2{
  background-color:#f00;
}
</style>

<div>
	<p class="class2">第一行</p>
 	<p>第二行</p>
 	<div>
     	<p class="class1">第三行</p>
 	</div>
</div>
<p class="class2">外面的行</p>

The effect is: Only 第一行and 外面的行red background