CSS 基本选择器&优先级

本文介绍了CSS中的三种选择器:HTML标签名选择器、class选择器和id选择器,并详细解释了它们的区别及应用场景,包括如何定义class和id,以及它们在JavaScript中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

选择器

  选择器就是指定css要作用的标签,呢么标签的名字就是选择器。意为:选择哪个容器。
选择器一共有3种:

a) html 标签名选择器。使用html的标签名。
b) class 选择器。其实使用的标签中的 class 属性。
c) id 选择器。其实使用的是标签中的 id 属性。

  每一个标签都定义了 class 属性和 id 属性。用于对标签进行标识,方便对标签进行操作。在定义中,多个标签的class属性可以相同,而 id 值要唯一,因为 JavaScript 中经常用。

class选择器

  在标签中定义 class 属性并赋值。通过 标签名 .class 值 对该标签进行要是设置。
  相同标签设置不同的样式的时候,用 class 进行区分。

p.class_1 { color:#FF0000; }
p.class_2 { color:#0000FF; }

  不同的标签相同的设置的时候,用 class 进行统一定义。
  

.classname { color:#00FF00; }
<p class="classname">P标签样式</p>
<div class="classname">DIV标签样式</div> 


id选择器

  与 class 选择器类似,但是格式不同,选择器的名称为: #id值

#pid { color:#0000FF; }
<p id="pid">P标签样式</p>

  多个标签同样可以定义相同的 id 值,但是对于 JavaScript 对标签元素的获取就会出错。所以形成习惯,确保id值的唯一性对于以偶的数据库设计也很有好处。

选择器优先级

标签选择器 < 类选择器 < id选择器 < style属性


这里写图片描述

&lt;think&gt;我们根据用户的需求,需要总结CSS常用选择器优先级规则以及常用属性。用户可能是为了学习或复习CSS基础知识,并将其应用于网页设计。因此,我们需要系统化地组织这些知识点,并结合实例进行说明。 参考引用内容: [^1] 提到CSS选择器优先级是指当多个规则作用于同一元素时,根据选择器的特定性和优先级规则决定哪个样式生效。 [^2] 探讨了当多个选择器针对同一元素设置样式时的优先级问题。 [^3] 展示了属性选择器的使用示例。 [^4] 详细列出了基础选择器、复合选择器、属性选择器、伪类选择器、伪元素选择器等,并介绍了优先级等级和计算规则。 [^5] 说明了标签选择器和伪元素选择器的权重相同。 因此,我们将内容分为三个部分: 1. CSS常用选择器及其用法(包括基础选择器、复合选择器、属性选择器、伪类选择器、伪元素选择器等) 2. CSS优先级规则详解(包括优先级等级、权重计算、!important规则等) 3. CSS常用属性介绍(文本、字体、背景、盒模型等) 注意:由于用户之前的问题中提到了很多CSS属性(如文本属性、字体属性、背景属性、盒模型等),我们在第三部分会简要介绍这些常用属性,但不需要过于详细(因为用户可能更关注选择器优先级)。 另外,根据引用内容,我们会适当加入实例代码来演示选择器的使用。 最后,按照要求生成相关问题。&lt;/think&gt;### CSS常用选择器优先级规则及属性详解 #### 一、CSS常用选择器及用法 CSS选择器用于定位HTML元素并应用样式化,主要分为以下几类: 1. **基础选择器** - **元素选择器**:`p { color: blue; }` &rarr; 选择所有`&lt;p&gt;`元素 - **类选择器**:`.warning { background: yellow; }` &rarr; 选择`class=&quot;warning&quot;`的元素 - **ID选择器**:`#header { height: 80px; }` &rarr; 选择`id=&quot;header&quot;`的元素 - **通配符选择器**:`* { margin: 0; }` &rarr; 选择所有元素 2. **复合选择器** ```css /* 后代选择器 */ div p { font-size: 16px; } /* 选择div内所有p */ /* 子选择器 */ ul &gt; li { list-style: none; } /* 仅选择ul的直接子li */ /* 并集选择器 */ h1, h2, h3 { color: #333; } /* 同时选择多个元素 */ /* 相邻兄弟选择器 */ h2 + p { margin-top: 10px; } /* 紧接h2后的p元素 */ ``` 3. **属性选择器** [^3] ```css [title] { border: 1px solid gray; } /* 含title属性的元素 */ [href=&quot;https&quot;] { color: green; } /* href属性值为https */ [class^=&quot;btn-&quot;] { padding: 8px; } /* class&quot;btn-&quot;开头 */ ``` 4. **伪类与伪元素** ```css /* 链接状态 */ a:hover { text-decoration: underline; } /* 表单状态 */ input:focus { border-color: blue; } /* 结构伪类 */ li:nth-child(odd) { background: #f5f5f5; } /* 伪元素 */ p::first-letter { font-size: 150%; } /* 首字母放大 */ ``` --- #### 二、CSS优先级规则详解 当多个规则作用于同一元素时,优先级按以下规则计算: 1. **权重计算规则** [^1][^4] | 选择器类型 | 权重值 | |--------------------|--------| | `!important` | &infin; | | 行内样式(style属性) | 1000 | | ID选择器 | 100 | | 类/属性/伪类选择器 | 10 | | 元素/伪元素选择器 | 1 | | 通配符/继承样式 | 0 | 2. **计算示例** [^2][^5] ```css #nav .item { } /* 权重 = 100 + 10 = 110 */ div ul li a { } /* 权重 = 1&times;4 = 4 */ .menu &gt; li:hover {} /* 权重 = 10 + 1 + 10 = 21 */ ``` 3. **特殊规则** - `!important` 强制优先级最高(慎用) ```css .error { color: red !important; } ``` - **相同权重**:后定义的样式覆盖先定义的 - **继承样式**:权重最低,低于通配符选择器 --- #### 三、CSS常用属性介绍 1. **文本与字体属性** ```css p { font-family: &quot;Microsoft YaHei&quot;, sans-serif; /* 字体栈 */ font-size: 16px; font-weight: bold; line-height: 1.5; /* 行高 */ text-align: center; /* 文本对齐 */ text-decoration: none; /* 下划线控制 */ } ``` 2. **背景与边框属性** ```css .banner { background-color: #f0f0f0; background-image: url(&quot;bg.jpg&quot;); background-size: cover; /* 背景图缩放 */ border: 1px solid #ddd; /* 边框 */ border-radius: 8px; /* 圆角 */ } ``` 3. **盒模型属性**(核心布局) ```css .box { width: 300px; height: 200px; padding: 20px; /* 内边距 */ margin: 10px auto; /* 外边距(上下10px,左右居中) */ box-sizing: border-box; /* 包含边框和内边距的宽高 */ } ``` 4. **布局控制属性** ```css .container { display: flex; /* 弹性布局 */ position: relative; /* 定位基准 */ float: left; /* 浮动布局 */ overflow: hidden; /* 溢出处理 */ } ``` --- ### 关键总结 1. **选择器优先级**是CSS的核心机制,理解权重计算(ID &gt; 类 &gt; 元素)能避免样式冲突[^1][^4] 2. **盒模型**(content-padding-border-margin)是布局基础,`box-sizing: border-box`能简化尺寸计算 3. **弹性布局**(Flexbox)和**网格布局**(Grid)已取代浮动成为现代布局首选方案 4. 避免滥用`!important`,优先通过选择器权重控制样式层级[^2] &gt; 实践建议:使用Chrome开发者工具的&quot;Computed&quot;面板调试样式优先级,实时查看生效规则。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值