选择器（1）

css中常用选择器

1. 标签选择器

对元素进行定义样式

p  { color:red; }

2. 类选择器

class选择器可以重复使用，不同元素使用.

.setFont { font-size=18px; }

调用
<p class="setFont">这是一个段落</p>
<div class="setFont">当得糊涂！</div>

• 指定类选择器
  p.setFont { font-size:12px; }
  指定.setFont这个类选择器只在被P标签调用时的效果，而原始定义样式
  .setFont { font-size:18px; }
  则不在被p调用时生效.

3. ID选择器

注意一个页面同一id唯一使用，不可重复.

#setColor { color:blue; }

调用
<p id="setColor"> 这是一个段落 </p>

• 优先选择样式（考虑权值）设计div#box 优先级大于 #box .

4. 后代选择器

ID被某一元素调用后此元素的后代中被设置样式的元素（子、孙元素）全部应用此样式.

#setColor p{ color:red; }

调用
<div id="setColor">
     <p> 这是一个段落 </p>
     <p> 这是第二个段落 </p>
</div>

• 子选择器

div > p { font-size:18px; }

• 相邻选择器

p+span{ background-color: red; } p为兄，span为弟元素，元素相邻即可，效果总是作用于弟.

• 兄弟选择器

p ~ span{color:blue;} 设置p 后所有span为此样式.

5. 群组选择器

可一次设置多个元素应用同一样式.

#xixi_1 , .xixi_2 , p ,div {color:red; }

6. 通配选择器

作用于所有元素的定义样式.

* {
       margin: 12px;
       padding: 18px;
}