css屬性選擇器實例-css教學-PHP中文網

首頁

web前端

css教學

css屬性選擇器實例

Jun 28, 2018 pm 05:07 PM

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;2.属性选择器&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;

登入後複製

/*元素選擇器*/

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

登入後複製

/*根據屬性名稱來選擇:例如id屬性*/

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

登入後複製

/*根據屬性名稱與值來選擇:例如選擇class="green"的元素*/

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

登入後複製

/*選擇class屬性值中包含指定單字的元素*/

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

登入後複製

/*選擇以'ph'字母開頭的class類別樣式元素*/

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

登入後複製

/*選擇以's'結尾的類別樣式元素*/

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

登入後複製

/*選擇屬性值中包含指定字母'e'的類別樣式元素:;*/

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

登入後複製

以上是css屬性選擇器實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn