国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Heim Web-Frontend HTML-Tutorial CSS特異性(CSS Specificity)的細節(jié)之CSS樣式權重的計算與理解(CSS樣式覆蓋規(guī)則)_html/css_WEB-ITnose

CSS特異性(CSS Specificity)的細節(jié)之CSS樣式權重的計算與理解(CSS樣式覆蓋規(guī)則)_html/css_WEB-ITnose

Jun 24, 2016 am 11:52 AM

本篇講解CSS特異性(CSS Specificity)的細節(jié),也就是CSS樣式選擇器的權重計算

通過計算選擇器的權重(weight)最終決定哪個選擇器將獲得優(yōu)先權去覆蓋其他選擇器的樣式設定,即“優(yōu)先原則(priority rules)”!

?

首先,我們來一個簡單的例子:

<body>    <ul id="summer-drinks">       <li class="favorite">First section</li>       <li>Second section</li>       <li>Third section</li>    </ul></body>

設置樣式:

<style>    ul#summer-drinks li {        font-weight: normal;        font-size: 12px;        color: black;    }    .favorite {        color: red;        font-weight: bold;    }</style>

截圖:

然后查看效果我們發(fā)現(xiàn),效果并不是我們想要的,我們favorite列文本文字并沒有變紅和加粗,這兒肯定出了一些意想不到的事,注意下面我們可以知道,我們的麻煩出現(xiàn)在這兒:

    ul#summer-drinks li {        font-weight: normal;        font-size: 12px;        color: black;    }

兩個不同的CSS選擇器同時設置了文字的color和font-weight,而僅僅font-size只聲明了一次,因此我們可以很清晰的看到效果。對于“沖突”,瀏覽器必須做出選擇,哪一個選擇器樣式最終產(chǎn)生效果。也就引出了以下一系列標準特異性(即權重優(yōu)先級)的規(guī)則

計算CSS樣式選擇器優(yōu)先級的“值”

  先看看實際選擇器腳色扮演優(yōu)先級:

  在這里我們形象的設定:

    1、如果元素擁有內(nèi)聯(lián)樣式(inline style),那么給內(nèi)聯(lián)樣式1000點  例如:

    2、對于每個ID,我們給他0100點  例如:#div

    3、對于每個Class、偽類(pseudo-classes)或?qū)傩赃x擇器,我們給他0010點  例如:.classes,[attributes]和:hover,:focus

    4、對于每個具體標簽元素引用和偽元素(pseudo-elements),我們給他0001點  例如::before和:after

這里數(shù)字你可以看成一般的數(shù)字計數(shù)什么的,例如0100,就可以看做100,只是下面運用形象點而是用0100

下面舉例說明:

例一:

      ul#nav li.active a

例二:

      body.ie7 .col_3 h2~h2

例三:

      #footer *:not(nav) li

注意:“ :not() ”自身沒有權重值(這里權重值是指上面的數(shù)點,像0100),僅括號內(nèi)的有權重值!

