css复习 2 （层叠，继承以及选择器）

一些基本概念的理解

1.层叠，优先级和继承

层叠：在css文件中，会对多个标签进行属性填充，此时就会引发多个标签的判定。在css文件中重复的定义以最后面的为主。

优先级：既然会有样式的重叠与冲突，就会有相应的优先级。

后面相同的样式定义会覆盖前面的样式定义

id选择器>类选择器>元素选择器

一般说来具体>宽泛

• 一个元素选择器不是很具体，会选择页面上该类型的所有元素， 所以它的优先级就会低一些。
• 一个类选择器稍微具体点 ，它会选择该页面中有特定 class 属性值的元素 ，所以它的优先级就要高一点。

继承：在html页面中，标签总是会有层层嵌套的现象出现。
子元素会继承父元素的样式特点

2.选择器

选择器分为全局选择器，类选择器，元素选择器和ID选择器四种。

2.1全局选择器

*号代指全局。方便代码的易读性。

*{
属性值；
}

2.2元素选择器

针对html中元素的样式属性进行渲染。
比如：

p{
   color:bule;
}

2.3类选择器

类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有物件.
把相同的类别一起将对样式进行改变。

属性.属性值{
   样式属性；
}

2.4ID选择器

以#号开头，其他用法跟类选择器一样。

3.伪类和伪元素

3.1伪类

伪类就是开头为冒号的关键字，用于定义元素特殊的状态。

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

3.2伪元素

伪元素是一个附加在选择器末尾的关键词，通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

具体形式：要用双冒号和伪类区分开

selector::pseudo-element {
  property: value;
}

4.关系选择器

4.1后代选择器

一般用空格来体现后代选择器，例如：

.box p {
    color: red;
}  
    

这里的box p就是指属性为box里面的p标签的样式颜色是红色。

4.2子代关系选择器

通常用>号来说明

4.3邻接兄弟选择器

通常用+号来选择两个临近元素要一起的样式的呈现。

4.4通用兄弟选择器

通常用~号来连接相同元素，即使不是临近元素