CSS初级篇 - CSS复杂选择器，权重计算问题，CSS基础属性 - Version：0624

系统对于CSS选择器优先级进行排序的时候，实际上是对不同选择器的权重值进行比较大小操作；

复杂选择器的计算问题；

1.父子选择器（或者成为派生选择器）；问题背景如下，对下面代码中的123文本添加背景颜色，同时不改变234文本背景颜色；代码如下：

< body >

< div >

< span >123 </ span >

</ div >

< span >234 </ span >

</ body >

是否有办法可以将<div>标签中的<span>标签选择出来，如果可以选择出来，那么就可以对其进行精准的修改背景颜色；方法，可以采用父子选择器进行选择，具体应用代码如下：

div span{

background-color:red;

}

另外，父子选择器的每一个层级没有必要一定是标签选择器，它的重点在与“父子关系”的表示，只要能够表示出这种依赖关系，那么就可以使用，比如下面代码：

HTML代码：

< body >

< div id= "only" >

< strong class= "demo" >

< em >234 </ em >

</ strong >

</ div >

< em >123 </ em >

</ body >

对应的CSS代码如下：

#only .demo em{

background-color:green;

}

可以看见，在表示父子关系时，同时采用id选择器、class选择器与标签选择器三者的组合，这样的编码方式也是可以的；

此外，这里的“父子关系”也并一定是直接的父子关系，也可以是隔代的子孙关系亦可以进行有效的选择；

2.直接子元素选择器；特征在于使用“>”来表示直接的父子关系；示例代码如下：

< body >

< div id= "only" >

< em >456 </ em >

< strong class= "demo" >

< em >234 </ em >

</ strong >

</ div >

< em >123 </ em >

</ body >

对应的CSS代码如下：

div > em{

background-color:green;

}

<section>标签，是HTML 5.0中的一个标签，和<div>标签类似，其出现的目的就在于要取代<div>标签；

基于上述标签，考虑如下一个问题；

< body >

< section >

< div >

< p >

< a href= "" >

< span ></ span >

</ a >

</ p >

< ul >

< li >

< p ></ p >

< a href= "" >

< span >

< em >1 </ em >

</ span >

</ a >

</ li >

< li ></ li >

</ ul >

</ div >

< a href= "" >

< p >

< em >2 </ em >

</ p >

< div ></ div >

</ a >

</ section >

</ body >

那么对应CSS代码中，浏览器是从左至右，还是从右至左进行选择的？主要是考虑效率问题，怎么样的方式更快一些：

section div ul li a em{

background-color:green;

}

这是一个关于浏览器底层内核的问题，遍历父子选择器时，高效的选择方式是从右向左进行寻找与选择；

3.并列选择器；考虑如下问题，将数字文本2添加背景颜色，同时不影响其他文本；代码如下：

< body >

< div >1 </ div >

< div class= "demo" >2 </ div >

< p class= "demo" >3 </ p >

</ body >

你会发现，使用你已学过的上述7中标签选择器均无法奏效，这时候就需要使用并列选择器了。使用方法如下：

div.demo{

background-color:green;

}

与父子选择器，直接父子选择器类似，并列选择器也可以是多层级的，并不一定只能两级；但是有一点需要注意的就是当使用标签选择器和class选择器并列进行选择时，标签选择器必须在class选择器之前，否则会误认；二者在并列时，中间不需要添加空格；并列选择器是针对同意元素对其多个特征进行并列列举而选取某一特定元素；

选择器权重计算问题：HTML代码如下：

< body >

< div class= "classDiv" id= "idDiv" >

< p class= "classP" id= "idP" >1 </ p >

</ div >

</ body >

对应的CSS代码如下：

#idDiv p{

background-color:green;

}

.classDiv .classP{

background-color:red;

}

请问，这时候数字文本1的背景颜色应该是什么？这里就涉及到选择器的权重计算问题；

只要写在同一排的选择器，直接将其权重值进行相加即可；下面这种情况，颜色就会变为红色，因为下面的权重值变大了；

#idDiv p{

background-color:green;

}

.classDiv .classP#idP{

background-color:red;

}

因为class选择器的权重是10，id选择器的权重值是100；标签选择器的权重值是1；当二者的合计权重值是一样大的时候，这时候遵循“后来先到”原则，后面的覆盖前面的。

4.分组选择器；降低代码耦合度，或代码重复率，提高编码效率的方法：公用一段CSS代码块

< body >

< div >

< span class= "demo" >

< p id= "only" >dadi </ p >

</ span >

</ div >

< em >

< ul >

< li ></ li >

< li id= "only1" >

< a href= "" >zhiyong </ a >

</ li >

< li ></ li >

</ ul >

< span ></ span >

</ em >

< strong >3 </ strong >

</ body >

对应的CSS选择器代码如下：注意在这里进行元素选择时，复杂选择器实际上是由基础选择器通过组合的形式构成的，这里用到标签选择器、id选择器、class选择器，以及组合的父子选择器、直接父子选择器，并列选择器等；代码书写时通常企业级开发采用如下的编码习惯与风格，即每个待选中（或被操作的元素）独占一行；

div span.demo p#only,

em > ul [ id = "only1" ] a,

strong{

background-color:red;

}

如何使用分组选择器进行代码简化？方法如下：

< body >

< div class= "demo1" ></ div >

< div class= "demo2" ></ div >

</ body >

相比分别对这两个<div>进行宽高与背景颜色的设置，如下代码更简洁：

.demo1{

background-color:red;

}

.demo2{

background-color:green;

}

.demo1, .demo2{

width: 100px;

height: 100px;

}

即，对于两个元素所共有的特征，进行了代码的复用；

5.CSS基础属性

CSS属性，属性值，这二者之间采用封号进行连接；

font-size属性，设置字体属性，浏览器默认字体大小是16px，设置字体宽高时，实际上通常是设置字体的高度；

font-weight属性，字体加粗；里面有很多值，lighter normal，bold，100,200，~，900；还可以是bolder；与字体包有关系；

font-style属性，字体斜体；取值可以为italic；

font-family属性，字体格式设置；arial；乔布斯设计的字体；

color，设置字体颜色；有三种设置写法：1.纯英文单词；2.颜色代码；3.颜色函数rgb(0~255, 0~255, 0~255)；在颜色设置方面有一个透明色，是transparent；

border，给容器增加一个外边框，是一个符合属性；border：border-width；border-style；border-color；

使用border属性，width属性，height属性的组合可以绘制“向左或向右的三角形符号”

< body >

< div class= "demo" ></ div >

</ body >

通过如下CSS代码的设置即可产生三角形符号：

.demo{

width: 0px;

height: 0px;

border-width: 25px;

border-style:solid;

border-left-color:transparent;

border-top-color:transparent;

border-right-color:black;

border-bottom-color:transparent;

}