css几种常见的选择器

最新推荐文章于 2024-07-24 11:39:30 发布

可乐不可乐QAQ

最新推荐文章于 2024-07-24 11:39:30 发布

阅读量734

点赞数 3

文章标签： css html

本文链接：https://blog.csdn.net/m0_46587577/article/details/106986965

版权

选择器是css很重要的一个内容，我在学习css的同时，总结了一下常见的几种选择器（本人目前也是web前端学习者，写下这篇博客希望能够加强自己对选择器的理解，同时也希望能够帮助大家，能够共同进步，如果有不足之处也希望各位大佬指出）

通用选择器：

格式： * {
}

通用选择器是对本页面所有元素进行操作的选择器

 /*通用选择器*/
    *{  
        /*背景色为蓝色*/
        background-color:blue;
        /*外边距为0*/
        margin: 0;
        /*内边距为0*/
        padding: 0;
    }

id选择器：

格式： #元素id{
}

id选择器是一种基础的选择器(但是一般不会使用，因为局限性比较高)，是通过元素的id来对元素进行操作，元素的id需要自己设置，并且每个元素的id都是唯一值：

<style>
    /*id选择器，对id为为div1的元素进行操作*/
    #div1{
        /*边框设置为实线，1px，红色*/
        border: 1px solid red;
        /*宽度为100px*/
        width:100px;
        /*高度为100px*/
        height: 100px;
        /*下外边距为30px*/
        margin-bottom:30px;
    }

    /*id选择器，对id为为div2的元素进行操作*/
    #div2{
        /*边框设置为实线，1px，蓝色*/
        border: 1px solid blue;
        /*宽度为150px*/
        width:150px;
        /*高度为150px*/
        height: 150px;
    }
</style>
<body>
  <!--为元素设置id，id是唯一值-->
  <div id = 'div1'></div>
  <div id = 'div2'></div>

</body>
</html>

结果如图：
测试结果
3. 类选择器：

格式： . 类名{ }

类选择器可以说是最常用的一类选择器，是根据元素的class来对元素进行操作，可以对多个具有相同的class的元素进行操作：

<style>
   /*类选择器，对class为div1的所有元素进行操作*/
    .div1{
        /*外边距为10px*/
        margin: 10px;
        /*背景色为蓝色*/
        background-color: blue;
        /*宽度为100px*/
        width:100px;
        /*高度为100px*/
        height: 100px;
    }
</style>
<body>
  <!--为元素class值-->
  <div class="div1"></div>
  <div class="div1"></div>


</body>
</html>

测试结果如图：

元素选择器：

格式：元素名{

}

如果想直接对html元素定义，可以直接使用元素选择器：

<style>
    /*元素选择器*/
    div{
      /*宽度100px*/
      width: 100px;
      /*高度100px*/
      height:100px;
      /*背景色为红色*/
       background-color: red;
      /*外边距为10px*/
        margin: 10px;
    }
</style>
<body>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</body>
</html>

结果如图：
在这里插入图片描述

5 并集选择器

格式：选择器1 ，选择器2 （选择器可以为任何类型的选择器）{
}

并集选择器可以同时对多个选择器进行操作：

<style>
    /*并集选择器，可以对多个选择器进行操作*/
     .div1,#divx,#divy{
         /*边框为红色1px的实线*/
         border: 1px solid red;
         /*宽度为100px*/
         width: 100px;
         /*高度为100px*/
         height: 100px;
         /*外边距为10px*/
         margin:10px;
    }

</style>
<body>
  <div class="div1"></div>
  <div id="divx"></div>
  <div id="divy"></div>



</body>
</html>

测试结果：
在这里插入图片描述

后代选择器：

格式：选择器1 选择器2{

}

用于指定元素素下的后辈元素，注意：选择器和选择器之间有一个空格。

<style>
    /*对类选择器container后辈中的li选择器进行操作*/
    .container  li  {
      border: 1px solid red;
    }

</style>
<body>
<div class="container">
    <ul>
        <li>
            aaa
           <ul>
              <li>bbb</li>
           </ul>
        </li>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ul>
</div>

</body>
</html>

如上代码，对类选择器container后辈中的li选择器进行操作，后代选择器也是一个十分常用的选择器
测试结果：
在这里插入图片描述

子类选择器

格式：
选择器1 >选择器2{

}

用于选择指定元素的第一代子元素，区别于后代选择器，子类选择器只会对第一代后代起作用，后代选择器是作用于所有的后代：

<style>
    /*对类选择器container的子代ul选择器进行操作*/
    .container > ul  {
      border: 1px solid red;
    }

</style>
<body>
<div class="container">
    <ul>
        <li>
            aaa
           <ul>
              <li>bbb</li>
           </ul>
        </li>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ul>
</div>

</body>
</html>

测试结果如下：
在这里插入图片描述

链接伪类选择器
连接伪类选择器适用于超链接的伪类选择器，也可以理解为选择原元素a的状态

a的状态有：

link：未被访问（初始化的状态）
visited：被访问过的状态
tive：正在访问的状态（即选定的状态）
hover：鼠标悬浮的状态（即鼠标移动到连接上）

举个简单的例子：

<style>
    /*未被访问时颜色变为红色*/
    a:link{
        color: red;
    }
    /*被访问过侯颜色变为蓝色*/
    a:visited{
        color: blue;
    }
    /*正在访问时颜色变成黑色*/
    a:active{
        color: black;
    }
    /*鼠标悬浮时颜色变为绿色*/
    a:hover{
        color: greenyellow;
    }

</style>
<body>
<a href="#">点我</a>

</body>
</html>

由于测试结果不好截图，就期待有兴趣的小伙伴们自己测试一下啦！

目前本人在学习过程中主要接触到以上几种选择器，但是css选择器远不止如此，期待在未来会写一篇完整版的关于选择器的理解的博客。

可乐不可乐QAQ

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css几种常见的选择器

选择器是css很重要的一个内容，我在学习css的同时，总结了一下常见的几种选择器（本人目前也是web前端学习者，写下这篇博客希望能够加强自己对选择器的理解，同时也希望能够帮助大家，能够共同进步，如果有不足之处也希望各位大佬指出）通用选择器：格式： * {}通用选择器是对本页面所有元素进行操作的选择器 /*通用选择器*/ *{ /*背景色为蓝色*/ background-color:blue; /*外边距为0*/
复制链接

扫一扫