CSS 选择符有哪些?哪些样式可以继承?优先级算法如何计算? CSS3新增伪类有那些?

本文介绍了CSS中的各种选择器,包括ID选择器、类选择器等,并详细讲解了样式的继承特性及优先级规则。此外,还涉及了CSS3新增的一些伪类选择器。

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

1、选择符:

1)id选择器(#myid)

2)类选择器(.myclass)

3)标签选择器(div,h1,p)

4)相邻选择器(h1+p)

5)子选择器(ul>li)

6)后代选择器(li a)

7)通配符选择器(*)

8)属性选择器(a[rel="external"])

9)伪类选择器(a:hover,li:nth-child)


2、样式继承

1)可以继承的样式:font-size, font-family, color, text-indent(等字体类样式)

2)不可继承的样式:border, padding, margin, width, height


3、优先级比较

1)优先级就近原则,同权重情况下样式定义最近者为准;

2)载入样式以最后载入的定位为准;

3)!important>内联 >  id >伪类> class > tag;

4)important 比 内联优先级高,但内联比 id 要高;

5)权重计算:

(1)内联,如style=""——1000,

(2)id,如#content——100,

(3)类、伪类和属性选择器,如.content——10,

(4)标签选择器和伪元素选择器,如div p——1

(5)通配符、子选择器和相邻选择器,如*,>,+——0


4、CSS3新增的伪类

1)p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素;

2)p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素;

3)p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素;

4)p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素;

5)p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素;

6):checked    单选框或复选框被选中




