css选择器及其性质

2.1 标签选择器

经过标签名选中元素。

语法： 标签名 {}

无论标签嵌套多深，均可以经过标签名查找到。

1 p { 2  color: red; 3 } 4 <div> 5  <div> 6  <div> 7  <div> 8  <div> 9  <p>内部深层的p</p> 10  </div> 11  </div> 12  </div> 13  </div> 14 </div>

 

 

用途：清除，重置默认样式

1 /*用途：重置，清除默认样式*/ 2 a { 3  text-decoration: none; 4  color: #333; 5 } 6 ul { 7  /*去掉小圆点*/ 8  list-style: none; 9 }

 

2.2 id选择器

经过id名选中元素

语法：#id名（#和id名牢牢书写）

id名命名规则：html严格区分大小写，必须以字母开头，后面能够有数字，下划线，短横。

id名是惟一的，无论是否是相同的标签只有出现一次该id名

1 #para-_1 { 2  font-size: 100px; 3 }

 

通常状况咱们不使用id设置样式。

2.3 类选择器

经过类名选中元素。

给元素添加class属性

.类名 {}

类名命名规则和id名同样。

 

 

同一个元素能够被不一样选择器选中（id选择器设置字号，类选择器设置文字颜色）设置不一样的样式属性，这些属性都会加载在元素身上。

层叠性体现（叠加）：同一个元素被不一样选择器选中，设置不一样的样式，会同时加载。

 

同一个元素能够设置多个类名，类名之间用空格隔开。

多个元素能够同时有相同类名。

1 <p class="para box wenzi">段落</p>

 

类名特殊应用：原子类（咱们能够将一些经常使用属性，设置为原子类，通常原子类只一个属性，便于样式设置）

1 <div class="f20 w800">1</div>

 

用途：相一样式的元素，添加同一个类名（类名上样式）

 

2.4 通配符

* {}

通配符能够选中页面上全部的标签（包括body）。

用途：练习阶段使用通配符快速清除默认样式。

1 * { 2  padding: 0px; 3  margin: 0px; 4 }

 

1、高级选择器

高级选择器是在基础选择器上延伸

3.1 后代选择器

经过嵌套关系进行选择，通常经过标签或者类选择器肯定大范围，在大范围内再次选择。

语法：每一层选择器用空格隔开

1 div p { 2  /*选中div后代中的p*/ 3  color: red; 4 }

 

后代选择器不但能够选中儿子，还能够选中孙子等全部的后代元素。

1 .box h3 { 2  font-size: 50px; 3 } 4 <div class="box"> 5  <div> 6  <div> 7  <div> 8  <h3>我是多层嵌套的h3</h3> 9  </div> 10  </div> 11  </div> 12 </div>

 

通常咱们在使用后代选择器是，将每一层祖先补全，精确选择。

1 /*通常要求补全每一层祖先*/ 2 .box div p { 3  font-size: 50px; 4 } 5 <div class="box"> 6  <div> 7  <p>我是p标签</p> 8  </div> 9 </div>

 

.box p {}同样会选中下面的结构

1 <div class="box"> 2  <div> 3  <p>我是p标签</p> 4  </div> 5 </div> 6 <div> 7  <div class="box"> 8  <p>我是p标签</p> 9  </div> 10 </div>

 

无论怎么，必定在书写选择器时有对应的结构。

11 <div> 12  <div class="box"> 13  <p>我是p标签</p> 14  </div> 1 </div>

1 .box div p {不能选中下面的结构} 2 <div> 3  <div class="box"> 4  <p>我是p标签</p> 5  </div> 6 </div>

 

 

3.2 交集选择器

同时选中两个选择器都具备的元素。

语法：连续书写选择器，不要添加任何空格（和后代选择器进行区分）

1 p.para { 2  font-size: 50px; 3 } 4 <p class="para">p</p> 5 <p> 6  我是p  <span class="para">特殊</span> 7 </p>

 

交集选择器能够连续交集（选择器能够书写多个）

1 /*能够连续交集*/ 2 p.para.fs { 3  /* 4  选中元素特色同时具备下面3个选择器： 5  p标签 6  .para 7  .fs 8  */ 9  color: red; 10 }

 

交集选择器能够不是标签选择器开头

1 .para.fs {}  //合法 2 #para.fs {}  //不合法，id选择器能够惟一选中元素

 

3.3 并集选择器

同时设置多个选择器相同的样式。

语法：逗号隔开每个选择器

1 div, h3, p { 2  font-size: 50px; 3  color: red; 4 }

 

类选择器也能够使用并集

1 .box, .para, .fs { 2  width: 200px; 3  height: 200px; 4  5  margin-bottom: 20px; 6 }

 

2、css性质

4.1 继承性

css继承性：元素能够从祖先继承文字属性，不能继承盒子属性

祖先设置文字属性后代元素都将继承这些文字属性。

1 文字属性：color, font系列,line系列，text系列等 2 盒子属性（不能继承）：width,height,background系列，border,浮动，等

 

 

css一个比较好性质，能够将一些文字属性给祖先设置，他的后代都将继承这些文字属性，简化代码。

1 body { 2  color: #333; 3  font-family: "Arial","Microsoft Yahei","SimSun"; 4  font-size: 14px; 5 }

 

层叠性体现：继承性

1 div { 2  width: 300px; 3  height: 300px; 4  5 }

 

4.2 css层叠性

同一个元素被不一样选择器选中，设置相一样式，会如何显示？

层叠性：同一个元素被不一样选择器选中，设置相一样式，权重大的会层叠掉权重小的。

1 div class="box" id="box">盒子</div> 2 /*同一个元素被不一样选择器选中 div .box   #box 同时设置文字颜色，会如何渲染*/ 3 div { 4  font-size: 50px; 5  color: red; 6 } 7 #box { 8  color: blue; 9 } 10 .box { 11  color: green; 12 }

 

权重：元素选择器针对性越强，权重就越大。

id选择器 》类选择器 》 标签选择器

1id = 255类

1类 = 255标签

 

 

①选中元素，计算该元素的权重。

选中元素，计算权重，只须要看id数量，类的数量，标签数量。先比较id选择器的数量，id数量多的权重最大；若是id数量相同，比较类的数量，类的数量多的权重就大；若是类的数量还相同就比较标签的数量，标签数量多的权重最大；若是标签数量还相同，直接看书写顺序，谁的样式在最后就显示谁的样式。

1 .box1 .box2 #box3 p { 2  color: blue; 3  /*(1,2,1)*/ 4 } 5 /*选择器数量都相同，后面的样式层叠掉前面的*/ 6 #box1 .box2 .box3 p { 7  color: green; 8  /*(1,2,1)*/ 9 }

 

②元素没有被选中，该元素权重是0.

样式看继承性（html结构距离近的优先渲染）就近原则

1 body { 2  font-size: 50px; 3  color: red; 4 } 5 #box1 { 6  color: blue; 7 } 8 .box3 { 9  color: green; 10 }

 

若是距离相同，看选择器权重（依次比较该选择器id,类，标签选择器数量）

1 .box1 .box2 { 2  color: blue; 3  /*（0,2,0）*/ 4 } 5 #box1 .box2 { 6  color: green; 7  /*（1,1,0）*/ 8 }

 

 

若是距离相同，选择器数量还相同，看css书写顺序

 

1 .box1 #box2 { 2  color: orange; 3 } 4 /*数量相同，看css顺序*/ 5 #box1 .box2 { 6  color: green; 7  /*（1,1,0）*/ 8 }

 

4.3 important

语法：

书写在属性值后面添加空格 !important分号结束

 

做用：能够提升选中元素单个属性的权重最大。而不是提升整个选择器的权重

 

 

important不影响就近原则。

1 /*元素没有被选中*/ 2 body { 3  font-size: 50px; 4  color: red !important; 5 } 6 .box { 7  color: green; 8 }