css3 伪元素选择器

最新推荐文章于 2023-04-20 17:57:52 发布

songshu92

最新推荐文章于 2023-04-20 17:57:52 发布

阅读量244

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/songshu92/article/details/75948893

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*先找到.parent下面的第二个子元素,在判断它是不是p*/
.parent p:nth-child(2){
    color: red;
}
/*先找到.parent下面从后往前数的第二个子元素,在判断它是不是p*/
.parent p:nth-last-child(2){
    color: blue;
}
/*先找到.parent下面所有的p,再找到第一个p元素*/
.parent p:nth-of-type(1){
    color: green;
}
/*先找到.parent下面所有的p,再找到从后往前数第一个p元素*/
.parent p:nth-last-of-type(1){
    color: yellow;
}
/*先找到.parent下面所有的p,再找到第一个p元素,等价于.parent p:nth-of-type(1)*/
.parent p:first-of-type{
    color: #333;
}
/*先找到.parent下面所有的p,再找到最后一个p元素*/
.parent p:last-of-type{
    color: #000;
}
/*先判断是不是唯一的子元素,再判断是不是span元素*/
.parent div span:only-child{
    color: red;
}
/*先判断是不是p元素,再判断是不是唯一的一个p元素*/
.parent p:only-of-type{
    color: #666;
}
</style>
</head>
<body>
<div class="parent">
    <div><span>1</span></div>
    <p>2</p>
    <b>3</b>
</div>
</body>
</html>

songshu92

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 伪元素选择器

Document/*先找到.parent下面的第二个子元素,在判断它是不是p*/.parent p:nth-child(2){ color: red;}/*先找到.parent下面从后往前数的第二个子元素,在判断它是不是p*/.parent p:nth-last-child(2){ color: blue;}/*先找到.parent下面所有的p,再找到第一个p元素*
复制链接

扫一扫