<think>我们正在回答用户关于CSS选择器型及其优先级计算的问题。根据用户提供的引用内容,我们可以整理出以下信息: 1. **CSS选择器的型**: - 引用[1]和[3]提到了常见的选择器型:ID选择器、选择器、属性选择器、选择器、元素选择器、元素选择器、通配符选择器等。 - 引用[4]还提到CSS3新增的选择器,如层次选择器(例如`p~ul`)、选择器(`:first-of-type`, `:last-of-type`, `:only-of-type`, `:only-child`, `:nth-child(n)`, `:nth-last-of-type(n)`, `:last-child`, `:root`, `:empty`, `:enabled`, `:disabled`, `:checked`, `:not(selector)`)和属性选择器(`[attribute*=value]`, `[attribute^=value]`, `[attribute$=value]`)。 2. **优先级计算**: - 引用[1]和[3]详细说明了优先级规则。优先级由高到低排列为: - `!important`(最高优先级) - 内联样式(直接在元素的style属性中定义) - ID选择器 - 选择器、属性选择器、选择器(三者优先级相同) - 元素选择器、元素选择器(两者优先级相同) - 通配符选择器、继承优先级最低) - 引用[3]还给出了优先级计算方法:将选择器分解后,计算权重(4位数字,从左到右分别是内联样式、ID选择器、/属性/、元素/元素),然后比较权重值。 因此,我们可以将回答分为两部分:选择器型和优先级计算。 ### 选择器型 根据引用内容,CSS选择器可以分为以下几: 1. **基本选择器**: - 元素选择器(如`p`) - 选择器(如`.class`) - ID选择器(如`#id`) - 通配符选择器(如`*`) 2. **属性选择器**(如`[attribute]`, `[attribute=value]`, `[attribute*=value]`等) 3. **选择器**(如`:hover`, `:first-child`, `:nth-child(n)`等) 4. **元素选择器**(如`::before`, `::after`) 5. **组合选择器**: - 后代选择器(空格,如`div p`) - 子元素选择器(`>`,如`div > p`) - 相邻兄弟选择器(`+`,如`div + p`) - 通用兄弟选择器(`~`,如`div ~ p`) 6. **CSS3新增选择器**(如引用[4]中提到的层次选择器、新的选择器等) ### 优先级计算 优先级是通过权重(specificity)来计算的,权重由4个部分(a, b, c, d)组成: - a: 内联样式的数量(1或0) - b: ID选择器的数量 - c: 选择器、属性选择器、选择器的数量 - d: 元素选择器、元素选择器的数量 注意:通配符选择器(`*`)和继承样式没有权重,即0,0,0,0。 计算规则: 1. 每个选择器按上述规则计算权重,然后相加(注意:不会进位,即每个部分独立计算)。 2. 比较时从左到右依次比较a、b、c、d的值,数值大的优先级高。 3. 如果权重相同,则后出现的样式覆盖先出现的样式。 4. `!important`具有最高优先级,会覆盖所有其他声明(包括内联样式),但应谨慎使用。 示例: - `#header .nav li`:1个ID选择器(b=1),1个选择器(c=1),1个元素选择器(d=1) → 权重为0,1,1,1 - `div p`:2个元素选择器(d=2) → 权重为0,0,0,2 因此,第一个选择器的优先级更高。 另外,引用[2]中给出了一个例子:选择器的优先级大于元素选择器。 ### 回答结构 1. 先介绍CSS选择器的型(分列出)。 2. 再详细说明优先级计算规则(包括权重计算和比较规则)。 3. 给出示例帮助理解。 注意:在回答中适当引用用户提供的引用内容(在末尾添加引用标识)。</think>### CSS 选择器型及优先级计算详解 #### 一、CSS 选择器型 根据功能和应用场景,CSS 选择器可分为以下 7 大: 1. **基本选择器** - 元素选择器:`p`, `div` - 选择器:`.class` - ID 选择器:`#id` - 通配符选择器:`*`(匹配所有元素) 2. **属性选择器** - `[attr]`:存在属性 - `[attr=value]`:精确匹配 - `[attr^=value]`:开头匹配(CSS3) - `[attr$=value]`:结尾匹配(CSS3) - `[attr*=value]`:包含匹配(CSS33. **选择器** - 状态:`:hover`, `:active`, `:focus` - 结构:`:first-child`, `:last-child` - CSS3 新增: - `:nth-child(n)` - `:only-of-type` - `:enabled`/`:disabled` - `:not(selector)`(反向选择) 4. **元素选择器** - `::before`, `::after` - `::first-line`, `::first-letter` - `::selection`(文本选中样式) 5. **组合选择器** - 后代:`div p` - 子元素:`div > p` - 相邻兄弟:`div + p` - 通用兄弟:`div ~ p`(CSS3) 6. **层次选择器**(CSS3) - `p~ul`:选择前面有 p 的 ul 7. **特殊选择器** - `:root`(HTML 根元素) - `:empty`(空元素) - `:checked`(选中表单元素)[^4] #### 二、优先级计算规则 优先级由 **权重累加值** 决定,权重分为 4 个等级(从高到低): | 选择器型 | 权重值 | 示例 | |--------------------------|--------|----------------| | 1. `!important` | ∞ | `color: red !important;` | | 2. 内联样式 | 1,0,0,0| `<p style="...">` | | 3. ID 选择器 | 0,1,0,0| `#header` | | 4. /属性/选择器 | 0,0,1,0| `.btn`, `[type="text"]`, `:hover` | | 5. 元素/元素选择器 | 0,0,0,1| `div`, `::before` | | 6. 通配符/继承 | 0,0,0,0| `*`, 继承样式 | **计算步骤**: 1. 将选择器拆分为独立组件 2. 按权重等级累加每个组件的值 3. **从左到右** 逐级比较权重值(无进位机制) 4. 权重相同时,后定义的样式生效[^1][^3] #### 三、优先级计算示例 ```css /* 权重: 0,1,0,1 (ID + 元素) */ #nav li { color: blue; } /* 权重: 0,0,2,1 (×2 + 元素) */ .menu .item { color: red; } /* 生效(0,0,2,1 > 0,1,0,1) */ /* 权重: 0,0,1,0 () */ a:hover { text-decoration: underline; } ``` > 💡 **关键规则**: > - 1 个 ID 选择器 > 100 个选择器(因比较机制是逐级判断) > - `!important` 可覆盖所有规则(慎用) > - 内联样式优先级高于外部样式表[^3] #### 四、CSS3 新增选择器优先级 新增选择器按基础型归计算: - 层次选择器 `p~ul` → 元素选择器(0,0,0,2) - 属性选择器 `[href^="https"]` → 属性选择器(0,0,1,0) - `:nth-child(2)` → 选择器(0,0,1,0)[^4] > 优先级本质是 **选择器特异性(Specificity)** 的量化体现,理解权重计算可避免过度依赖 `!important`[^1][^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值