Heim > Artikel > Web-Frontend > Beispiel für eine CSS-Attributauswahl

Beispiel für eine CSS-Attributauswahl

无忌哥哥Original: 2018-06-28 17:07:452065Durchsuche

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

/*Elementselektor*/

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; /*每个球之间的右外边距*/
}

/*Auswahl basierend auf Attributnamen: Zum Beispiel ID-Attribut*/

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

/*Auswahl basierend auf Attributnamen und -wert: Für Wählen Sie beispielsweise Elemente mit class="green"*/

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

/*Wählen Sie Elemente aus, deren Klassenattributwert das angegebene Wort enthält*/

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

/*Wählen Sie den Klassenstil der Klasse aus, der mit dem beginnt Buchstabe 'ph' Element */

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

/*Wählt ein Klassenstilelement aus, das mit 's' endet.*/

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

/*Wählt ein Klassenstilelement aus, dessen Attributwert den angegebenen Buchstaben ' enthält. 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>

Das obige ist der detaillierte Inhalt vonBeispiel für eine CSS-Attributauswahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css 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：CSS-BasisselektorNächster Artikel：CSS-Basisselektor

In Verbindung stehende Artikel

Mehr sehen