CSS学习 Part2

结构伪类选择器

结构伪类选择器是 CSS 中根据 HTML 元素在文档树中的结构关系来选择元素的选择器，常用于选取特定位置、层级或状态的元素。以下是常见的结构伪类选择器：

1. 位置相关

  • :first-child：选择父元素的第一个子元素。
    例：ul li:first-child 选择无序列表中第一个 li。
  • :last-child：选择父元素的最后一个子元素。
    例：div p:last-child 选择 div 中最后一个 p。
  • :nth-child(n)：选择父元素中第 n 个子元素（n 可为数字、公式或关键词）。
    例：tr:nth-child(2) 选第 2 行；li:nth-child(2n) 选偶数个 li。
  • :nth-last-child(n)：从父元素最后一个子元素开始计数，选第 n 个。
    例：span:nth-last-child(3) 选倒数第 3 个 span。

2. 同类型元素位置

  • :first-of-type：选择父元素中同类型的第一个元素。
    例：div span:first-of-type 选 div 中第一个 span（忽略其他类型元素）。
  • :last-of-type：选择父元素中同类型的最后一个元素。
  • :nth-of-type(n)：选择父元素中同类型的第 n 个元素。
    例：article p:nth-of-type(3) 选 article 中第 3 个 p。
  • :nth-last-of-type(n)：从同类型最后一个元素开始计数，选第 n 个。

3. 其他常用

  • :only-child：选择父元素中唯一的子元素。
    例：div:only-child 选父元素中唯一的 div。
  • :only-of-type：选择父元素中唯一的该类型元素。
  • :empty：选择没有子元素（包括文本）的元素。
    例：p:empty 选空的 p 标签。
  • :root：选择文档的根元素（HTML 中通常是<html>）。

这些选择器能灵活定位元素，尤其适合动态内容或不规则结构的页面样式设计。


伪元素选择器

伪元素选择器是 CSS 中用于创建和设置元素特定部分样式的选择器，它们并不存在于 HTML 结构中，而是通过 CSS 动态生成，常用于装饰或添加额外内容。以下是常见的伪元素选择器：

1. ::before

  • 在被选元素内容之前插入内容。
  • 必须配合content属性使用（即使值为空字符串""）。
  • 示例：为段落前添加符号
    p::before { content: "★"; color: red; }

2. ::after

  • 在被选元素内容之后插入内容。
  • 同样依赖content属性，常用来清除浮动、添加装饰等。
  • 示例：为链接后添加箭头
    a::after { content: "→"; margin-left: 5px; }

3. ::first-letter

  • 选择块级元素中第一个字符并设置样式。
  • 常用于首字母大写、特殊装饰（如报纸首字母下沉）。
  • 示例：
    p::first-letter { font-size: 2em; color: blue; }

4. ::first-line

  • 选择块级元素中第一行文本并设置样式（受容器宽度影响）。
  • 示例：设置段落第一行文本为粗体
    p::first-line { font-weight: bold; }

5. ::selection

  • 选择用户鼠标选中的文本部分（如高亮选中内容）。
  • 常用属性：color（文本色）、background（背景色）。
  • 示例：
    ::selection { background: yellow; color: black; }

伪元素选择器使用双冒号::（CSS3 规范），以区分伪类（单冒号:）。它们本质是元素的 “虚拟部分”，无法通过 JavaScript 直接操作，主要用于增强视觉效果。


PxCook

PxCook 又名像素大厨，是 FancyNode 公司开发的一款专业 UI 设计协作工具。它支持 Windows 和 Mac OS 系统，能有效解决作图过程中的透明图、尺寸、标尺等问题，是设计师常用的标注切图神器。其主要功能特点如下：

  • 智能标注：支持对 PS、Sketch 设计元素的尺寸、元素距离、文本样式、颜色进行智能标注。只需将设计文件拖拽到 PxCook 中，即可自动生成标注，还能识别 PSD 更新，自动更新之前的标注。
  • 单位转换：考虑到不同手机操作系统的设计师用到的单位不同，PxCook 支持 px、dp、pt 等单位自由转换，点击切换按钮，所有标注都能同步更换。
  • 标注定制：可以定制每个标注的颜色、标签位置等样式，标注字号、标注自动对齐等也可在设置面板中进行设置。同时支持 #Hex、argb、rgba 三种颜色模式。
  • 自动吸附：标注过程中可以针对图像内突出颜色进行自动吸附，方便精准标注。
  • 切图功能：支持智能切图，PS 文件需在 PS 中打开远程连接，通过 PxCook 的浮窗实现切图；Sketch 文件可点击 “导出当前画板到 PxCook”，在 PxCook 中标注后进行切图操作。
  • 生成代码：程序员点击设计稿中的相关元素，即可生成 CSS、XML、Swift、Objective - C 等前端代码，有助于实现设计与开发的高效协作。

盒子模型

在 CSS 中，HTML 中的每个元素在浏览器中都可以被看作一个盒子，拥有盒子一样的外形和平面空间。每个矩形盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分组成。

盒子模型的组成部分

  • 内容（content）：指盒子中的实际内容，如文字、图片等。通过width和height属性可以设置内容区域的宽度和高度，背景颜色可通过background-color属性设定1。
  • 内边距（padding）：是内容与边框之间的空间，用于清除内容周围的区域，取值不能为负，且受盒子的background属性影响。内边距可以单独设置某一个方向，如padding-top、padding-bottom、padding-left、padding-right，也可以使用简写方式12。
  • 边框（border）：是盒子的外部轮廓，由粗细、样式、颜色三部分组成。边框的样式有dotted（点线边框）、dashed（虚线边框）、solid（实线边框）等多种取值，颜色可以用 HEX 颜色、关键词或 rgb 颜色来指定，边框粗细直接写值，单位通常为px1。
  • 外边距（margin）：是盒子与其他元素之间的空间，用于在元素外创建额外的空白。外边距的值可以是正值，也可以是负值，可以是像素值（单位：px），也可以是百分比值。如果设置的是百分比值，不管设置的是什么方向的外边距，永远参考的是父容器的宽度1。

盒子模型的类型

  • 标准盒子模型：默认情况下，浏览器使用标准盒模型。在标准盒模型中，盒子的总宽度 = width + padding + border + margin，盒子的总高度 = height + padding + border + margin。这里的width和height只是内容区域的宽度和高度，不包含padding和border值2。
  • 怪异盒子模型（替代盒模型）：通过设置box-sizing: border-box来切换到怪异盒子模型。在怪异盒子模型中，元素的width和height包含了padding和border，即盒子的总宽度 = width + margin，盒子的总高度 = height + margin，这里的width和height是指包含了内边距和边框的可视宽度和高度2。

盒子模型的应用场景

  • 布局排版：可以利用盒子模型的各个属性精确控制元素在页面上的位置和间距，实现各种复杂的布局效果，如水平居中、垂直居中、多列布局等。例如，使用margin: 0 auto可以让一个块级元素在其父容器中水平居中1。
  • 响应式设计：在响应式网页设计中，通过合理设置盒子模型的属性，可以使页面在不同设备尺寸上都能保持良好的布局和显示效果。例如，使用百分比值设置外边距和内边距，以及结合box-sizing: border-box，可以让元素在不同屏幕宽度下自适应调整大小1。