收藏
批改狀態(tài)：未批改
老師批語：
實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中的常用選擇器</title>
<style>
ul {
border:1px solid red;
margin: 0;
padding-left: 0;
}
ul li {
list-style: none;
width:40px;
Height:40px;
background-color: aquamarine;
/*background-position: 10px 10px;*/
display: inline-block; /*塊級元素顯示為一行*/
font-size: 20px;
margin-left: 5px;
border-radius: 40%; /*四角弧度*/
box-shadow: 2px 2px 10px black;
text-align: center; /*文字居中*/
line-height: 40px;
}
.A { /*類選擇器*/
background-color:red;
}
.B,.C { /*群組選擇器*/
background-color: burlywood;
}
.C + * { /*相鄰選擇器 下一個*/
background-color: darkgray;
}
.E ~ * { /*兄弟選擇器 水平以后*/
background-color: white;
}
ul :first-child { /*子類選擇器 ul第一個子元素*/
color: greenyellow;
}
ul :last-child { /*子類選擇器 ul最后一個子元素*/
color: BLUE;
}
ul :nth-child(3) { /*子類選擇器 ul順數(shù)第3個子元素*/
color: yellow;
}
ul :nth-last-child(2) {/*子類選擇器 ul倒數(shù)第2個子元素*/
color: greenyellow;
}
li:nth-of-type(2){ /*元素選擇器 li順數(shù)第2個子元素*/
color:white;
}
</style>
</head>
<body>
<ul>
<li class="A">1</li>
<li class="B">2</li>
<li class="C">3</li>
<li class="D">4</li>
<li class="E">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例學習總結(jié)：
1、層級/后代選擇器
ul li {...}
2、屬性選擇器
#id {...}
<li id='id' >{...}
3、群組選擇器
#id1 , #id2 {...}
4、相鄰選擇器
#id + li {...} 相鄰的第一個li
#id + * {...} 相鄰的第一個元素
5、兄弟/同級選擇器
#id ~ * {...} 水平以后的全部元素
6、偽類：子類選擇器
ul :first-child{...} ul中第一個子元素
ul :last-child{...} ul中最后一個子元素
ul :nth-child(2){...} ul中第二個子元素,關(guān)注點在“元素位置”
ul :nth-last child(3){...} ul中倒數(shù)三個子元素
7、偽類：類型選擇器
li :nth_of _type(2){...} li 中第二個子元素，關(guān)注點在“元素類型”
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號