search

Home >Web Front-end >CSS Tutorial >css attribute selector example

css attribute selector example

无忌哥哥
无忌哥哥Original
2018-06-28 17:07:452118browse

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

/*Element selector*/

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

/*Select based on attribute name: For example, id attribute*/

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

/*Select based on attribute name and value: For example, select Elements with class="green"*/

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

/*Select elements whose class attribute value includes the specified word*/

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

/*Select the class class style starting with the letter 'ph' Element */

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

/*Selects class style elements ending with 's'*/

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

/*Selects class style elements whose attribute value includes the specified letter '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>


The above is the detailed content of css attribute selector example. For more information, please follow other related articles on the PHP Chinese website!

css class 选择器
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css basic selectorNext article：css basic selector

Related articles

See more