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 } |
一、高级选择器
高级选择器是在基础选择器上延伸
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 } |
二、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 } |
