CSS 属性 选择器
CSS 属性 选择器
CSS 2 引入了属性选择器。
属性选择器可以根据元素的属性及属性值来选择元素。
(1)[att*=val]; (2)[att^=val];(3)[att$=val];
1： [att*=val];解释：如果元素用att表示的属性之属性值中包含用val指定的字符的话，则该元素使用这个样式.
<html>
<head>
<style>
[id*=section]{
background-color:red;
}
</style>
</head>
<body>
<p id="sections9999">
</p>
</body>
</html>运行效果：除了ie其他均能正常显示。。
2:[att^=val];解释：如果元素用att表示的属性之属性值的开头为用val指定的字符的话，则该元素使用这个样式。(其实你可以这样理解在正则里面^匹配开头嘛所以喽。。)
运行效果：除了ie其他均能正常显示。。
3:[att$=val];解释：如果元素用att表示的属性之属性值的结尾为用val指定的字符的话，则该元素使用这个样式。(在正则里面$匹配结尾。。)
运行效果：除了ie其他均能正常显示。。
下面再看一个例子:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{
content:"web网页";
color:red;
}
a[href$=jpg]:after{
content:"JPG图像素材";
color:green;
}
</style>
</head>
<body>
<ul>
<li><a href="#">博客</a></li>
<li><a href="#">css选择器</a></li>
<li><a href="#">图像素材</a></li>
</ul>
</body>
</html>运行效果：除了ie其他均能正常显示。。
neue Datei
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{
content:"web网页";
color:red;
}
a[href$=jpg]:after{
content:"JPG图像素材";
color:green;
}
</style>
</head>
<body>
<ul>
<li><a href="#">博客</a></li>
<li><a href="#">css选择器</a></li>
<li><a href="#">图像素材</a></li>
</ul>
</body>
</html>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)