【自用】CSS查漏补缺

兄弟选择器

选择器+选择器

相邻兄弟选择器（+）选择的是前一个元素后面紧接着的兄弟元素

选择器~选择器

通用兄弟选择器（~）选择的是前一个元素后面所有的兄弟元素

属性选择器

[属性] {} 存在某属性

[属性="xxx"] {} 属性值为xxx

[属性^="xxx"] {} 属性值以xxx开头

[属性$="xxx"] {} 属性值以xxx结尾

[属性*="xxx"] {} 属性值包含xxx

伪类选择器

动态伪类

（不止a，其他也可）

a:link未访问

a:visited访问过

a:hover悬停

a:active鼠标按下未松开

为了确保样式的正确性，上四种状态需要按照此固定的顺序编写。（因为后写的样式会覆盖先写的样式）

:focus 适用于可聚焦的元素

结构伪类

:last-child

:first-child

:nth-child(an+b)

:nth-last-child(an+b)

:last-of-type

:first-of-type

:nth-of-type(an+b)

:nth-last-of-type(an+b)

:only-child 选中独生子女

css 复制代码

<div>
    <span></span> // 可以选中
</div>
<div>
    <随便></随便>
    <span></span> // 不可以选中
</div>

:only-of-type

:empty

里面一个空格都不要有

:root

否定伪类

:not(选择器)

css 复制代码

div > p:not(.ciallo) {}

<div>
    <p></p> // 选中
    <p></p> // 选中
    <p class="ciallo"></p> // 不选中
    <p class="ciallo"></p> // 不选中
</div>

UI伪类

:checked 选中状态

:disabled :enabled

:target

选中锚点指向的元素，配合a标签的href属性使用

语言伪类

:lang(语言)

伪元素选择器

::first-letter

选中第一个字母

::first-line

::selection

文档中被用户高亮的部分

::placeholder

::before ::after

css 复制代码

span::before {
  content: """;
}
span::after {
  content: """;
}

<span>ciallo</span> // 将 ciallo 前后添加引号

若不写content属性，则::before/::after不会被渲染

样式优先级

!important > 行内 > id > class > 元素选择器 > 通配选择器(*) > 继承来的样式

权重：

(a, b, c)，其中abc分别为(ID选择器个数, class/伪类/属性选择器个数, 元素/伪元素选择器个数)

从a到c比较，谁先赢谁生效（可以理解成不进位的三位数比较）

CSS的继承性

部分属性是可以继承的，如text-xxx, font-xxx, line-xxx, color ...

元素会自动从其上级元素继承来这些样式，且优先继承离自己近的

margin塌陷&合并

margin塌陷

css 复制代码

<div id="content">
    <div class="inner inner1">
        1
    </div>
    <div class="inner inner2">
        2
    </div>
</div>

#content {
	background-color: lightgray;
}

.inner {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    border: 1px solid black;
    box-sizing: border-box;
}

.inner1 {
    margin-top: 20px;
}
.inner2 {
    margin-bottom: 20px;
}

当父元素没有设置padding或border时（设置为0px不算），如上面设置的margin会将父元素的位置移动。

要解决塌陷问题，给父容器设置padding会border显然是不合适的。
解决方案：

触发BFC（Block Formatting Context，块级格式化上下文）。
最常见的方案就是给父容器加上 overflow: hidder; 来解决。

margin合并

css 复制代码

<div id="content">
    <div class="inner inner1">
        1
    </div>
    <div class="inner inner2">
        2
    </div>
</div>            

.inner1 {
    margin-bottom: 20px;
}
.inner2 {
    margin-top: 20px;
}

如上，两个margin会合并为20px。这种合并不会存在于左右兄弟之间。

解决这个问题可能会导致副作用，尽量规避（只设置一个margin），而不是解决。

浮动

css 复制代码

	xxx {
		float: left; // 脱离文档流，浮动到左边
	}
	xxx {
		clear: left; // 清除浮动元素的影响，移动到之前所有左侧浮动元素的下方。（right/both同理）(不适用于行内元素，所以可以用空白的块元素或将::after设成块元素来清除浮动带来的影响)
	}

html 复制代码

<div>
	<div style="float: left;">xxx</div>
	<div style="float: left;">xxx</div>
	<div style="float: right;">xxx</div>
	<div style="float: left;">xxx</div>
	<div style="clear: both;"></div>
</div>

定位

复制代码

xxx {
		position: ???;
	}

static静态定位

默认的定位方式，不受left/right/top/bottom属性的影响。

relative相对定位

一般与absolute一起使用。

与left/right/top/bottom属性合用，如left: 10px;意为视觉上该元素从左边开始偏移10px。

属性left和right一起设置时，left使right失效；top和bottom一起设置时，top使bottom失效。与先后顺序无关。

不推荐与margin或float一同使用。

absolute绝对定位

开启绝对定位的元素会脱离文档流。

若给开启绝对定位的元素设置left/right/top/bottom属性，该属性会根据其最近距离的使用position属性的上级元素来定位。一般将基准元素的position设为relative，因为其对文档流的影响最小。（子绝父相）

复制代码

<body>
    <div style="position: relative;">
        <div style="position: absolute; left:20px;"></div> // 从其父的左端开始向右偏移20px
    </div>
</body>

<body>
    <div>
        <div style="position: absolute; left:20px;"></div> // 从body左端开始向右偏移20px
    </div>
</body>

原始设定了left属性，margin-left才生效，其他三个同理，但浏览器可能不兼容。故不推荐absolute定位与margin一同使用。

float会失效。

fixed固定定位

元素相对于视口固定，即使页面滚动也不会移动。

sticky粘性定位

元素在滚动时会在relative和fixed之间切换，需设置至少一个非auto的偏移值（如 top: 0;）。参考点是离之最近的拥有滚动行为的上级元素。

定位的层级

开启定位的元素层级比普通元素（默认定位）高，各种不同定位的层级相同。

CSS过渡

还没学qwq

CSS动画

还没学qwq

学习参考 ：

【尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频】 https://www.bilibili.com/video/BV1p84y1P7Z5

欢迎提出建议。awa