HTML CSS零基础入学宝典：css复杂选择器、权重计算问题，css基础属性

# 1. HTML CSS基础入门 ## 1.1 HTML CSS简介在网页开发中，HTML和CSS是两种必不可少的技术。HTML（HyperText Markup Language）是用来描述网页结构的标记语言，而CSS（Cascading Style Sheets）则是用来描述网页样式的样式表语言。HTML负责网页的内容，而CSS负责网页的呈现样式。 ## 1.2 HTML CSS基础语法 ### HTML基础语法 HTML由一系列的标签组成，用来描述网页的结构。一个基本的HTML结构如下所示： ```html <!DOCTYPE html> <html> <head> <title>网页标题</title> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落</p> </body> </html> ``` ### CSS基础语法 CSS通过选择器和声明来应用样式。一条基本的CSS规则由选择器和声明块组成，如下所示： ```css h1 { color: red; font-size: 24px; } ``` ## 1.3 布局与样式 HTML与CSS的分离是前端开发的核心思想之一。通过CSS可以实现各种布局样式，如居中布局、网格布局等。在实际开发中，开发者需要结合HTML的语义化标签和CSS的布局与样式来实现页面的设计与展示。以上便是HTML与CSS基础入门的内容，下一节我们将深入介绍CSS复杂选择器。 # 2. CSS复杂选择器在CSS中，选择器是一种用于定位HTML元素并为其应用样式的模式。复杂选择器是由多个简单选择器组合而成，可以更精确地选择到需要样式的元素。接下来将介绍CSS复杂选择器的相关内容。 ### 2.1 CSS选择器简介 CSS选择器用于定义样式规则的范围，让样式规则作用于指定的HTML元素。常见的CSS选择器包括标签选择器、类选择器、ID选择器等。 ### 2.2 复合选择器复合选择器（Compound Selectors）是由多个简单选择器组合而成的选择器，可以更准确地选中需要样式的元素。例如： ```css /* 选择class为"btn"的button元素 */ button.btn { background-color: green; } /* 选择div内部的p元素 */ div p { font-size: 16px; } ``` ### 2.3 属性选择器属性选择器（Attribute Selectors）可以根据元素的属性值来选择元素。常见的属性选择器有： - `[attr]`：选择包含指定属性的元素 - `[attr=value]`：选择属性值为指定值的元素 - `[attr^=value]`：选择属性值以指定值开头的元素 - `[attr$=value]`：选择属性值以指定值结束的元素 - `[attr*=value]`：选择属性值中包含指定值的元素 ### 2.4 伪类选择器伪类选择器（Pseudo-class Selectors）用于向某些选择器添加特殊的状态，例如悬停状态或者访问过的链接状态。常见的伪类选择器有： - `:hover`：鼠标悬停状态 - `:active`：鼠标点击按下状态 - `:visited`：访问过的链接 - `:nth-child(n)`：选择父元素的第n个子元素通过合理灵活地运用复杂选择器，可以更好地控制页面元素的样式，实现更丰富多彩的界面效果。 # 3. CSS权重计算问题在CSS中，样式的应用是根据选择器的权重来确定的。了解CSS选择器的权重是非常重要的，因为它将影响到哪些样式将被应用到元素上。下面我们就来详细介绍CSS权重的计算问题。 #### 3.1 CSS权重概述 CSS的选择器有不同的优先级，简单的规则是：内联样式 > ID选择器 > 类选择器/属性选择器/伪类 > 标签选择器。当有多个样式作用于同一个元素时，就需要根据这个优先级来确定最终生效的样式。 #### 3.2 内联样式和ID选择器权重内联样式（在元素标签内部使用style属性定义的样式）的权重最高，它会覆盖其他任何类型的样式。而ID选择器的权重次之，一个ID选择器的权重高于任何其他类型的选择器。 ```html <!DOCTYPE html> <html> <head> <style> #unique-id { color: red; /* ID选择器样式 */ } </style> </head> <body> <p id="unique-id" style="color: blue;">这是一个段落</p>  <p class="common-class">这是另一个段落</p> </body> </html> ``` 在上面的例子中，第一个段落的颜色将为红色，因为ID选择器的权重高于内联样式。 #### 3.3 类选择器和标签选择器权重类选择器、属性选择器和伪类的权重相同，但