[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)(1, 0, 0, 0)(1,0,0,0)	写在标签`style`属性里
ID 选择器	(0,1,0,0)(0, 1, 0, 0)(0,1,0,0)	如`#header`
类/伪类/属性选择器	(0,0,1,0)(0, 0, 1, 0)(0,0,1,0)	如`.content`,`:hover`
标签选择器	(0,0,0,1)(0, 0, 0, 1)(0,0,0,1)	如`div`,`p`
通配符/继承	(0,0,0,0)(0, 0, 0, 0)(0,0,0,0)	`*`权重最低

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

背景属性

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

CSS

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

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

元素显示模式 (Display Mode)

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

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