CSS 备忘

媒体查询

// 基本形式
@media <media-type> and|not|only (<media-feature>) { css-code ... }

媒体类型

类型	描述
all	所有设备
screen	电脑屏幕，平板电脑，智能手机等(默认值，可省略)
print	打印机和打印预览
speech	屏幕阅读器等发声设备

媒体特征

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

---

元素定位

• 相对定位 relative

  遵循相对定位的元素相对于在文档中的正常位置偏移给定的值，但不会影响其它元素的偏移。

  它原先占据的位置将会被保留。

• 绝对定位 absolute

  相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在不知文档流中的其它元素时，绝对定位的元素不占据空间，它相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时， 则相对于 ICB(Initial Container Block) 定位。

• 固定定位 fixed

  固定定位元素与绝对定位相似，但其包含块为 viewport 。

  但当固定定位的元素的祖先的 transform 属性为非 none 时，定位参考更改为该祖先元素。

  viewport 是一个网页的用户可视区域

• 粘性定位 sticky

  粘性定位可以被认为是相对定位和固定定位的结合：元素在跨越特定阈值前为相对定位，之后为固定定位。

  必须指定 top, right, bottom, left 四个阈值其中之一，才能使粘性定位生效，否则其行为和相对定位相同。

---

CSS 选择器

简单选择器

• 类型选择器

  element { style properties }

  选择所有匹配给定的节点名称的元素

• 类选择器

  .className { style properties }

  选择所有拥有给定的类属性的元素

• ID 选择器

  #idname

  基于 id 属性的值来选择一个元素，在一个文档中拥有指定的 ID 的元素应该只有一个

• 通用选择器

  *

  选择所有元素

• 属性选择器

  [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

  根据给定的属性的值来选择元素

使用连接符

• 兄弟选择

  A ~ B

  选择在 A 之后的所有 B 元素，且 A、B 拥有共同的父元素

• 相邻兄弟选择

  A + B

  选择紧跟在 A 元素后的 B 元素，且 A 、B 拥有共同的父元素

• 后代选择

  A B

  选择作为 A 元素的后代的 B 元素

• 子元素选择

  A > B

  选择作为 A 元素直接后代的 B 元素

伪类

selector:pseudo-classes { style property }

用于向某些选择器添加特殊的效果

// 表示被用户激活(触发)的元素，常用于 <a> 和 <button>
:active
// 表示任何 radio、checkbox 或 option 元素被选中
:checked
// 表示任何表单元素的默认状态
:default
// 表示任何被禁用的元素
:disabled
// 表示任何没有子元素的元素
:empty
// 表示元素处于可用状态，即可被激活、选中、按下、输入或获得焦点等
:enabled
// 用于 @page at-rule，表示被打印文档的第一页
:first
// 表示一组兄弟元素中的第一个
:first-child
// 表示一组兄弟元素中同类型的第一个元素
:first-of-type
// 表示用户使用指向设备和元素交互但是没有激活它的状态
:hover
// 表示任何处于 indeterminate 状态的表单元素
:indeterminate
// 表示 <input> 元素的当前值是否处于由 min 和 max 属性限制的的范围之内
:in-range
:out-range
// 表示 <input> 或其它表单元素的内容是否校验失败
:invalid
:valid
// 一组兄弟元素中的最后一个元素
:last-child
// 一组兄弟元素中同类型的最后一个元素
:last-of-type
// 表示一个元素还未被访问，匹配任何未被访问的拥有 href 属性的 <a> <area> 或 <link> 元素
:link
// 选择任何非指定元素的元素
:not()
// 选择一组兄弟元素中的指定位置的元素
:nth-child()
// 选择一组兄弟元素中的最末尾位置的元素
:nth-last-child
// 选择一组兄弟元素中的同类型的最后一个元素
:nth-last-of-type
// 在一组兄弟元素中选择同类型的元素中指定位置的元素
:nth-of-type()
// 选择一个没有任何兄弟元素的元素
:only-child
// 选择一个没有任何同类型兄弟元素的元素
:only-of-type
// 根据是否设置了 required 属性来选择 <input> <select> 或 <textarea> 元素
:optional
:required
// 
:target

伪元素

element::pseudo-elements { style property }

用于向某些选择器添加特殊的效果

// 在指定的元素中的末尾创建一个子元素，经常使用 content 属性来向指定的元素添加装饰
::after
::before
//
::first-line
::first-letter
// 选中已经被用户高亮的部分
::selection
//
::slotted