## 前言

CSS选择器是CSS用于选择HTML元素并应用具体样式属性的语法。CSS选择器有许多种类型，本文会详细列举所有的选择器并举例说明具体用法以及CSS选择器权重计算和CSS生效属性分析。

## CSS 选择器

### 1. 标签选择器

通过标签名称选择元素，如p选择所有段落元素。

```css
<p>选择器</p>

p {
 color: red;
}
```

### 2. 类选择器

通过类名选择元素，如.example选择所有类名元素为example的元素。

```css
<p class="example">选择器</p>

.example {
 color: red;
}
```

### 3. ID选择器

通过ID选择元素，如#example选择ID为example的元素。

```css
<p id="example">选择器</p>

#example {
	color: red;
}
```

### 4. 属性选择器

通过DOM属性及值选择元素，如[type=”submit”]选择所有type属性值为text的元素；

```css
<button type="submit">提交</button>

[type="submit"] {
	backgroud-color: red;
}
```

### 5. 伪类选择器、not()伪类选择器

通过元素的特定状态下选择元素，如:hover选择鼠标悬停在DOM的属性；

```css
<p>选择器</p>

p:hover {
	color: red;
}
```

### 6. 子选择器

选择一个元素的直接子元素；

```css
<ul>
	<li>选择器</li>
</ul>

ul > li {
	color: red;
}
```

### 7. 后代选择器

选择一个元素的后代元素；

```css
<div>
	<p>选择器</p>
</div>

div p {
	color: red;
}
```

### 8. 相邻兄弟选择器

选择紧接在另一个元素后面的兄弟元素；

```css
<div>
	<h1>选择器标题</h1>
	<p>选择器</p>
</div>

h1 + p {
	color: red;
}
```

### 9. 通配符选择器

使用（\*）作为选择器，表示匹配HTML中所有的元素。通配符选择器一般只会在特殊情况下使用，比如需要对全局样式进行重置时。

```css
* {
	color: red;
}
```

## CSS 选择器优先级

之所以涉及到选择器优先级问题，是因为在同一个DOM元素上设置多个CSS选择器并且设置了不同的CSS属性，CSS选择器优先级最高的选择器对应的CSS属性就是DOM最终生效属性。

CSS选择器优先级的规则：

1. 选择器权重
   不同的选择器的权重是不同的，具体的权重分数详情如下
   ID选择器的权重为100；
   类选择器、属性选择器、伪类选择器的权重为10；
   标签选择器的权重为1；
   通配符选择器、子选择器、相邻选择器、后代选择器、:not()伪类选择器权重为0；

组合每个选择器的权重并求和，最终值最高的选择器生效。

例子

```css
#example .example-class p:first-child {
  color: red;
}
```

ID选择器 #example：100

类选择器 .example-class：10

标签选择器 p：1

伪类选择器 :first-child：1

选择器权重求和：100 + 10 + 1 + 1 = 112。

1. !important关键字
   用于强制将样式应用在DOM元素上，其优先级非常高，可以覆盖其他选择器应用的样式。
   当多个样式声明都适用了!important时，他们优先级是相同的，后面的样式声明会覆盖前面的样式声明。


CSS选择器是CSS用于选择HTML元素并应用具体样式属性的语法。CSS选择器有许多种类型，本文会详细列举所有的选择器并举例说明具体用法以及CSS选择器权重计算和CSS生效属性分析。CSS选择器1.标签选择器2.类选择器3.ID选择器4.属性选择器5.伪类选择器6.子选择器7.后代选择器8.相邻兄弟选择器9通配符选择器。css选择器优先级权重计算...

CSS 选择器以及选择器的优先级

## 伪类

**伪类** 可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的 id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。

> **伪类**
>
> :first-child ，:link，:vistited，:hover:，:active，:focus，:lang

## 伪元素

**伪元素** 所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

---

> 伪元素
>
> :first-line，:first-letter，:before，:after

## 伪类属性说明

| 属性         | 说明                                                       |
| ------------ | ---------------------------------------------------------- |
| :link        | 伪类将应用于未被访问过的链接，与:visited 互斥。            |
| :visited     | 伪类将应用于已经被访问过的链接，与:link 互斥。             |
| :hover       | 伪类将应用于有鼠标指针悬停于其上的元素。                   |
| :active      | 伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。 |
| :focus       | 伪类将应用于拥有键盘输入焦点的元素。                       |
| :first-child | 伪类将应用于元素在页面中第一次出现的时候。                 |
| :lang        | 伪类将应用于元素带有指定 lang 的情况。                     |

## 伪元素属性说明

| 属性           | 说明                                           |
| -------------- | ---------------------------------------------- |
| ::first-letter | 伪元素的样式将应用于元素文本的第一个字（母）。 |
| ::first-line   | 伪元素的样式将应用于元素文本的第一行。         |
| ::before       | 在元素内容的最前面添加新内容。                 |
| ::after        | 在元素内容的最后面添加新内容。                 |


伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和c

CSS 伪类与伪元素

## 一、媒体查询 @media

**关键分辨率**

* 768px
* 992px
* 1200px

```javascript
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
```

> **注意：** CSS 加载就近原则
>
> 使用 min-width 时，小的放上面大的在下面。
>
> 同理如果是用 max-width 那么就是大的在上面，小的在下面。

## **按需加载**

```css
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

```


sd


一、媒体查询@media关键分辨率768px992px1200px@media(min-width:768px){//=768的设备}@media(min-width:992px){//=992的设备}@media(min-width:1200){//=1200的设备}@media(max-width:1199){//=1199的设备}@media(max-width:991px){//=991的

CSS 响应式布局方法汇总

## 动画属性

> CSS 动画效果包括 3 个属性：transform , transition, animation
>
> - Transfrom: 变形
> - Transition: 过渡
> - Animation: 动画

## 一、变形 transform

> transform 属性使一个 dom 进行各种位置转化

| 方法      | 备注 |
| --------- | ---- |
| translate | 平移 |
| scale     | 缩放 |
| skew      | 倾斜 |
| rotate    | 旋转 |

> **translate** 平移
>
> * translate(*x* ,*y* )
> * translate3d(*x* ,*y* ,*z* )
> * translateX(*x* )
> * translateY(*y* )
> * translateZ(*z* )

> **scale** 缩放
>
> scale(*x* [,*y* ]?)
>
> scale3d(*x* ,*y* ,*z* )
>
> scaleX(*x* )
>
> scaleY(*y* )
>
> scaleZ(*z* )

> **skew** 倾斜
>
> skew(*x-angle* ,*y-angle* )
>
> skewX(*angle* )
>
> skewY(*angle* )

> **rotate** 旋转
>
> rotate(*angle* )
>
> rotate3d(*x* ,*y* ,*z* ,*angle* )
>
> rotateX(*angle* )
>
> rotateY(*angle* )
>
> rotateZ(*angle* )

> **transform-origin** 变形圆心
>
> transform-origin(x-axis y-axis z-axis)
>
> * left
> * top
> * center
> * right
> * bottom
> * *length*
> * *%*
>
>   > **transform-style** 三维空间中呈现
>   >
>   > transform-style: flat|preserve-3d;
>   >

## 二、过渡 transition

> transition 使 样式效果 显示变化的过程。

| 属性                       | 备注               |
| -------------------------- | ------------------ |
| Transition-property        | 过渡生效的元素属性 |
| Transition-duration        | 过渡持续时间       |
| Transition-timing-function | 过渡速度变化方式   |
| Transition-delay           | 过渡延迟时间       |

> **复合属性使用**
>
> transition: *property duration timing-function delay* ;
>
> 复合属性将表格中的四个属性合并成一个，从而简化代码。

**触发方式**

1. hover
2. active
3. focus
4. @media 触发
5. click

> 我的理解：transition 本质是用于过渡，所以肯定需要修改一些属性才能看到动态变化的效果。怎么去修改属性，就是用上面的这些方法，或者更多方式。
>
> **transition** 限制：
>
> * transition 需要事件触发，所以没法在网页加载时自动发生。
> * transition 是一次性的，不能重复发生，除非一再触发。
> * transition 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

## 三、动画 animation

> **animation** 不仅仅可以控制属性的过渡，而且可以连续控制动画效果，甚至可以暂停、重启动画效果。

| 属性                      | 备注         |
| ------------------------- | ------------ |
| animation-name            | 动画名称     |
| animation-duration        | 动画持续时间 |
| animation-timing-function | 动画速度方法 |
| animation-delay           | 动画延迟时间 |
| animation-iteration-count | 动画播放次数 |
| animation-direction       | 动画播放方向 |

> **复合属性**
>
> animation: name duration timing-function delay iteration-count direction

* name 动画名称
* 动画持续时间
* 动画速度方法
* 动画延迟时间
* 动画播放次数> * 动画播放方向

> **暂停重启动画**
>
> Animation-play-state: running | paused

**@keyframes**
定义动画

```javascript
@keyframes name {
  0% {}
  50% {}//可选
  100% {}
}
```


CSS动画效果包括3个属性：transform,transition,animationTransfrom:变形Transition:过渡Animation:动画一、变形transformtransform属性使一个dom进行各种位置转化方法备注translate平移scale缩放skew倾斜rotate旋转translate平移translate(x,y)translate3d(x,y,z)tr

CSS 入门指南

教程简介

文章列表

CSS 选择器以及选择器的优先级

CSS 伪类与伪元素

CSS 响应式布局方法汇总

CSS 动画效果知识点汇总