神奇的CSS3选择器_html/css_WEB-ITnose
话说园子里也混迹多年了,但是基本没写过blog,写点基础的,那就从css3选择器开始吧。
Css3选择器
先说下,为什么提倡使用选择器。
- 使用选择器可以将样式与元素直接绑定起来,在样式表中什么样式与什么元素匹配一目了然,修改起来也很方便。
- 减少样式表的代码量。
属性选择器
1.[att*=val]属性选择器
意义:表示元素用att表示的属性的属性值包含用val表示的字符,则该元素使用这个样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> [id*=demo] { width: 100px; height: 100px; background-color: #000099; } </style></head><body><div id="demo"></div></body></html>
2.[att^=val]属性选择器
意义:表示元素用att表示的属性的属性值以val表示的字符串开头,则该元素使用这个样式。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> [id^=demo] { width: 100px; height: 100px; background-color: #000099; margin: 10px; } </style></head><body><div id="demo"></div><div id="demo1"></div></body></html>
3.[att$=val]属性选择器
意义:表示元素用att表示的属性的属性值以val表示的字符串结尾,则该元素使用这个样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> [id$=o] { width: 100px; height: 100px; background-color: #000099; margin: 10px; } </style></head><body><div id="demo"></div><div id="demooo"></div></body></html>
结构性伪类选择器
伪类选择器是指已经定义好的选择器,不能随便起名。
例如:a:link,a:visited,a:hover,a:active.
伪元素选择器是指已经定义好的为元素使用的选择器。
- first-line伪元素选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p:first-line { color: red; } </style></head><body> <p> hello world <br/> 你好 </p></body></html>
2.first-letter 伪元素选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p:first-letter { color: red; } </style></head><body> <p> hello world </p> <p> 你好</p></body></html>
<strong>befor伪元素选择器</strong>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li:before { content: '*'; } </style></head><body> <ul> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> </ul></body></html>
after伪元素选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li:after { content: '*'; } </style></head><body> <ul> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> </ul></body></html>
root选择器
root选择器将样式绑定到页面的根元素。在使用:root与body元素的背景时,根据不同的条件,显示效果不同
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> :root { background-color: #003300; } body { background-color: yellow; } </style></head><body><p>你好</p></body></html>
not 选择器
排除结构元素下面子结构元素,使他不使用该元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body *:not(h1) { background-color: yellow; } </style></head><body><h1 id="大家好">大家好</h1><p>你好</p></body></html>
empty选择器
当元素内容为空时使用的样式。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> td:empty { background-color: yellow; } </style></head><body><table border="1"> <tr> <td width="100px">1</td> <td width="100px">2</td> <td width="100px"></td> </tr></table></body></html>
target选择器
使用target选择器给页面中的target元素使用样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> :target { background-color:yellow; } </style></head><body><table border="1"> <a href="#text3">示例1</a> <div id="text1"> <h1 id="你好">你好</h1> <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p> </div> <div id="text2"> <h1 id="你好">你好</h1> <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p> </div> <div id="text3"> <h1 id="你好">你好</h1> <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p> </div></table></body></html>
first-child、last-child选择器
指定第一个子元素和最后一个子元素的样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li:first-child { background-color: yellow; } li:last-child { background-color: #009999; } </style></head><body><table border="1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>1</li> </ul></table></body></html>
nth-child、nth-last-child选择器
针对父元素中某个指定序号的子元素来指定样式。
也可以使用Nth-child(even)对偶数子元素指定样式,Nth-child(odd)对奇数元素指定样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li:nth-child(2) { background-color: yellow; } li:nth-last-child(2) { background-color: #009999; } </style></head><body><table border="1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>1</li> </ul></table></body></html>
nth-of-type nth-last-of-type选择器
这两个选择器是为了弥补nth-child、nth-last-child选择器的缺陷,这两个选择器只针对同类元素指定样式。
UI元素状态选择器
E:horver,E:active,E:focus选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input[type="text"]:hover { background-color: yellow; } input[type="text"]:focus { background-color: green; } input[type="text"]:active { background-color: red; } </style></head><body><input type="text" name="name"></body></html>
E:enabled,E:disabled,E:read-only,E:read-write选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input[type="text"]:disabled { background-color: green; } input[type="text"]:read-only { background-color:darkgrey; } </style></head><body><input type="text" disabled><br><input type="text" ><br><br><input type="text" readonly="readonly" ></body></html>
E:checked、E:default选择器
E:checked指定复选框选取时的样式
E:default 指定默认选取框的样式
E::selection选择器
指定元素处于选中状态时的样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p::selection { background-color: goldenrod; } </style></head><body> <p>测试测试</p></body></html>

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



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

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

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

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 & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

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 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.
