简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Drei Möglichkeiten zur Überprüfung von CSS-Steuerelementstilen durch Prioritätsvergleich

Drei Möglichkeiten zur Überprüfung von CSS-Steuerelementstilen durch Prioritätsvergleich

不言
不言Original
2018-06-28 09:26:281247Durchsuche

Dieser Artikel stellt hauptsächlich drei Möglichkeiten vor, CSS-Kontrollstile durch Prioritätsvergleich zu überprüfen. Jetzt kann ich ihn mit Ihnen teilen.

Jeder kennt den chinesischen Namen von CSS heißt Cascading Style Sheets, und wenn CSS Stile steuert, gibt es drei Möglichkeiten, sie einzuführen. Hier ist eine kurze Einführung in die drei Möglichkeiten, Stile mit CSS zu steuern

Okay, kommen wir gleich zum Thema , jeder weiß, Der chinesische Name von CSS heißt Cascading Style Sheet. Wenn CSS Stile steuert, gibt es drei Möglichkeiten, sie einzuführen, nämlich:

1> Externes Stylesheet: Schreiben Sie die Stilregeln direkt in das *.css-Datei und dann über das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag in der *.html-Seite eingeführt
2> Internes Stylesheet: (befindet sich im 93f0f5c25f18dab9d176bd4f6de5d30e-Tag)
3> das HTML-Element)

Laut der W3School-Website (klicken Sie hier für direkten Zugriff) werden die Prioritäten wie folgt unterteilt, wenn dasselbe HTML-Element durch mehr als einen Stil definiert ist klein bis groß, darunter 4 Höchste Priorität:

1. Externes Stylesheet
3. Internes Stylesheet (befindet sich im 93f0f5c25f18dab9d176bd4f6de5d30e-Tag)
4. Inline-Stil (im HTML-Element)

Zu dieser Schlussfolgerung glaube ich, dass jeder viele Fragen haben muss und viele Leute im Internet den Inhalt der offiziellen Website direkt kopieren, einfügen und veröffentlichen. Das macht uns sehr müde und verärgert. Lassen Sie uns dies hier überprüfen und vergleichen.

Hinweis: Diese Überprüfung betrifft hauptsächlich die letzten drei Prioritäten. Ich glaube, jeder weiß, dass sie die niedrigste sein muss. Wir werden hier nicht zu viele Beispiele nennen, um sie zu überprüfen.

1. Beschreibung der Verifizierungsumgebung

Browser: Firefox 22.0

Sprache: HTML 4.01/CSS
Entwicklungstool: Aptana Studio 3

2 Möglichkeiten zum direkten Definieren von Elementstilen für Tags

1> Zuerst verwenden wir direkt ein externes Stylesheet, um den Stil des p-Tags zu definieren:

xiaoxuetu.css

p {
     color:blue
 }

xiaoxuetu.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>CSS样式表优先级测试</title>
        <meta charset="UTF-8" /></p>
<p>        <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    </head>    
    <body>
        <p>外部样式表</p>
    </body>
</html>

Anzeigeeffekt:

Lass uns mit der Verifizierung beginnen.

2> Externes Stylesheet vs. internes Stylesheet (definieren Sie zuerst das interne Stylesheet und führen Sie dann die externe Stylesheet-Definitionsdatei ein) Fügen Sie das interne Stylesheet hinzu, dh definieren Sie die Stilregeln direkt im < ;head>-Tag, zu diesem Zeitpunkt ändern wir den Code in xiaoxuetu.html:

xiaoxuetu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>CSS样式表优先级测试</title>
        <meta charset="UTF-8" />
        <style type="text/css" media="screen">
            p {
                color: green
            }
        </style>
        <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    </head>    
    <body>
        <p>外部样式表(蓝色) VS 内部样式表(绿色)</p>
    </body>
</html>

Anzeigeeffekt:


Holen Sie sich das Prioritätsergebnis: Externes Stylesheet > Internes Stylesheet

3> Externes Stylesheet vs. internes Stylesheet (führen Sie zuerst die externe Stylesheet-Definitionsdatei ein und definieren Sie dann das interne Stylesheet). Tatsächlich wird das Link-Tag direkt ausgeschnitten. Bewegen Sie sich oben an den Anfang des im Head-Tag definierten internen Stylesheets:

xiaoxuetu.html 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/> 
<style type="text/css" media="screen"> 
p { 
color: green; 
} 
</style> 
</head> 
<body> 
<p>外部样式表(蓝色) VS 内部样式表(绿色)</p> 
</body> 
</html>

Anzeigeeffekt:

Erhalten Sie Prioritätsergebnisse: internes Stylesheet> Definieren des Stils des Labels. Die Priorität externer Stylesheets und interner Stylesheets hängt von der Reihenfolge ab, in der sie eingeführt werden. Hey, bist du froh, dass du nicht ganz geglaubt hast, was auf der offiziellen Website steht ...

4> Externe Stylesheets VS Inline-Stile direkt auf p Definieren Sie den Stil im Tag. Zu diesem Zeitpunkt ändern wir den Code von xiaoxuetu.html:

xiaoxuetu.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/> 
</head> 
<body> 
<p style="color:red;">外部样式表(蓝色) VS 内联样式(红色)</p> 
</body> 
</html>

Anzeigeeffekt:

Erhalten Sie das Prioritätsergebnis: Inline-Stil> Externes Stylesheet

5> Gleichzeitig ändern wir den xiaoxuetu.html-Code:

xiaoxuetu .html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<style type="text/css" media="screen"> 
p { 
color: green 
} 
</style> 
</head> 
<body> 
<p style="color:red;">内部样式表(绿色) VS 内联样式(红色)</p> 
</body> 
</html>

