CSS05：結構偽類選擇器和屬性選擇器

結構偽類選擇器

/*ul的第一個子元素*/
ul li:first-child{background: #0af6f6;
}/*ul的最后一個子元素*/
ul li:last-child{background: #d27bf3;
}
/*選中p1：定位到父元素，選擇當前的第一個元素
選擇當前p元素的父級元素，選中父級元素的第一個，并且是當前元素才生效
*/
p:nth-child(2){background: red;
}
/*選中父元素，下的p元素的第二個，類型*/
p:nth-of-type(2){background: gold;
}

<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li><li><p>p4</p></li>
</ul>

在這里插入圖片描述

屬性選擇器（常用）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<p class="demo"><a href="http://www.baidu.com" class="links item first" id="a">1</a><a href="images/123.jpg" class="links item first" id="b">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="">10</a>
</p>
</body>
</html>

=絕對等于
*=包含等于
^=以這個開頭
$=以這個結尾

.demo a{float:left;display: block;height: 50px;width:50px;border-radius:10px;background: #0af6f6;text-align:center;color: #c4f8d9;text-decoration:none;margin-right:5px;font:bold 20px/50px Arial;
}

在這里插入圖片描述

a[id=a]{background: red;
}

在這里插入圖片描述

a[class*="links"]{background: red;
}

在這里插入圖片描述

a[href^=http]{background: yellow;
}

在這里插入圖片描述

a[href$=jpg]{background: yellow;
}

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/88238.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/88238.shtml
英文地址，請注明出處：http://en.pswp.cn/web/88238.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！