例四:

      

  • 例五:

          ul > li ul li ol li:first-letter

    例六:

    A:

    div#demo{background-image:url(n.gif);}

    B:

    div[id="demo"]{background-image:url(n.gif)}

      代碼:

    <!DOCTYPE html><html>    <head>        <style>            div{                height:100px;                width:100px;            }            div#demo{                background:red;            }            div[id="demo"]{                background:green;            }        </style>    </head>    <body>        <div id="demo"></div>    </body></html>

      截圖:

    這里可以驗證出:A情況中的權重比B中的權重高一點,也就是ID選擇器的權重比屬性選擇器權重高

    ?

    重點注意:

        1、*選擇器沒有權重值,當然我們可以形象設定他的權重值為0000點

        2、我們設定偽元素(例如:“ :first-line ”)權重值為0001點,而設定偽類權重值為0010點

        3、偽類中“?:not() ”本身不計權重值,而在其括號里的則相應設定權重值

        4、“?!important ”比較高級,權重比內(nèi)聯(lián)樣式的權重還高,他的樣式設定可以覆蓋內(nèi)聯(lián)樣式的樣式,當然了,我們可以用相同的“?!important ”去設定不同樣式來      覆蓋先前的“?!important ”設定的樣式(這里需要知道,同一樣式文件中,相同選擇器多次聲明樣式時,是后聲明的樣式也就是最新聲明的覆蓋前面聲明的樣式),這里我們也可以形象的設定“?!important ”的權重值為10000點

        5、ID選擇器權重比屬性選擇器權重高一點  例:如上例六

    ?

    參考文章:

    ?  Chris Coyier的Specifics on CSS Specificity

       Vitaly Friedman的CSS Specificity: Things You Should Know    

    至此,CSS選擇器設定樣式的優(yōu)先級計算也就結(jié)束了,如果寫的不好大家可以在評論中補充~~

    謝謝~~

  • Erkl?rung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

    Hei?e KI -Werkzeuge

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    Video Face Swap

    Video Face Swap

    Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

    Hei?e Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    Hei?e Themen

    PHP-Tutorial
    1502
    276
    Implementieren klickbarer Schaltfl?chen mithilfe des HTML -Schaltfl?chenelements Implementieren klickbarer Schaltfl?chen mithilfe des HTML -Schaltfl?chenelements Jul 07, 2025 am 02:31 AM

    Um HTML -Schaltfl?chenelemente zu verwenden, um anklickbare Schaltfl?chen zu erreichen, müssen Sie zun?chst die grundlegende Verwendung und gemeinsame Vorsichtsma?nahmen beherrschen. 1. Erstellen Sie Schaltfl?chen mit Tags und definieren Sie Verhaltensweisen durch Typattribute (z. B. Schaltfl?che, Senden, Zurücksetzen), die standardm??ig übermittelt werden. 2. Fügen Sie interaktive Funktionen über JavaScript hinzu, die über ID geschrieben werden k?nnen, um Ereignish?rer zu verbinden, um die Wartung zu verbessern. 3.. Verwenden Sie CSS, um Stile anzupassen, einschlie?lich Hintergrundfarbe, Grenze, abgerundete Ecken und Schwebe-/aktive Statusffekte, um die Benutzererfahrung zu verbessern. 4. Achten Sie auf h?ufige Probleme: Stellen Sie sicher, dass das behinderte Attribut nicht aktiviert ist. Meistere das

    Konfigurieren von Dokumentmetadaten im HTML -Kopfelement Konfigurieren von Dokumentmetadaten im HTML -Kopfelement Jul 09, 2025 am 02:30 AM

    Metadaten in HTMLhead sind entscheidend für das Verhalten von SEO-, Social Sharing und Browser. 1. Setzen Sie den Seitentitel und die Beschreibung, verwenden Sie es und halten Sie es pr?zise und einzigartig. 2. Fügen Sie OpenGraph- und Twitter -Karteninformationen hinzu, um die Auswirkungen auf die soziale Freigabe zu optimieren, auf die Bildgr??e zu achten und Debugging -Tools zum Testen zu verwenden. 3. Definieren Sie die Einstellungen für den Zeichensatz und die Ansichtsfenster, um sicherzustellen, dass die Unterstützung mehrsprachiger Unterstützung an das mobile Terminal angepasst wird. 4. Optionale Tags wie das Urheberrecht des Autors, die Kontrolle der Roboter und die kanonische Verhindern doppelter Inhalte sollten auch vernünftig konfiguriert werden.

    Bestes HTML -Tutorial für Anf?nger im Jahr 2025 Bestes HTML -Tutorial für Anf?nger im Jahr 2025 Jul 08, 2025 am 12:25 AM

    Tolearnhtmlin2025, ChooseatutororyThatbalancesHands-On-Practionwithmoderit und IntegrateCsSandjavaScriptbasics.1.PrioritizeHands-OnLearningWithStep-by-Stepprojects-?hnlich

    HTML für E -Mail -Vorlagen -Tutorial HTML für E -Mail -Vorlagen -Tutorial Jul 10, 2025 pm 02:01 PM

    Wie mache ich HTML -Mail -Vorlagen mit guter Kompatibilit?t? Zun?chst müssen Sie eine Struktur mit Tabellen erstellen, um die Verwendung von Div -Flex- oder Netzlayout zu vermeiden. Zweitens müssen alle Stile eingefügt werden und k?nnen sich nicht auf externe CSS verlassen. Dann sollte das Bild mit ALT -Beschreibung hinzugefügt werden und eine ?ffentliche URL verwenden, und die Schaltfl?chen sollten mit einer Tabelle oder TD mit Hintergrundfarbe simuliert werden. Schlie?lich müssen Sie die Details zu mehreren Clients testen und anpassen.

    Wie assoziieren Sie Bildunterschriften mit Bildern oder Medien mithilfe der HTML -Figur und der Figcaption -Elemente? Wie assoziieren Sie Bildunterschriften mit Bildern oder Medien mithilfe der HTML -Figur und der Figcaption -Elemente? Jul 07, 2025 am 02:30 AM

    Die Verwendung von HTML -Summen erm?glicht die intuitive und semantische Klarheit, Bildern oder Medien einen Bildunterschriftentext hinzuzufügen. 1.. Wird verwendet, um unabh?ngige Medieninhalte wie Bilder, Videos oder Codebl?cke einzuwickeln; 2. Es wird als erkl?render Text platziert und kann über oder unter den Medien befinden. 3. Sie verbessern nicht nur die Klarheit der Seitenstruktur, sondern verbessern auch die Zug?nglichkeit und den SEO -Effekt. 4. Wenn Sie es verwenden, sollten Sie darauf achten, Missbrauch zu vermeiden, und sich auf Inhalte bewerben, die eher von Beschreibung als von gew?hnlichen dekorativen Bildern betont und begleitet werden müssen. 5. Das Alt -Attribut, das nicht ignoriert werden kann, das sich von Figcaption unterscheidet; 6. Die Figur ist flexibel und kann nach Bedarf oben oder unten in der Figur platziert werden. Wenn Sie diese beiden Tags korrekt verwenden, k?nnen Sie semantische und leicht verst?ndliche Webinhalte erstellen.

    Wie kann ich mit Formularen in HTML ohne Server umgehen? Wie kann ich mit Formularen in HTML ohne Server umgehen? Jul 09, 2025 am 01:14 AM

    Wenn es keinen Backend-Server gibt, kann die Einreichung von HTML-Formular weiterhin über Front-End-Technologie oder Drittanbieterdienste verarbeitet werden. Zu den spezifischen Methoden geh?ren: 1. JavaScript verwenden, um die Einreichungen von Formulareingaben abzufangen, um die Eingabeüberprüfung und das Benutzerfeedback zu erhalten. Die Daten werden jedoch nicht bestehen. 2. Verwenden Sie serverlose Formulardienste von Drittanbietern wie F?rse, um Daten zu sammeln und E-Mail-Benachrichtigungs- und Umleitungsfunktionen bereitzustellen. 3.. Verwenden Sie LocalStorage, um tempor?re Clientdaten zu speichern, die zum Speichern von Benutzerpr?ferenzen oder zum Verwalten von Anwendungsstatus einseitig geeignet sind, jedoch nicht für die langfristige Speicherung vertraulicher Informationen geeignet sind.

    Was sind die am h?ufigsten verwendeten globalen Attribute in HTML? Was sind die am h?ufigsten verwendeten globalen Attribute in HTML? Jul 10, 2025 am 10:58 AM

    Klasse, ID, Stil, Daten und Titel sind die am h?ufigsten verwendeten globalen Attribute in HTML. Die Klasse wird verwendet, um einen oder mehrere Klassennamen anzugeben, um die Stileinstellung und JavaScript -Vorg?nge zu erleichtern. ID bietet eindeutige Kennungen für Elemente, die für Anker -Sprünge und JavaScript -Kontrolle geeignet sind. Durch den Stil k?nnen Inline-Stile hinzugefügt werden, geeignet für ein vorübergehendes Debuggen, aber nicht für die Verwendung von gro?em Ma?stab empfohlen. Data-Properties werden verwendet, um benutzerdefinierte Daten zu speichern, was für die Interaktion mit Front-End- und Back-End-Interaktion geeignet ist. Der Titel wird verwendet, um Mausover -Eingaben hinzuzufügen, aber sein Stil und sein Verhalten werden durch den Browser begrenzt. Eine angemessene Auswahl dieser Attribute kann die Entwicklungseffizienz und die Benutzererfahrung verbessern.

    Implementierung des nativen faulen Ladens für Bilder in HTML Implementierung des nativen faulen Ladens für Bilder in HTML Jul 12, 2025 am 12:48 AM

    Native Lazy Loading ist eine integrierte Browserfunktion, die das faule Laden von Bildern durch Hinzufügen von Loading = "Lazy" zum Tag hinzufügen kann. 1. Es erfordert keine Bibliotheken von JavaScript oder Drittanbietern und wird direkt in HTML verwendet. 2. Es ist für Bilder geeignet, die nicht auf dem ersten Bildschirm unterhalb der Seite, die Scrolling-Add-Ons und gro?e Bildressourcen angezeigt werden. 3. Es ist nicht für Bilder mit dem ersten Bildschirm oder Display geeignet: keine; 4. Bei der Verwendung sollte ein geeigneter Platzhalter festgelegt werden, um Layout -Jitter zu vermeiden. 5. Es sollte das Laden von Responsive Bild in Kombination mit SRCSet- und Gr??enattributen optimieren. 6. Kompatibilit?tsprobleme müssen berücksichtigt werden. Einige alte Browser unterstützen es nicht. Sie k?nnen durch Merkmalserkennung verwendet und mit JavaScript -L?sungen kombiniert werden.

    See all articles