[css特性]HTML Learn Data Day 3

这两天真有点忙，期末的实验最难做了！
了解了 css 的一些特性，一直没觉得 css 没多难，但是学着学着发现，选择器这东西像是石山
尤其是选择器权重更是重量级的石山，就没有更简单一点的办法？
有没有懂的能告诉我？
选择器

1. 复合选择器

复合选择器是由两个或多个基础选择器，通过特定的方式组合而成，用于更精准地定位 HTML 元素。

• 后代选择器 (Descendant Selector)：用空格隔开（如 .box p），选择父元素内所有的后代元素。
  
• 子代选择器 (Child Selector)：用 > 隔开（如 .box > p），只选择亲儿子层级的元素。
  
• 并集选择器 (Union Selector)：用逗号 , 隔开，集体声明，多个选择器共享同一套样式。
  
• 交集选择器 (Intersection Selector)：紧密相连（如 div.red），既是 div 又是 .red 的元素（注意：标签名必须写在前面）。
  

2. 伪类选择器 (Pseudo-classes)

伪类本质上是用来描述元素处于某种特定状态的类。
链接伪类（遵循 LVHA 顺序编写）：

• :link：未访问的链接状态。
  
• :visited：已访问后的链接状态。
  
• :hover：鼠标悬停状态（最常用）。
  
• :active：鼠标点击按下但未松开的状态。
  

补充知识：除了链接，还有 结构伪类（如 :first-child, :nth-child(n)）和 行为伪类（如 :focus 焦点状态），它们在布局中也非常高效。

CSS 三大特性

1. 继承性

子元素会继承父元素的某些样式。

• 哪些能继承：主要是文本相关的属性，如 font-size, font-family, color, line-height, text-align。
  
• 哪些不能继承：布局相关的属性，如 margin, padding, border, width, height 等。
  

2. 层叠性

当同一个元素被设置了多个相同的属性时，CSS 的冲突处理机制。

• 如果选择器权重相同，则遵循就近原则：写在 CSS 样式表下方的属性会覆盖上方的属性。
  

3. 优先级/权重

优先级决定了哪条规则最终生效。我们可以用一套“权重权重计分表”来快速判断：
选择器类型权重权重（数值表示）说明!important\(\infty\) (无穷大)强制生效，尽量少用行内样式\((1, 0, 0, 0)\)写在标签 style 属性里ID 选择器\((0, 1, 0, 0)\)如 #header类/伪类/属性选择器\((0, 0, 1, 0)\)如 .content, :hover标签选择器\((0, 0, 0, 1)\)如 div, p通配符/继承\((0, 0, 0, 0)\)* 权重最低

• 口诀：选中的范围越精确，优先级越高。
  
• 复合选择器计算：权重会累加。例如 nav ul li 的权重是 \(0,0,0,3\)；而 .nav ul li 是 \(0,0,1,2\)。后者胜出。
  

背景属性

CSS 的 background 属性不仅能设置颜色，还能精细控制图片的显示。

1. .the-image {
2.     width: 300px;
3.     height: 300px;
4.     background-color: pink; /* 背景颜色 */
5.     background-image: url(../image/cuteReisentyan.jpg); /* 背景图片路径 */
6.     background-repeat: no-repeat; /* 不平铺/不重复 */
7.     background-size: contain; /* 图片缩放模式：cover(充满) 或 contain(完整显示) */
8.     background-position: center center; /* 图片水平垂直居中 */
9.     background-attachment: fixed; /* 背景固定，不随页面滚动 */
10. }

复制代码

补充：背景复合写法（Shorthand） 为了简化代码，通常写成一行： background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 / 背景尺寸; (注：背景尺寸必须紧跟在位置后面并用斜杠隔开)
元素显示模式 (Display Mode)

理解显示模式是掌握网页布局（尤其是后续 Flex 布局）的前提。

• 块级元素 (Block-level)
  
  
  
  • 代表：div, h1~h6, p, ul, li。
    
  • 特点：独占一行；宽度默认是父级 100%；可以设置宽、高、内外边距。
    
  
  
• 行内元素 (Inline)
  
  
  
  • 代表：span, a, i, em。
    
  • 特点：一行可以显示多个；设置宽高无效；大小由内容撑开。
    
  
  
• 行内块元素 (Inline-block)
  
  
  
  • 代表：img, input, td。
    
  • 特点：一行显示多个，但可以设置宽高和内外边距。
    
  
  

模式转换：使用 display 属性

• display: block;：转换为块级（常用：让  标签可设置宽高）。
  
• display: inline;：转换为行内。
  
• display: inline-block;：转换为行内块。
  
• display: none;：隐藏元素（不占位）。
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！