CSS学习 Part2

Realfrog2025-07-082025-07-14

复合选择器

在 CSS 里，复合选择器能够把多个简单选择器组合起来，精准定位网页里的特定元素。

后代选择器（空格）：选取作为特定元素后代的元素。

/* 选取article内所有的p元素 */
article p {
  color: gray;
}

子选择器（>）：只选取作为特定元素直接子元素的元素。

/* 选取nav下一级的ul元素 */
nav > ul {
  list-style: none;
}

相邻兄弟选择器（+）：选取紧跟在特定元素后面的同级元素。

/* 选取h2后面的p元素 */
h2 + p {
  font-weight: bold;
}

通用兄弟选择器（~）：选取特定元素后面的所有同级元素。

/* 选取img后面的所有p元素 */
img ~ p {
  color: blue;
}

存在选择器（[attr]）：选取拥有特定属性的元素。

/* 选取有disabled属性的input元素 */
input[disabled] {
  opacity: 0.5;
}

值匹配选择器（[attr=”value”]）：选取属性值等于特定值的元素。

/* 选取type为"email"的input元素 */
input[type="email"] {
  border-color: #ced4da;
}

部分值匹配选择器：

/* 选取lang属性以"en"开头的元素 */
[lang|="en"] {
  font-family: Arial;
}

并集选择器：通过使用逗号（,）分隔不同的选择器，可以将多个选择器组合在一起，从而避免重复编写相同的样式声明。

selector1, selector2, selector3 {
  /* 共同的样式声明 */
  property: value;
}

交集选择器：它通过将多个简单选择器直接连接在一起（无分隔符）来实现，要求元素必须同时匹配所有选择器。

selector1selector2selector3 {
  /* 样式声明 */
  property: value;
}

伪类选择器：用于选择处于特定状态或位置的元素，而无需为其添加额外的类或 ID。它们以冒号（:）开头，可与其他选择器组合使用，使样式更加动态和灵活。

用于选择处于特定交互状态的元素：

a:link { color: blue; }       /* 未访问的链接 */
a:visited { color: purple; }  /* 已访问的链接 */
a:hover { color: red; }       /* 鼠标悬停的链接 */
a:active { color: green; }    /* 正在点击的链接 */

