首页IT科技css中选择器的优先级(CSS 选择器以及优先级)

css中选择器的优先级(CSS 选择器以及优先级)

时间2025-08-05 05:09:05分类IT科技浏览5154
导读:1. id选择器 <style> #container...

1. id选择器 <style> #container { width: 100px; } </style> <body> <div id="container"></div> </body> 2. class选择器 | 类选择器 <style> .container { width: 100px; } </style> <body> <div class="container"></div> </body> 3. 元素选择器 <style> div { width: 100px; } </style> <body> <div></div> </body> 4. 通用选择器 <style> *{ margin: 0; padding: 0; box-sizing: border-box; } </style> <body> <div></div> </body> 5. 属性选择器 <style> /* 存在title属性的<a> 元素 */ a[title] { color: purple; } /* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */ a[href="https://example.com"] { color: green; } /* 存在href属性并且属性值包含"example"的<a> 元素 */ a[href*=link] { font-size: 2em; } /* 存在href属性并且属性值结尾是".org"的<a> 元素 */ a[href$=.org] { font-style: italic; } /* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */ a[class~=logo] { padding: 2px; } /* 表示带有以 class 命名的属性               ,且属性值是以 link6 开头的元素               。 */ a[class$=link7] { color: red; } </style> <body> <a href="#" title="链接">link1</a> <a href="https://example.com">link2</a> <a href="https://link.com">link3</a> <a href="https://link2.org">link4</a> <a class="link logo">link5</a> <a class="link621312">link6</a> <a class="asdblink7">link7</a> </body> 6. 选择器列表 <style> a, p { color: red; } </style> <body> <a href="#">1</a> <p></p> </body> 7. 后代选择器 <style> ul.container li { color: red; } </style> <body> <ul class="container"> <li>idx</li> <li>idx</li> <li>idx</li> </ul> </body> 8. 一般兄弟选择器 <style> p ~ span { color: red; } </style> <body> <span>This is not red.</span> <p>Here is a paragraph.</p> <code>Here is some code.</code> <span>And here is a span.</span> </body> 8. 相邻兄弟选择器 <style> li:first-of-type + li { color: red; } </style> <body> <ul> <li>One</li> <li>Two!</li> <li>Three</li> </ul> </body> 9. 伪类 <style> p:hover { color: red; } </style> <body> <p>hover</p> </body>

css 优先级

选择器的优先级由四个部分相加

千位: 如果声明在 style 的属性(内联样式)则该位得一分                   。这样的声明没有选择器                   ,所以它得分总是1000      。 百位: 选择器中包含ID选择器则该位得一分           。 十位: 选择器中包含类选择器            、属性选择器或者伪类则该位得一分                    。 个位:选择器中包含元素                     、伪元素选择器则该位得一分         。 选择器 千位 百位 十位 个位 优先级 h1 0 0 0 1 0001 h1 + p::first-letter 0 0 0 3 0003 li > a[href*="en-US"] > .inline-warning 0 0 2 2 0022 #identifier 0 1 0 0 0100 内联样式 1 0 0 0 1000

比较时      ,按照首位开始比较谁大           ,比如千位为1                    ,那么优先级最高         ,如果千位为0       ,那么看百位                     ,有id就加一            ,谁大谁优先级高

1000 > 0100 > 0010 > 0001 > 0000

1000 > 0200 > 0030 > 0009 > 0000

*优先级最低 为 0000

如果使用vscode   ,在定义style时                     ,可以鼠标划入类               ,会显示优先级,如下图:

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
python颜色对照表(python中颜色及其编码!)