Rumah > Artikel > hujung hadapan web > css属性选择器实例
css属性选择器实例
- 无忌哥哥asal
- 2018-06-28 17:07:451957semak imbas
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2.属性选择器</title> <style type="text/css">
/*元素选择器*/
ul {
padding: 0;
margin: 0;
width: 450px;
border: 1px dashed #666;
padding: 10px 5px;
}
ul:after { /*子块撑开父块*/
content:''; /*在子元素尾部添加空内容元素*/
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; /*每个球之间的右外边距*/
}/*根据属性名来选择:例如id属性*/
*[id] { /*等价于: li[id]*/
/*background-color: red;*/
}/*根据属性名与值来选择:例如选择class="green"的元素*/
li[class="green"] {
/*background-color: lightgreen;*/
}/*选择class属性值中包括指定单词的元素*/
li[class ~= "red"] {
background-color: brown;
}/*选择以'ph'字母开头的class类样式元素*/
li[class ^= "ph"] {
background-color: coral;
}/*选择以's'结尾的类样式元素*/
li[class $= "s"] {
background-color: lime; /*青绿*/
}/*选择属性值中包括指定字母'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>Atas ialah kandungan terperinci css属性选择器实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn