css选择器

最新推荐文章于 2024-02-29 11:06:27 发布

雀巢脆脆鲨-

最新推荐文章于 2024-02-29 11:06:27 发布

阅读量100

点赞数 2

本文链接：https://blog.csdn.net/weixin_69761220/article/details/124595340

版权

常用选择器

1.id选择器

作用：根据元素的id属性值来选中元素

语法：#id属性值{}

例如：#p1{}

注意：id选择，对应属性值，一个页面只能用一次

   <style>
        #p1{
            color: red;
        }
    </style>
</head>
<body>
    <p id="p1">选择器</p>
    <p>选择器</p>
</body>

2.类选择器（class选择器）

作用：根据元素的class属性值来选中元素

语法：.class属性值{}

例子：.p2{}

用法跟id选择器类似，但可以复用

    <style>
        .p2{
            color: red;
        }
    </style>
</head>
<body>
    <p>选择器</p>
    <p class="p2">选择器</p>
</body>

3.元素选择器

作用：根据标签名来选中指定的元素

语法：标签名{}

例如：h1{}

    <style>
            h1{
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>选择器</h1>
        <p>选择器</p>
        <p>选择器</p>
    </body>

4.通配符选择器

作用：选中页面中所有的标签

语法：*{}

   <style>
            *{
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>选择器</h1>
        <p>选择器</p>
        <p>选择器</p>
    </body>

复合选择器

1.交集选择器

作用：选中同时符合多个条件的元素

语法：选择器1选择器2选择器3·····{}

注意：如果选择器中有元素选择器，元素选择器要写在前面

        <style>
            p.p1{
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>选择器</h1>
        <p class="p1">选择器</p>
        <p>选择器</p>
    </body>

2.并集选择器

作用：同时选择多个选择器对应的元素

语法：选择器1,选择器2,选择器3·····{}

        <style>
            h1,h3{
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>选择器</h1>
        <h3>非常好</h3>
        <p>选择器</p>
        <p>选择器</p>
    </body>

关系选择器

1.子元素选择器

作用：通过父元素找到对应的子元素

语法：父>子{}

例如：div > span

     <style>
            div>span{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <span>哈哈哈</span>
        </div>
    </body>

2.后代选择器

作用：通过祖先元素找到指定的后代元素

语法：祖先后代{}

例子：div .s1{}

        <style>
            div .s1{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <p>
               <span class="s1">哈哈哈</span>
               <span>你好</span>
            </p>
        </div>
    </body>

3.相邻兄弟选择器

作用：通过兄元素找到相邻弟的元素，只找相邻的一个弟弟

语法：兄+弟{}

例子：#s1+span

  <style>
            .s1+span{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <p>
               <span class="s1">哈哈哈</span>
               <span>你好</span>
            </p>
        </div>
    </body>

4.选择所有兄弟选择器

语法：兄~弟{}

注意：前面的兄弟不选

        <style>
            .s1~span{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <p>
                <span>嘻嘻嘻</span>
               <span class="s1">哈哈哈</span>
               <span>你好</span>
               <span>好久不见</span>
               <span>过得好嘛</span>
            </p>
        </div>
    </body>

属性选择器

语法：

[属性名]{} 选择含有指定属性的元素

[属性名=属性值]{} 选择含有指定属性和属性值的元素

[属性名^=属性值]{} 选择以指定属性值开头的元素

[属性名$=属性值]{} 选择以指定属性值结束的元素

[属性名*=属性值]{} 选择属性值含有某值的元素

伪类选择器

不存在的类，用来表示一个元素特殊的状态。例如：第一个元素被点击元素鼠标移入的元素

语法：

1、 :first-child 第一个子元素

2、 :last-child 最后一个子元素

3: :nth-child() 选中第几个元素

特殊值

n 选择所有的

2n+1/odd 选中奇数

2n/even 选中偶数

注意：以上所有的伪类都是根据所有的子元素进行排序

语法：

1、 :first-of-type 同类型的第一个

2、 :last-of-type 同类型的最后一个

3、 :nth-of-type() 同类型选择哪个

注意：以上这些伪类是根据同类型的子元素中去选择

:not() 否定伪类

-将符合条件的元素从选择器中去除

        li:first-child{
            color: red;
        }
        li:last-child{
            color: aqua;
        }
        li:nth-child(3){
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>小感韩大才生给其了。</li>
            <li>样子这承一竟仑才向。</li>
            <li>老不登何书，目情开。</li>
            <li>郭得自，土样非，为。</li>
            <p>是洪作徒关，杨我丹。</p>
            <p>价身太第三即我上他。</p>
            <p>倒杨对区，落可忧智。</p>
            <li>洪了之力娟对然订派。</li>
            <li>是成杨教读斗了变韩。</li>
        </ul>
    </div>
</body>

a元素伪类选择器

:link 用来表示未访问过的链接

:visited 用来表示访问过的链接

注意：由于隐私问题，大部分的浏览器对访问的链接，只能设置颜色

   <style>
        a:link{
            color: red;
        }
        a:visited{
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">测试1</a>
    <a href="#">测试2</a>
    <a href="#">测试3</a>
</body>

:hover 鼠标移入的效果

    <style>
      p:hover{
          color: red;
      }
    </style>
</head>
<body>
    <p>哈哈哈</p>
</body>

:active 鼠标点击效果

    <style>
      p:active{
          font-size: 30px;
          color: red;
      }
    </style>
</head>
<body>
    <p>哈哈哈</p>
</body>

伪元素选择器

不真实存在元素（元素的位置）

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 选中的内容

    <style>
      p::first-letter{
          color: red;
      }
      p::first-line{
          font-size: 30px;
      }
    </style>
</head>
<body>
    <p>However mean your life is,<br>meet it and live it do not shun it and call it hard names.</p>
</body>

::before 元素的最前面

::after 元素的最后面

before和after需要配合content使用

      p::before{
          content: '哈哈';
          color: red;
      }
      p::after{
          content: '你好';
          color: greenyellow;
      }
    </style>
</head>
<body>
    <p>However mean your life is,meet it and live it do not shun it and call it hard names.</p>
</body>