


CSS SpecificityCSS特性、权重、优先级-CSS specificity规则、_html/css_WEB-ITnose
CSS Specificity
As mentioned above, CSS styles follow an order of specificity and point values to determine(确定) when styles override(覆盖) one another or take precedence(优先). Nettuts recently had a nice article in which the point values for css were explained. They are like so:
Elements - 1 points
Classes - 10 points
Identifiers - 100 points
Inline Styling - 1000 points
When in doubt, get more specific with your style declarations(声明). You can also use the !important declaration for debugging(调试) purposes if needed.
Read more about css specificity:
HTML Dog on Specificity
Smashing Magazine on CSS Specificity
中文:
CSS方面很多人都问过我,设定后的CSS后却没有效果,样式失效,样式冲突,
这种问题一般发生于新手,很多情况下是忽视了CSS中的权重specificity,
我试总结关于specificity方面的一些规则、算法及实例
希望对新人能有所帮助~!
作者:孙佳(http://www.sjweb.cn/ 貌似链接不可用了)
关于CSS specificity
CSS 的specificity 特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表
Selectors 选择符 | Syntax Samples 语法 | ensample 示例 | Specificity 特性 |
通配选择符(Universal Selector) | * | *.div { width:560px;} | 0,0,0,0 |
类型选择符(Type Selectors) | E1 | td { font-size:12px;} | 0,0,0,1 |
伪类选择符(Pseudo-classes Selectors) | E1:link | a:link { font-size:12px;} | 0,0,1,0 |
属性选择符(Attribute Selectors) | E1[attr] | h[title] {color:blue;} | 0,0,1,0 |
ID选择符(ID Selectors) | #sID | #sj{ font-size:12px;} | 0,1,0,0 |
类选择符(Class Selectors) | E1.className | .sjweb{color:blue;} | 0,0,1,0 |
子对象选择符(Child Selectors) | E1 > E2 | body > p {color:blue;} | E1+E2 |
相邻选择符(Adjacent Sibling Selectors) | E1 + E2 | div + p {color:blue;} | E1+E2 |
选择符分组(Grouping) | E1,E2,E3 | .td1,a,body {color:blue;} | E1+E2+E3 |
包含选择符(Descendant Selectors) | E1 E2 | table td {color:blue;} | E1+E2 |
规则:
1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。
如:
外部定义指经由或

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Le cache de mise à jour de la page Web du compte officiel, cette chose est simple et simple, et elle est suffisamment compliquée pour en boire un pot. Vous avez travaillé dur pour mettre à jour l'article officiel du compte, mais l'utilisateur a toujours ouvert l'ancienne version. Dans cet article, jetons un coup d'œil aux rebondissements derrière cela et comment résoudre ce problème gracieusement. Après l'avoir lu, vous pouvez facilement faire face à divers problèmes de mise en cache, permettant à vos utilisateurs de toujours ressentir le contenu le plus frais. Parlons d'abord des bases. Pour le dire franchement, afin d'améliorer la vitesse d'accès, le navigateur ou le serveur stocke des ressources statiques (telles que des images, CSS, JS) ou du contenu de la page. La prochaine fois que vous y accédez, vous pouvez le récupérer directement à partir du cache sans avoir à le télécharger à nouveau, et il est naturellement rapide. Mais cette chose est aussi une épée à double tranchant. La nouvelle version est en ligne,

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

Cet article démontre un ajout de bordure PNG efficace aux pages Web à l'aide de CSS. Il soutient que CSS offre des performances supérieures par rapport à JavaScript ou à des bibliothèques, détaillant comment ajuster la largeur, le style et la couleur des bordures pour un effet subtil ou proéminent

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
