CSS知识点 | 别来无恙

CSS 选择器分类

元素选择器
- 作用：通过元素选择器可以选择页面所有的指定元素。
- 语法：标签名{}

css

p {
  color: red;
}

id 选择器
- 通过元素的 id 属性值选中唯一的一个元素
- 语法： #id 属性值{}

css

#p {
  color: red;
}

类选择器
- 通过元素的 class 属性值选中一组元素
- 语法：.class 属性值 {}

css

.p {
  color: red;
}

选择器分组（并集选择器）
- 通过选择器分组可以同时选中多个选择器对应的元素
- 语法：选择器 1，选择器 2，...，选择器 N{}

css

#p1,
.p2,
h1 {
  backgroud-color: yellow;
}

通配选择器
- 可以选中页面的所有元素
- 语法：*{}

css

* {
  color: red;
}

复合选择器（交集选择器）
- 作用：可以选中同时满足多个选择器（条件）的元素
- 对于 id 选择器来说，不建议使用复合选择器，因为 id 选择器已经代表唯一元素
- 语法：选择器 1 选择器 2 选择器 N{}

css

span.p3 {
  color: red;
}

后代元素选择器
- 选中指定元素的指定后代元素
- 语法：祖先元素后代元素{}

css

#p1 p span {
  color: red;
}
div span {
  color: green;
}

子元素选择器
- 作用：选中指定父元素的指定子元素。
- IE6 及以下的浏览器不支持子元素选择器
- 语法：父元素>子元素{}

css

div > span {
  color: blue;
}

伪类选择器
- 作用：专门用来表示元素的一种特殊的状态，如访问过的超链接、普通的超链接、获取焦点的文本框。
- 当我们需要给这些处在特殊状态的元素设置样式时，就可以使用伪类选择器。
- 浏览器通过历史记录来判断一个链接是否访问过。
- IE6 中，不支持对超链接以外的元素设置:hover 和:active

css

//正常链接
a:link {
}
a:visited {
}
//鼠标聚焦时的链接
a：hover {
}
//正在点击时的链接
a:active {
}
//获取焦点：文本框获取焦点后，修改背景颜色为黄色。
input:focus {
  backgroud-color: yellow;
}
//选中的元素：为p标签中选中的内容使用样式可以使用::selection伪类选择器。
注意：这个伪类选择器在火狐浏览器中需要采用另一种方式编写。(::-moz-selection) p::selection {
}

伪元素选择器

css

//为P中第一个字符来设置一个特殊的样式 (用于文章段落开头样式)
p:first-letter {
}
//为p中第一行设置样式
p:first-line {
}
//:before表示元素最前边的部分，一般before需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容。
p:before {
  content: '出现在每段的前面';
  color: red;
}
//:after表示元素最后面的部分
p:after {
  content: '出现在每段的后面';
  color: red;
}

属性选择器
- title 属性，可以给任何标签指定当鼠标移入到元素上时，元素中的 title 属性的值将会作为提示文字显示。
- 作用：可以根据元素中的属性或属性值来选取指定元素。
- 语法：
  - [属性名]：选取含有指定属性的元素。
  - [属性名=“属性值”]：选取含有该属性且为指定属性值的元素。
  - [属性名 ^=“属性值”]：选取该属性的属性值为指定内容开头的元素。
  - [属性名 $=“属性值”]：选取该属性的属性值为指定内容结尾的元素。
  - [属性名 *=“属性值”]：选取该属性的属性值包含指定内容的元素。

html

<p title="hello">段落文字</p>

css

//为所有具有title属性的p元素设置背景色。
p[title] {
  backgroud-color: yellow;
}
//为title属性值以ab开头的元素设置样式。
p[title^='ab'] {
}

子元素伪类

css

//既是p元素同时也是父元素的第一个子元素。
p:first-child {
} /*只要p元素是第一个子元素就会被选中*/

//其他要求的可灵活结合其他选择中器，如
body > p:first-child {
}

//(:last-child)选中最后一个子元素。
//(:nth-child)可以选中任意位置的子元素。该选择器后边可以指定一个参数，指定要选中第几个子元素。
//even表示偶数位置的子元素
//odd表示奇数位置的子元素
p:nth-child(3) {
}
p:nth-child（even） {
}

//(:first-of-type)、(:last-of-type)、(:nth-of-type)
和:first-child类似，区别在于:first-child是相对于所有子元素中的排列位置，而type是在当前类型的子元素中的排列。
  p:first-of-type {
}

兄弟选择器
- 作用 1：可以选中一个元素后紧挨着的指定的兄弟元素。
- 语法：前一个 + 后一个
- 作用 2：选中后边的所有兄弟元素。
- 语法：前一个 ~ 后边所有。

css

//为span后的一个p元素设置样式。
span + p {
  background-color: yellow;
}

//为span后的所有p元素设置样式
span ~ p {
  background-color: yellow;
}

否定伪类
- 作用：可以从；已选中的元素中剔除出某些元素。
- 语法： :not(选择器)

css

p:not(.hello) {
  color: blue;
}

CSS 样式的继承

在 css 中，祖先元素上的样式，也会被它的后代元素所继承，利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
但是不是所有的样式都会被子元素继承，比如背景相关的样式、边框相关的样式、定位相关的样式。

选择器的优先级

当使用不同的选择器选中同一个元素并设置同一种样式（如背景颜色）时，由选择器的优先级（权重）决定，优先级高的优先显示。
优先级的规则：
- 内联样式：优先级 1000；
- id 选择器：100；
- 类和伪类：优先级 10；
- 元素选择器：优先级 1；
- 通配选择器：优先级 0；
- 继承的样式，没有优先级（最低）。
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较。但是注意，选择器优先级计算不会超过他的最大数量级（如类和伪类最大权重为 99），如果选择器优先级一样，则使用靠后的样式。
并集选择器（选择器 1，选择器 2，...，选择器 N{}）优先级是每个单独计算
可以在样式的最后，添加一个！important，则此时该样式将会获得一个最高的优先级（超过内联样式）。但是在开发中要尽量避免使用！important，其不利于后期的维护。

伪类的顺序

涉及到 a 的伪类一共有四个（:link、:visited、:hover、:active）,这四个的优先级是一样的。使用顺序记为为：Love Hate（爱与恨）。

CSS 选择器分类 ​

CSS 样式的继承 ​

选择器的优先级 ​

伪类的顺序 ​

CSS 选择器分类

CSS 样式的继承

选择器的优先级

伪类的顺序