input:focus { outline: 2px solid #007bff; }  /* 获得焦点的输入框 */
button:disabled { opacity: 0.5; }            /* 禁用状态的按钮 */

基于元素在文档树中的位置进行选择：

p:first-child { font-weight: bold; }         /* 作为第一个子元素的p */
p:last-child { color: #666; }                /* 作为最后一个子元素的p */
li:nth-child(odd) { background: #f9f9f9; }   /* 奇数位置的li */
li:nth-child(3n+1) { color: red; }           /* 位置为3n+1的li */
p:only-child { margin: 0; }                  /* 唯一子元素的p */

CSS三大特性

1. 层叠性（Cascading）

层叠性是 CSS 最基础的特性，它决定了在同一个元素受到多个相互冲突的 CSS 规则影响时，如何进行选择。层叠遵循以下规则：

来源顺序：当多个 CSS 规则的优先级相同时，后定义的规则会覆盖先定义的规则。
优先级：不同选择器有不同的优先级，内联样式 > ID 选择器 > 类选择器 > 元素选择器。
重要性：使用!important声明的属性具有最高优先级，不过应当谨慎使用，因为它会破坏正常的层叠规则。

下面是一个示例：

<style>
  p { color: red; }  /* 元素选择器 */
  .text-blue { color: blue; }  /* 类选择器 */
</style>

<p>这段文字是什么颜色？</p>
<p class="text-blue">这段文字又是什么颜色？</p>

上面的例子中，第一个 p 标签会显示红色，第二个 p 标签会显示蓝色，这是因为类选择器的优先级高于元素选择器。

2. 继承性（Inheritance）

继承性是指子元素会自动继承父元素的某些 CSS 属性。通常，与文本相关的属性（如字体、颜色、字号等）具有继承性，而与盒模型相关的属性（如宽度、高度、边距等）不会被继承。

<style>
  body {
    font-family: Arial, sans-serif;
    color: #333;
  }
</style>

<body>
  <p>这段文字会继承body的字体和颜色。</p>
  <div>
    <span>这个span元素也会继承body的字体和颜色。</span>
  </div>
</body>

在上面的代码中，p 标签和 span 标签都没有设置 font-family 和 color 属性，但它们会自动继承 body 元素的这些属性。

3. 优先级（Specificity）

优先级决定了不同选择器定义的样式规则在冲突时的应用顺序。优先级的计算基于选择器的类型和数量，具体规则如下：

内联样式：优先级最高，得分为 1000。
ID 选择器：每个 ID 选择器得分为 100。
类选择器、属性选择器和伪类：每个得分为 10。
元素选择器和伪元素：每个得分为 1。
通用选择器（*）：优先级最低，得分为 0。

下面的例子展示了优先级的计算：

<style>
  #my-id { color: red; }  /* 优先级: 100 */
  .my-class { color: blue; }  /* 优先级: 10 */
  p { color: green; }  /* 优先级: 1 */
</style>

<p id="my-id" class="my-class">这段文字是什么颜色？</p>

在上面的例子中，尽管类选择器和元素选择器在样式表中后定义，但由于 ID 选择器的优先级最高，所以这段文字会显示为红色。

了解 CSS 的三大特性，能够帮助你更好地控制样式的应用，避免出现意外的样式冲突，提高代码的可维护性。

在 CSS 中，当多个选择器组合使用时，它们的权重会叠加计算。这一机制决定了当不同的 CSS 规则应用于同一元素时，哪条规则会生效。下面详细介绍权重叠加的规则和计算方法：

权重计算规则

CSS 选择器的权重分为四个等级，从高到低排列为：

内联样式（1,0,0,0）
ID 选择器（0,1,0,0）
类选择器、属性选择器和伪类（0,0,1,0）
元素选择器(标签选择器)和伪元素（0,0,0,1）

当多个选择器组合使用时，它们的权重会叠加。例如：

body header ul li a 的权重是 0,0,0,5（5 个元素选择器）
#navbar .active 的权重是 0,1,1,0（1 个 ID 选择器 + 1 个类选择器）
body #container ul.list li.active 的权重是 0,1,1,3（1 个 ID 选择器 + 1 个类选择器 + 3 个元素选择器）

权重叠加示例

下面通过具体示例说明权重叠加的计算方法和效果：

<style>
  /* 权重: 0,0,0,1 */
  p {
    color: red;
  }
  
  /* 权重: 0,0,1,0 */
  .highlight {
    color: blue;
  }
  
  /* 权重: 0,0,0,2 */
  div p {
    color: green;
  }
  
  /* 权重: 0,0,1,1 */
  div .highlight {
    color: purple;
  }
  
  /* 权重: 0,1,0,0 */
  #special {
    color: orange;
  }
</style>

<div>
  <p>普通段落（红色）</p>
  <p class="highlight">高亮段落（紫色）</p>
  <p id="special" class="highlight">特殊段落（橙色）</p>
</div>

权重叠加的特殊情况

通用选择器（*）：权重为 0,0,0,0，不影响总权重
伪元素（::before, ::after 等）：权重为 0,0,0,1
伪类（:hover, :active 等）：权重为 0,0,1,0
!important：会覆盖所有选择器的权重，但应谨慎使用

计算工具与实践建议

为了帮助理解和计算选择器权重，可以使用以下方法：

手动计算：按照四个等级统计选择器的数量
在线工具：如 Specificity Calculator 等工具可以自动计算
浏览器开发者工具：Chrome/Firefox 的开发者工具可以显示每条规则的权重

实践中，建议遵循以下原则：

避免使用内联样式
尽量减少使用 ID 选择器
使用类选择器组织样式
保持选择器的简洁性
避免使用！important

通过合理控制选择器的权重，可以使 CSS 代码更加清晰、可维护，减少样式冲突的可能性。

Emmet写法

Emmet 是一种在前端开发中非常高效的缩写语法，它可以快速生成 HTML、CSS 等代码。下面为你介绍其常见的写法和示例：

1. HTML 中的 Emmet 写法

标签生成

div：生成 <div></div>
p：生成 <p></p>
h1：生成 <h1></h1>

层级关系

div>p：生成

<div>
    <p></p>
</div>

div>ul>li：生成

<div>
    <ul>
        <li></li>
    </ul>
</div>

兄弟元素

div+p：生成

<div></div>
<p></p>

重复生成

ul>li*3：生成

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

属性设置

a[href="https://example.com" target="_blank"]：生成

<a href="https://example.com" target="_blank"></a>

div.classname：生成 <div class="classname"></div>
div#idname：生成 <div id="idname"></div>

内容设置

p{Hello World}：生成 <p>Hello World</p>

组合使用

div.container>h1.title{Page Title}+p.content*2：生成

<div class="container">
    <h1 class="title">Page Title</h1>
    <p class="content"></p>
    <p class="content"></p>
</div>

2. CSS 中的 Emmet 写法

属性缩写

w100：生成 width: 100px;
h50：生成 height: 50px;
m10：生成 margin: 10px;
p20：生成 padding: 20px;

值缩写

bgc#f00：生成 background-color: #f00;
c#fff：生成 color: #fff;
fz16：生成 font-size: 16px;

复杂属性

d:flex：生成 display: flex;
jcc：生成 justify-content: center;
aic：生成 align-items: center;

浏览器前缀

trs：生成 -webkit-transition: all 0.3s ease; transition: all 0.3s ease;

3. 使用技巧

编号：在重复生成元素时使用 $ 进行编号，如 ul>li.item$*3 生成

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

自定义缩写：在编辑器中可以自定义 Emmet 缩写规则，提高效率。

4. 在不同编辑器中使用

Emmet 被广泛支持于各种编辑器，如 VS Code、Sublime Text、WebStorm 等。在 VS Code 中，默认就支持 Emmet，只需输入缩写后按 Tab 键即可展开。

掌握 Emmet 写法可以极大地提高前端开发效率，减少重复输入。你可以在日常开发中多多练习，逐渐熟悉这些缩写规则。

背景属性

在 CSS 里，背景属性可用于设定元素的背景效果。下面为你详细介绍常见的背景属性及其使用方法：

1. background-color

该属性用于设置元素的背景颜色，颜色值可以是颜色名称、十六进制值、RGB 值、RGBA 值、HSL 值或者 HSLA 值。

.element {
  background-color: red; /* 颜色名称 */
  background-color: #ff0000; /* 十六进制值 */
  background-color: rgb(255, 0, 0); /* RGB值 */
  background-color: rgba(255, 0, 0, 0.5); /* RGBA值（包含透明度） */
  background-color: hsl(0, 100%, 50%); /* HSL值 */
  background-color: hsla(0, 100%, 50%, 0.5); /* HSLA值（包含透明度） */
}

2. background-image

此属性用于为元素设置背景图片，图片路径需放在 url () 函数中。

.element {
  background-image: url('image.jpg'); /* 本地图片 */
  background-image: url('https://example.com/image.jpg'); /* 网络图片 */
  background-image: linear-gradient(to bottom, red, yellow); /* 线性渐变 */
  background-image: radial-gradient(circle, red, yellow); /* 径向渐变 */
  background-image: repeating-linear-gradient(red, yellow 10px); /* 重复线性渐变 */
}

3. background-repeat

该属性用于控制背景图片的重复方式。

.element {
  background-repeat: repeat; /* 水平和垂直方向都重复（默认值） */
  background-repeat: repeat-x; /* 仅水平方向重复 */
  background-repeat: repeat-y; /* 仅垂直方向重复 */
  background-repeat: no-repeat; /* 不重复 */
  background-repeat: space; /* 图片尽可能重复，但不会裁剪 */
  background-repeat: round; /* 图片会缩放以适应元素并重复 */
}

4. background-position

此属性用于设定背景图片的起始位置。

.element {
  background-position: center; /* 居中 */
  background-position: top left; /* 左上角 */
  background-position: bottom right; /* 右下角 */
  background-position: 20px 50px; /* 距左侧20px，距顶部50px */
  background-position: 50% 50%; /* 百分比表示法，等同于center */
    /*如果只写一个关键字，另一个默认居中*/
    /*如果只写一个数字，表示水平方向的数值，垂直方向为居中*/
}

5. background-size

该属性用于调整背景图片的大小。

.element {
  background-size: auto; /* 原始大小（默认值） */
  background-size: cover; /* 等比例缩放，覆盖整个元素，可能会裁剪 */
  background-size: contain; /* 等比例缩放，完全显示图片，可能会有空白 */
  background-size: 100px 200px; /* 自定义宽高 */
  background-size: 50% 50%; /* 相对于元素的百分比 */
}

6. background-attachment

该属性用于确定背景图片是随页面滚动还是固定不动。

.element {
  background-attachment: scroll; /* 随页面滚动（默认值） */
  background-attachment: fixed; /* 固定不动 */
  background-attachment: local; /* 随元素内容滚动 */
}

7. background-clip

此属性用于定义背景的显示范围。

.element {
  background-clip: border-box; /* 延伸到边框外边缘（默认值） */
  background-clip: padding-box; /* 延伸到内边距外边缘 */
  background-clip: content-box; /* 仅显示在内容区域 */
  background-clip: text; /* 使背景只显示在文本中（需要配合text-fill-color: transparent;） */
}

8. background-origin

该属性用于指定背景图片的定位原点。

.element {
  background-origin: padding-box; /* 从内边距开始（默认值） */
  background-origin: border-box; /* 从边框开始 */
  background-origin: content-box; /* 从内容区域开始 */
}

9. 简写属性 background

使用 background 可以同时设置多个背景属性，各值之间用空格分隔。

.element {
  background: red url('image.jpg') no-repeat center/cover fixed;
  /* 等价于：
  background-color: red;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  */
}

10. 多背景图片

可以为元素设置多层背景图片，各背景之间用逗号分隔，先指定的背景会显示在最上面。

.element {
  background: 
    url('image1.jpg') no-repeat top left,
    url('image2.jpg') no-repeat bottom right;
  background-size: 50%, cover;
}

11. 渐变背景

CSS 支持创建线性渐变和径向渐变背景。

.element {
  background: linear-gradient(to right, red, yellow); /* 从左到右的渐变 */
  background: linear-gradient(45deg, red, yellow); /* 45度角的渐变 */
  background: radial-gradient(circle, red, yellow); /* 圆形径向渐变 */
  background: repeating-linear-gradient(red, yellow 10px); /* 重复线性渐变 */
}

掌握这些背景属性后，你就能为网页元素创建出丰富多样的背景效果了。

背景属性复合写法

在 CSS 里，背景属性的复合写法能够把多个背景相关的属性整合到一条声明之中。下面为你介绍它的语法和常见的使用情形。

基础语法

background: [background-color] [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip];

常用示例

背景颜色与图片

background: #f0f0f0 url('image.jpg');

背景图片位置与重复方式

background: url('image.jpg') center center no-repeat;

背景图片尺寸

background: url('image.jpg') no-repeat center/cover;

多个背景层叠

background: 
  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  url('image.jpg') center/cover no-repeat;

注意要点

顺序问题：虽然各属性的顺序没有严格要求，但为了增强可读性，建议按照上面示例的顺序来书写。
简写限制：使用复合写法时，background-size必须紧跟在background-position之后，并且要用/分隔，例如center/cover。
默认值情况：要是某些属性没有明确指定，它们就会被设置为默认值。所以在使用复合写法时，要留意不要意外覆盖掉其他属性的值。

实际应用

.element {
  background: #fff url('bg.png') top left/auto 100% repeat-x fixed padding-box content-box;
}

这个例子就展示了如何把多个背景属性合并成一条声明，这样能让代码更加简洁。

显示模式

在 CSS 中，display属性用于控制元素的显示模式，决定元素如何在页面中布局和呈现。以下是一些常见的显示模式及其用法：

1. 块级元素 (`display: block`)

特点：独占一行，宽度默认占满父元素，可设置宽高。
示例：<div>, <p>, <h1> 等。

div {
  display: block;
  width: 100%;
  height: 50px;
  background-color: lightblue;
}

2. 内联元素（行内元素）(`display: inline`)（不常用）

特点：不换行，宽度由内容决定，无法设置宽高。
示例：<span>, <a>, <img> 等。

span {
  display: inline;
  background-color: lightcoral;
  /* 设置宽高无效 */
  width: 100px; /* 无效 */
  height: 50px; /* 无效 */
}

3. 内联块元素（行内块元素）(`display: inline-block`)

特点：不换行，但可设置宽高，类似行内的 “块”。
应用：常用于水平排列元素（如按钮组、图片画廊）。

button {
  display: inline-block;
  width: 100px;
  height: 30px;
  margin: 5px;
}

4. 弹性布局 (`display: flex`)

特点：灵活的一维布局模型，适合子元素的对齐和分布。
应用：导航栏、卡片布局、响应式界面。

.container {
  display: flex;
  justify-content: space-between; /* 水平分布 */
  align-items: center; /* 垂直居中 */
}

5. 网格布局 (`display: grid`)

特点：强大的二维布局模型，可同时控制行和列。
应用：复杂网格、响应式表格。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
  gap: 10px; /* 间距 */
}

6. 隐藏元素 (`display: none`)

特点：元素完全从渲染树中移除，不占据空间。

.hidden {
  display: none; /* 与 visibility: hidden 不同，后者保留空间 */
}

7. 其他常见值

**display: inline-flex**：内联的弹性容器。
**display: inline-grid**：内联的网格容器。
**display: table**：模拟表格布局。
**display: flow-root**：创建 BFC（块级格式化上下文），清除浮动。

示例：水平导航栏

nav {
  display: flex;
  justify-content: center;
}

nav a {
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
}

总结

值	换行	宽高	用途
`block`	✅	✅	独立块元素
`inline`	❌	❌	文本内元素
`inline-block`	❌	✅	水平排列的块
`flex`	-	✅	弹性布局容器
`grid`	-	✅	网格布局容器
`none`	-	-	隐藏元素

合理使用display属性是 CSS 布局的基础，结合flex和grid可以实现现代、复杂的页面结构。