第八章 优先级和css3

优先级
选择器优先级:
基本选择器:id>类名>标签名>*
复杂选择器:id>class>tagName

id选择器个数不相等 id个数多的优先级高
id选择器个数相等则看class个数,class个数相等 再看tagName个数

以下两种选择器优先级一样 不分先后
  1. #warp ul li .list{}
  2. .warp ul li #list{}

    样式优先级:行内样式>内部样式>外部样式


css3
  1. border-radius 设置圆角 正方形可以设置成圆形 矩形可以设置成椭圆
  2. box-shadow :水平偏移量 垂直偏移量 模糊度 阴影大小 阴影颜色 悲怒阴影
  3. overflow:内容溢出
    值:visible 默认值
    hidden 隐藏
    scroll 出现滚动条
    auto 根据内容决定是否出现滚动条
    overflow-x overflow-y
CSS 优先级是指当多个 CSS 规则应用到同一个元素时,浏览器决定使用哪个规则来显示元素样式的规则。以下是详细介绍: ### 基本优先级规则 - **祖先样式优先级**:最近的祖先样式比其他祖先样式优先级高。例如,元素的直接父元素的样式会比更上层祖先元素的样式优先级高[^1]。 - **直接样式与祖先样式**:“直接样式”比“祖先样式”优先级高。直接应用到元素上的样式会覆盖从祖先元素继承来的样式[^1]。 - **不同选择器类型优先级**:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。例如,使用内联样式 `style="color: red;"` 会比通过 ID 选择器 `#element { color: blue; }` 定义的样式优先级高[^1]。 ### 特殊性值计算 通过计算选择符中不同类型选择器的个数来确定优先级。具体为计算选择符中 ID 选择器的个数(a),类选择器、属性选择器以及伪类选择器的个数之(b),标签选择器伪元素选择器的个数之(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照“就近原则”来判断[^1]。 ### 四个等级的权值 - **第一等级(内联样式)**:如 `style=""`,权值为 1000。内联样式直接写在 HTML 元素的 `style` 属性中,具有很高的优先级[^3]。 - **第二等级(ID 选择器)**:如 `#content`,权值为 100。ID 选择器通过元素的 ID 属性来选择元素,优先级较高[^3]。 - **第三等级(类、伪类属性选择器)**:如 `.content`,权值为 10。这些选择器用于选择具有特定类名、处于特定状态或具有特定属性的元素[^3]。 - **第四等级(标签选择器伪元素选择器)**:如 `div p`,权值为 1。标签选择器通过元素的标签名来选择元素,优先级相对较低[^3]。 ### !important 的使用 属性后面的 `!important` 拥有最高样式优先级。它可以让当前 CSS 属性的优先级提升至最高,即比内联的样式(`style`)更高。例如 `.li-blue{ color: blue!important; }` 会覆盖其他普通的样式规则,即使是内联样式也可能被其覆盖[^5]。 ### 示例代码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Priority Example</title> <style> /* 标签选择器 */ div { color: green; } /* 类选择器 */ .text { color: blue; } /* ID 选择器 */ #special-text { color: red; } /* 内联样式优先级高于 ID 选择器 */ /* 若添加 !important 则优先级更高 */ </style> </head> <body> <div class="text">This is a normal text.</div> <div id="special-text">This is a special text.</div> <div style="color: purple;">This is an inline - styled text.</div> </body> </html> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值