Maison > Article > interface Web > exemple de sélecteur d'attribut CSS

exemple de sélecteur d'attribut CSS

无忌哥哥original: 2018-06-28 17:07:452060parcourir

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.属性选择器</title>
<style type="text/css">

/*Sélecteur d'élément*/

ul {   
padding: 0;
margin: 0;
width: 450px;
border: 1px dashed #666;
padding: 10px 5px;
}
ul:after {  /*子块撑开父块*/
content:&#39;&#39;;  /*在子元素尾部添加空内容元素*/
display: block;  /*并设置为块级显示*/
clear:both;   /*清除二边的浮动*/
}
li { 
list-style: none; /*去掉默认列表项样式*/
float: left;  /*左浮动*/
width: 40px;  /*设置宽度*/
height: 40px; /*设置高度*/
line-height: 40px; /*文本垂直居中*/
text-align: center; /*文本水平居中*/
border-radius: 50%; /*设置边框圆角*/
background: skyblue; /*背景色天蓝*/
margin-right: 5px; /*每个球之间的右外边距*/
}

/*Sélection en fonction du nom de l'attribut : tel que l'attribut id*/

*[id] {   /*等价于:  li[id]*/
/*background-color: red;*/
}

/*Basé sur le nom de l'attribut et Sélectionner par valeur : par exemple, sélectionnez les éléments avec class="green" */

li[class="green"] {
/*background-color: lightgreen;*/
}

/*Sélectionnez les éléments dont la valeur d'attribut de classe inclut le mot spécifié*/

li[class ~= "red"] {
background-color: brown;
}

/*Sélectionnez les éléments de style de classe commençant par les lettres 'ph' */

li[class ^= "ph"] {
background-color: coral;
}

/*Sélectionnez les éléments de style de classe se terminant par 's'*/

li[class $= "s"] {
background-color: lime;  /*青绿*/
}

/*Sélectionnez les valeurs d'attribut Comprend des éléments de style de classe spécifiant la lettre « e » :;*/

li[class *= "e"] {
background-color: yellowgreen;  /*234背景为黄绿色*/
}
</style>
</head>
<body>
<ul>
<li id="item1">1</li>
<li>2</li>
<li class="green red">3</li>
<li>4</li>
<li>5</li>
<li id="item2">6</li>
<li>7</li>
<li class="php css">8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css class 选择器

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：sélecteur de base CSSArticle suivant：sélecteur de base CSS

Articles Liés

Voir plus