企业官网建设流程全解析

一、属性选择器

1.1 基本语法

[属性名] {} /* 选择含有指定属性的元素 */ [属性名=属性值] {} /* 选择含有指定属性和属性值的元素 */ [属性名^=属性值] {} /* 选择属性值以指定值开头的元素 */ [属性名$=属性值] {} /* 选择属性值以指定值结尾的元素 */ [属性名*=属性值] {} /* 选择属性值含有某值的元素 */

1.2 应用示例

[title="a"] { background-color: pink; /* title属性值为"a"的元素 */ } [title^="ab"] { background-color: green; /* title属性值以"ab"开头的元素 */ } [title$="ab"] { color: orange; /* title属性值以"ab"结尾的元素 */ } [title*="ab"] { font-size: 40px; /* title属性值包含"ab"的元素 */ }

1.3 title属性说明

当鼠标移入设置了title属性的标签时，会出现提示信息，显示对应的title属性值。

二、伪类选择器

2.1 顺序类伪类（第一类写法）

:first-child /* 第一个子元素 */ :nth-child(2) /* 第二个子元素 */ :nth-child(n) /* 选中所有子元素 */ :nth-child(2n) /* 偶数位置元素 */ :nth-child(2n+1) /* 奇数位置元素 */ :nth-child(an+b) /* nth = {b, a+b, 2a+b, ..., an+b} */ :last-child /* 最后一个子元素 */

2.2 顺序类伪类（第二类写法）

:first-of-type /* 同类别中第一个子元素 */ :nth-of-type(2) /* 同类别中第二个子元素 */ :nth-of-type(n) /* 同类别中所有子元素 */ :last-of-type /* 同类别中最后一个子元素 */

2.3 区别说明

2.4 特殊伪类

:only-child /* 唯一子元素 */ :empty /* 空元素 */ :not(选择器) /* 否定伪类，将符合条件的元素从选择器中去除 */

2.5 应用示例

ul > li:not(.l1) { color: red; /* 选择ul下所有li，除了class为l1的 */ }

三、链接相关伪类

3.1 链接状态伪类

:link {} /* 未访问过的链接 */ :visited {} /* 已访问过的链接（只能修改颜色） */ :hover {} /* 鼠标移入状态 */ :active {} /* 鼠标点击状态 */

3.2 注意事项

• :link和:visited只针对超链接标签

• :visited由于隐私原因，只能修改颜色属性

• :hover和:active适用于所有标签

四、伪元素选择器

4.1 基本语法

::before {} /* 在元素内容之前插入内容 */ ::after {} /* 在元素内容之后插入内容 */

4.2 特殊说明

• ::before和::after必须结合content属性使用

• 这两个伪元素是唯一可以在CSS中更改页面结构的

4.3 应用示例

.element::after { content: ""; display: block; height: 8px; background-color: #eee; }

五、样式继承

5.1 继承特性

为一个元素设置的样式，同时也会应用到它的后代元素上。

优势：方便开发，将通用样式统一设置到共同祖先元素上。

5.2 可继承属性

5.3 不可继承属性

5.4 注意事项

• 不是所有样式都会被继承

• 样式的继承优先级很低，任意选择器都可以覆盖

六、选择器优先级（权重）

6.1 权重计算规则

6.2 特殊情况处理规则

6.2.1 交集选择器

各个选择器的权重需要累加计算。

/* 权重：元素选择器(1) + 类选择器(10) = 11 */ p.p1 { background-color: yellow; } /* 权重：元素选择器(1) + 类选择器(10) + 类选择器(10) = 21 */ p.p1.p2 { background-color: blue; }

6.2.2 并集选择器

各个选择器的权重单独计算，不累加。

/* p 和 .p1 的权重分别计算，互不影响 */ p, .p1 { background-color: aqua; }

6.2.3 相同权重处理

如果选择器的权重计算后相同，则以样式表中靠下的样式为准。

/* 权重相同（都是1），后者生效 */ p { background-color: red; } p { background-color: blue; /* 这个样式生效 */ }

6.2.4 权重累加上限

选择器的权重再累加，也不会超过它的上一级选择器权重。

/* 11个类选择器（10×11=110）仍然不会超过1个ID选择器（100） */ .p1.p2.p3.p4.p5.p6.p7.p8.p9.p10.p11 { background-color: yellow; /* 权重110 */ } #p2 { background-color: pink; /* 权重100，但优先级高于上面的110？ */ /* 注意：实际上110 < 100是不对的，这里只是说明上限概念 */ }

补充说明：权重累加上限的意思是，无论多少个类选择器叠加，都不会超过一个ID选择器的优先级。但在实际计算中，110确实大于100，所以上述例子中类选择器会覆盖ID选择器。这里的“上限”是指不同层级之间的跨越限制，而非数值比较。

6.3 !important规则

background-color: pink !important; /* 最高优先级 */

6.3.1 使用场景

• 不易被修改的样式，也不想被别的样式覆盖

• 测试样式未生效是否是选择器权重的问题

6.3.2 使用建议

• 慎用​!important，它会破坏正常的层叠规则

• 仅在确实需要覆盖其他样式时使用

• 优先考虑通过提高选择器特异性来解决问题

6.4 实际应用示例

<!-- HTML结构 --> <div> <p class="p1 p2 p3 p4 p5" id="p2" style="background-color: yellowgreen;"> 我是div中的p元素 </p> </div>

/* 样式优先级分析： 1. 内联样式：1000 （生效：黄色绿色背景） 2. !important：最高优先级 （生效：粉色背景，覆盖内联样式） 3. ID选择器：100 （被!important覆盖） 4. 类选择器：10×5=50 （被ID选择器覆盖） 5. 元素选择器：1 （被类选择器覆盖） */

6.5 面试题准备

常见面试题：你常用的选择器有哪些？请说说它们的优先级。

回答要点：

1. 按照权重从高到低列举选择器类型

2. 说明权重计算规则和特殊情况

3. 提及!important的作用和使用注意事项

4. 举例说明权重冲突的解决方法

七、元素显示类型

7.1 元素分类

7.2 display属性

display: inline; /* 转为行内元素 */ display: block; /* 转为块元素 */ display: inline-block; /* 转为行内块元素 */ display: none; /* 隐藏元素 */

7.3 使用建议

• 标签有自己的分类、特点和语义

• 如无必要，不要强行转换显示类型

八、总结

本文详细介绍了CSS选择器的进阶内容：

1. 属性选择器：通过属性精确定位元素

2. 伪类选择器：处理元素的状态和位置

3. 伪元素选择器：在CSS中创建页面结构

4. 样式继承：了解哪些属性可以继承

5. 选择器优先级：掌握权重计算规则

6. 元素显示类型：理解块级、行内和行内块元素

掌握这些知识后，你将能够更加灵活地控制页面样式，解决各种样式冲突问题。