CSS选择器

最新推荐文章于 2022-06-22 20:31:35 发布

一条有梦想的咸鱼啊丶

最新推荐文章于 2022-06-22 20:31:35 发布

阅读量156

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/li2406608527/article/details/108293736

版权

通用选择器

通用选择器 *{} *也可以叫做通配符，一般用于清除页面的内外边距、超链接的去下划线、列表项的默认样式等等。

兄弟选择器

<style>
        .p+p{
            color: red;
        }
        .p~p{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>123</p>
    <p class="p">123</p>
    <p>123</p>
    <p>123</p>
</body>

如上代码块所示，1.选择紧挨着后面的兄弟元素语法:前一个元素+后一个元素{} 就能选择出后面选择器，此时，第三个p标签里面的文字已经改变成红色，如果后面没有紧挨着的对应的标签，就不会有任何样式；2.选择类名为p的后面的所有p标签语法：.p~p{} 就能选择出类名为p的后面的所有p标签，此时第三个和第四个p标签里的文字大小为20px。

否定选择器

 <style>
        div p:not(.p3){
            color: steelblue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p>我是p1</p>
        <p>我是p2</p>
        <p class="p3">我是p3</p>
        <p>我是p4</p>
        <p>我是p5</p>
    </div>
</body>

语法 :not("需要被否定的选择器")

交集&并集选择器

 <style>
        p,h1,span{
            color: red;
        }

        p.red{
            font-size: 50px;
        }

    </style>
</head>
<body>
    <p>我是p1标签</p>
    <h1 class="size">我是h1标签</h1>
    <p class="red size">我是p2标签</p>
    <p>我是p3标签</p>
    <span class="red">我是span 标签</span>
</body>

1.并集选择器选择器1,选择器2,选择器n...{} 给这些选择器同一个样式，2.交集选择器选择器1选择器2{} 给同时包含了选择器1 和选择器2的标签设置样式。

其他伪类选择器

<style>
        p::before{
            /* color: red; */
            content: "我是p标签伪类添加的内容";
            color: royalblue;
            font-size: 30px;
        }
        p::after{
            /* color: red; */
            content: "我是p标签伪类添加的内容";
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>
       新浪网新闻中心是新浪网最重要的频道之一,24小时滚动报道国内、国际及社会新闻。每日编发新闻数以万计。
    </p>

伪类选择 p:before{} 一般情况下要结合content"内容" 属性来一起使用，表示在p标签前面加入什么东西。

伪类选择 p:after{} 一般情况下要结合content"内容" 属性来一起使用，表示在p标签后面加入什么东西。

<style>
        /* 选择第一个 :first-of-type */
        /* div p:first-of-type{
         color: aqua;   
        } */

        /* 选择最后1个 :last-of-type */
        /* div p:last-of-type{
         color: red;   
        } */

        /* 选择第n个 :nth-of-type(n) */
        /* div p:nth-of-type(4){
            color: purple;
        } */

        /* 方法1： */
        /* .d2 p:nth-of-type(3){
            color: red;
        } */

        /* 方法2： */
        /* div:last-of-type p:nth-of-type(3){
            color: red;
        } */
    </style>
</head>
<body>
    <div class="d1">
        <p>我是第1个p标签</p>
        <p>我是第2个p标签</p>
        <p>我是第3个p标签</p>
        <p>我是第4个p标签</p>
        <p>我是第5个p标签</p>
    </div>
    <div class="d2">
        <p>我是第11个p标签</p>
        <p>我是第22个p标签</p>
        <p>我是第33个p标签</p>
        <p>我是第44个p标签</p>
        <p>我是第55个p标签</p>
    </div>
</body>

选择第一个 :first-of-type，选择最后1个 :last-of-type，选择第n个 :nth-of-type(n)，选择最后一个div的第三个 :div:last-of-type p:nth-of-type(3)。

一条有梦想的咸鱼啊丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

通用选择器通用选择器*{}*也可以叫做通配符，一般用于清除页面的内外边距、超链接的去下划线、列表项的默认样式等等。兄弟选择器<style> .p+p{ color: red; } .p~p{ font-size: 20px; } </style></head><body> <p>123</...
复制链接

扫一扫