HTML——选择器总结（直观一目了然）

最新推荐文章于 2024-07-14 03:14:21 发布

火腿我选王中王

最新推荐文章于 2024-07-14 03:14:21 发布

阅读量6k

点赞数 13

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_68917948/article/details/129870632

版权

文章详细介绍了CSS选择器的不同类型，包括基本选择器（标签选择器、ID选择器、类选择器、通用选择器）、包含选择器（子代选择器、后代选择器、分组选择器）、属性选择器以及伪类和伪元素选择器，并提供了相应的代码示例来展示如何使用这些选择器来控制HTML元素的样式。

摘要由CSDN通过智能技术生成

1、选择器是什么？

CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。

2、选择器的分类

css选择器可以分为基本选择器、包含选择器、属性选择器、伪类选择器和伪元素选择器几类。

其中基本选择器又可以细分为：标签选择器、ID选择器、类选择器和通用选择器。

包含选择器可以分为：子代选择器、后代选择器和分组选择器。

2.1基本选择器

2.1.1 标签选择器

标签选择器是通过获取标签的名称来进行设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>选择器</title>
</head>
   <style type="text/css">
      div{
          color:  red;
      }
   </style>
<body>
    <div id="wang" class="bao">yes yes yes </div>
</body>
</html>

2.1.2 ID选择器

ID选择器是通过获取ID的属性来进行设置，使用 #+ID属性值来选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>选择器</title>
</head>
   <style type="text/css">
      #wang{
         color: black;
      }
   </style>
<body>
    <div id="wang" class="bao">yes yes yes </div>
</body>
</html>

2.1.3 类选择器

类选择器是通过获取class属性来进行设置，使用 .+class属性值来选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>选择器</title>
</head>
   <style type="text/css">
      .bao{
         color:green;
      }
   </style>
<body>
    <div id="wang" class="bao">yes yes yes </div>
</body>
</html>

2.1.4 通用选择器

通用选择器使用 * 来代指，它代表的是选中了父元素中的所有内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>选择器</title>
</head>
   <style type="text/css">
    *{
      color: blue;
    }
   </style>
<body>
    <div id="wang" class="bao">yes yes yes </div>
    <div>no no no</div>
</body>
</html>

ps:优先级为：ID > class > 标签 > 通配符

2.2 包含选择器

2.2.1 子代选择器

子代选择器是通过获取某个标签的第一级子标签来设置。格式为：标签.属性值>子标签{}

<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">
    /*子代*/
    div.wang>ul{
         border: 1px solid red;
    }
  </style>
</head>
<body>
    <div class="bao">有何不可</div>
    <div title="jiang">最佳歌手</div>
    <div class="wang">
      <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
      </ul>
    </div>
</body>
</html>

2.2.2 后代选择器

后代选择器是通过获取的某个标签里面所有的子标签来设置。格式为：.属性名二级子标签{}

<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">
    /*后代*/
    .wang li{
        border: 1px solid yellow;
    }
</style>
</head>
<body>
    <div class="bao">有何不可</div>
    <div title="jiang">最佳歌手</div>
    <div class="wang">
        <ul>
          <li>列表1</li>
          <li>列表2</li>
          <li>列表3</li>
        </ul>
      </div>
</body>
</html>

2.2.3 分组选择器

也叫做逗号选择器，可以同时设置多个标签，使用逗号进行分割。

<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">
    .bao,.jiang,#xu{
        color: aqua;
        width: 50;
        height: 50;
        background:pink;
        border: 5px solid rgb(132, 0, 255);
    }
</style>
</head>
<body>
    <div class="bao">有何不可</div>
    <div title="jiang">最佳歌手</div>
    <p id="xu">许嵩</p>
    <div class="wang">
        <ul>
          <li>列表1</li>
          <li>列表2</li>
          <li>列表3</li>
        </ul>
      </div>
</body>
</html>

2.3 属性选择器

元素带有属性，属性选择器就是通过选中带有特定属性的元素进行设置。

<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">
    /*选中含有title属性的div标签*/
    div[title]{
                border: 1px solid black;
               } 
    /*选中type属性的值为text的input标签*/
    input[type="text"]{
                        background: 1px solid  red;
                      }
    /*选中type属性的值中含有'e'的input标签*/
    input[type *="e"]{
                        background: blue;
                     }
    /*选中type属性的值以'e'开头的input标签*/
    input[type ^="e"]{
                        background: green;
                    }
    /*选中type属性的值以'rl'结尾的input标签*/
    input[type $="rl"]{
                        background: red;
                      }
    /*+表示选中下一个标签*/
    .msg +p{
                        border: 1px solid green;
                      }
    /*选中title属性值为'jiang'的标签*/
    [title="jiang"]{
                        color: red;
                    }
</style>
</head>
<body>
    <div class="bao">有何不可</div>
    <div title="jiang">最佳歌手</div>
    <input type="text" name="" value="wang">
    <input type="email" name="" value="bao">
    <input type="url" name="" value="jiang">
    <p class="hao">hello!</p>
</body>
</html>

2.4 伪类选择器

即同一个标签，在不同的状态下显示出来的效果不同，通过设置不同的样式来实现.

状态： :link 点击之前

:visited 点击之后

:hover 悬浮时

:active 长按不松手时

<!DOCTYPE html>
<html lang="en">
<head>

<title></title>
    <style type="text/css">
         /*点击之前的状态*/
         a:link{
            color: red;
         }
         /*点击之后的状态*/
         a:visited{
            color:chartreuse;
         }
         /*指针悬浮时的状态*/
         a:hover{
            color: darkmagenta;
         }
         /*长按不松手时的状态*/
         a:active{
            color: pink;
         }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">点这里</a>
</body>
</html>

2.5 伪元素选择器

状态： ::before

::after

::before

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
    <style type="text/css">
        p::before{
            content:"阿珍";
            color: red;
        }
        p::after{
            content:"阿强";
            color: aqua;
        }
    </style>
</head>
<body>
    <p>爱上了</p>
</body>
</html>