当前位置：首页 > news >正文

CSS05：结构伪类选择器和属性选择器

news 2025/7/7 13:55:53

结构伪类选择器

/*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;
}