css3多功能选择器

最新推荐文章于 2023-03-29 10:40:09 发布

|不勤

最新推荐文章于 2023-03-29 10:40:09 发布

阅读量126

点赞数

分类专栏：前端 CSS3 文章标签： IT

本文链接：https://blog.csdn.net/weixin_43051270/article/details/90368334

版权

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

CSS3

9 篇文章 0 订阅

订阅专栏

伪类 == 被动

1. :not(选择元素)

:not(selector) 选择器匹配非指定元素/选择器的每个元素。

小案例（最后的下边框去除）：

<style>
    ul{
        width:300px;
        border:1px solid #999;
    }
    li{
       height:50px;
       margin: 0 5px;
    }
    li:not(:last-of-type){ /*选中除了最后一个的所有元素*/
        border-bottom: 1px solid;
    }
</style>

	<ul>
	    <li>content</li>
	    <li>content</li>
	    <li>content</li>
	    <li>content</li>
	    <li>content</li>
	    <li>content</li>
	    <li>content</li>
    </ul>

样式效果如下图：
在这里插入图片描述

2. :root 根节点选择器

作用跟html节点一样
xml页面也可以使用

3. :target 目标伪类选择器

:target 会匹配 url 链接 #后面的所有元素，包括 # 号。

小案例（三个点击按钮跳转显示元素）示例如下：

<style>
    :root,
    body{ /*使用:root根节点选择器，使高度能够作用于下级*/
        margin:0;
        height:100%;
    }
    div:not(.buttonWrapper){
        width:100%;
        height:100%;
    }
    #bgred{
        background-color: red;
    }
    #bggreen{
        background-color: green;
    }
    #bggray{
        background-color: gray;
    }
    .buttonWrapper{
        position: absolute;
        width:600px;
        top:400px;
    }

    .buttonWrapper a{
        text-decoration: none;
        color: #fff;
        background-color: #fcc;
        border-radius: 30px;
        margin:0 10px;
    }
    div[id]:not(:target){
        display: none;
    }
    </style>

<body>
    <div class="buttonWrapper">
        <a href="#bgred" class="red">123</a>
        <a href="#bggreen" class="green">456</a>
        <a href="#bggray" class="gray">789</a>
    </div>

    <div id="bgred"></div>
    <div id="bggreen"></div>
    <div id="bggray"></div>
</body>

4. :first-child 选中的元素在其父元素中的第一个子元素

代码示例：

p:first-child{
    background-color: red;
}

	<body>
	<p>4</p> <!--这行也显示红色，因为它也是在其父元素的第一个子元素-->
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
	</body>

效果图如下：
在这里插入图片描述
阅读下面的代码，防止掉坑：

p:first-child{
    background-color: red;
}

	<body>
	<p>4</p> <!--显示红色-->
    <div>
    	<span></span>
        <p>1</p> <!--不能显示红色-->
        <p>2</p>
        <p>3</p>
    </div>
	</body>

5. :nth-child(n) n是自然数从 1 开始

:nth-child(2n+1) 顺序奇数选择
:nth-child(2n) 顺序偶数选择

|不勤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3多功能选择器

伪类 == 被动1. :not(选择元素):not(selector) 选择器匹配非指定元素/选择器的每个元素。小案例（最后的下边框去除）：<style> ul{ width:300px; border:1px solid #999; } li{ height:50px; ...
复制链接

扫一扫