Anzeigeeffekt:

Erhalten Sie Prioritätsergebnisse : Inline-Stil> Internes Stylesheet

Aus dem Vergleich der Schritte 2cc198a1d5eb0d3eb508d858c9f5cbdb 43ad812d3a971134e40facaca816c822 Externe Stylesheets hängen von ihrer Einführungs- und Definitionsreihenfolge ab. Wenn Sie zuerst Stile mithilfe eines internen Stylesheets definieren und dann über ein externes Stylesheet definierte Stile importieren, überschreiben die Stile in Ihrem externen Stylesheet die im internen Stil definierten Stile Blatt und umgekehrt.

Diese Situation ist natürlich nur bei der Auswahl nach ID oder Klasse dieselbe. Wenn die Stildefinition eines Tags sowohl Klassen- als auch ID-Selektoren enthält und außerdem drei Stildefinitionsmethoden enthält, müssen Sie zuerst den folgenden Prioritätstest lesen.

三、判断用id、class以及标签选择器定义样式的优先级
本次测试中，为了减少其他因素的影响，只采用内部样式表来定义样式，同时分别使用了ID选择器和Class选择器来选择使用样式的标签。 

1>三种方式并存的时候 

xiaoxuetu.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<style type="text/css" media="screen"> 
fieldset { 
width: 50% 
} 
p { 
color: red; 
} 
#idtest { 
color: green; 
} 
.classtest { 
color: blue; 
} 
</style> 
</head> 
<body> 
<fieldset> 
<legend>单一显示效果</legend> 
<p id="idtest">只使用ID(绿色)</p> 
<p class="classtest">只使用Class(蓝色)</p> 
</fieldset> 
<p> </p> 
<fieldset> 
<legend>先引入ID定义的样式再引入Class定义的样式</legend> 
<p id="idtest" class="classtest">小学徒</p> 
</fieldset> 
<p> </p> 
<fieldset> 
<legend>先引入Class定义的样式再引入ID定义的样式</legend> 
<p id="idtest" class="classtest">小学徒</p> 
</fieldset> 
</body> 
</html>

显示效果：得出优先级结果 id选择器 > class选择器 > 标签选择器 

2>当只有两个class或者两个id的时候 

xiaoxuetu.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<style type="text/css" media="screen"> 
#idtest { 
color: green; 
} 
#idtest2 { 
color: YellowGreen; 
} 
.classtest { 
color: blue; 
} 
.classtest2 { 
color: yellow; 
} 
</style> 
</head> 
<body> 
<fieldset> 
<legend>两个class的时候</legend> 
<p class="classtest2" class="classtest">classtest2(黄色)先classtest(蓝色)后</p> 
<p class="classtest" class="classtest2">classtest(蓝色)先classtest2(黄色)后</p> 
</fieldset> 
<p> </p> 
<fieldset> 
<legend>两个id的时候</legend> 
<p id="idtest" id="idtest2">idtest(绿色)先idtest2(黄绿色)后</p> 
<p id="idtest2" id="idtest">idtest2(黄绿色)先idtes(绿色)t后</p> 
</fieldset> 
</body> 
</html>

显示效果：



得出优先级结果：当且仅当有两个或者是多个class或者id的时候，谁在前面就谁的优先级高。

3>只有标签p选择器的时候

xiaoxuetu.html(蓝色样式先，红色样式后) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<style type="text/css" media="screen"> 
p { 
color: blue; 
} 
p { 
color: red; 
} 
</style> 
</head> 
<body> 
<p>蓝色样式先，红色样式后</p> 
</body> 
</html>

显示效果：



xiaoxuetu2.html(红色样式先，蓝色样式后)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<style type="text/css" media="screen"> 
p { 
color: red; 
} 
p { 
color: blue; 
} 
</style> 
</head> 
<body> 
<p>红色样式先，蓝色样式后</p> 
</body> 
</html>

显示效果:

从两个结果我们可以知道，当只有标签选择器的时候，后面定义的样式表的优先级就越高。
四、总结
1.当只使用id选择器、class选择器或者标签选择器的时候，不管是使用多少种样式表定义方式，都是内嵌样式的优先级最高，接下来外部样式表和内部样式表的就得看他们的引入顺序了;
2.当只使用id选择器或者class选择器的时候，同一个标签内不管使用了多少个，都是排在前面的优先级更高;
3.当只使用标签选择器的时候，如果定义了多个一样的，你们写在最后面的标签选择器生效，也就是它的优先级最高;
4.当同一个标签中既有id选择器，又有class选择器，同时又有标签选择器的时候，优先级的次序是id选择器 > class选择器 > 标签选择器;
5.当每一种都有的时候，那就根据具体情况具体分析吧，嘿嘿，哈哈…… 

恩，这篇文章我很用心写的哦，如果大家觉得好，麻烦点击一下赞吧，又或者你有什么疑问或者不一样的意见，欢迎留言讨论哦，因为白天要上班，所以我会在晚上有空的时候及时处理的，还请见谅哈。 

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于CSS中权值、层叠和重要性(!important)的分析

css3中移动属性的分析

关于css3弹性盒模型的介绍

Das obige ist der detaillierte Inhalt vonDrei Möglichkeiten zur Überprüfung von CSS-Steuerelementstilen durch Prioritätsvergleich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php firefox css css3 html class 选择器 样式表
Stellungnahme：
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
Vorheriger Artikel：So erzielen Sie in CSS3 gleichzeitige Neigungs- und RotationsanimationseffekteNächster Artikel：So erzielen Sie in CSS3 gleichzeitige Neigungs- und Rotationsanimationseffekte

In Verbindung stehende Artikel

Mehr sehen