选择器总结

最新推荐文章于 2024-07-26 08:00:00 发布

畅灵玉

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量75

点赞数

文章标签： css

本文链接：https://blog.csdn.net/2301_77260619/article/details/129847459

版权

选择器的分类

选择器分五大类
1基本选择器
2包含选择器
3属性选择器
4伪类选择器
5伪元素选择器

基本选择器：

其中基本选择器又包括：
标签选择器，ID选择器（id属性唯一），类选择器（class属性不唯一），通用选择器

<!DOCTYPE html>

<html>
<head>

 <title>选择器</title>

 <style type="text/css">

  /*div{
 color: red;
 }*/

 /*#one{
 color: blue;
 }*/

 /*.two{
 color: yellow;
 }*/

 *{
 color: green;
 }
 </style>
</head>
<body>

 <div id="one" class="two">

 这是第一个div
 </div>

 <div >

 这是第一个div
 </div>
</body>
</html>

经过验证发现四种选择器的优先级排序为
ID > class > 标签 > 通配符
如下图所示：
注意：左边是代码，右边是效果图
在这里插入图片描述

包含选择器：

包含选择器分为三类
1子代选择器（获取的是某个标签的第一级子标签）
2后代选择器（获取的某个标签里面所有的子标签）
3分组选择器（逗号选择器，可以同时设置多个标签，使用逗号进行分割）

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
    <style type="text/css">
        /*子代选择器*/
        div.list>ul{
            border: 1px solid red;
        }
        /*后代选择器*/
        .list li{
            border: 1px solid blue;
        }
        /*逗号选择器*/
        .one,.two,#first{
            color: green;
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px solid blue;
        }
    


    </style>
    
</head>
<body>
    <div class="one" > 这是第一个div</div>
    <div class="two" > 这是第一个div</div>
    <p id="first">这是一个段落标签</p>
    <div class="list">
        <u1>
            <li>这是列表1</li>
            <li>这是列表2</li>
            <li>这是列表3</li>
            <li>这是列表4</li>
            <li>这是列表5</li>
         </u1>
        </div>
</body>
</html>

在这里插入图片描述

属性选择器

在这里插入图片描述

伪类选择器

同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，通过:进行设置不同的样式（实现伪类选择器）
:link ------ 链接点击之前

:visited ----- 链接点击之后

:hover ------“悬停”
:active ------“激活” 鼠标点击的时候但是不松手


<!DOCTYPE html>
<html>
<head>
  <title>导航栏样式</title>
  <sytle type="text/css">
    <style>
      /* 点击之前的颜色 */
      
      a:link
      {
          color: red;
      }
      /* 点击之后的颜色 */
      a:visited
      {
          color: #00ff11;
      }
      /* 鼠标悬停的颜色 */
      a:hover
      {
          color: #2600ff;
      }
      /* 鼠标一直悬停的颜色 */
      a:active
      {
          color: #ff00e1;
      }

      /* 顺序最好固定    */
  </style>
</head>
<body>
 <a href="https://cn.bing.com/">点我</a>
</body>
</html>

四种状态的顺序最好固定:link visited hover active
link 点击之前的颜色；在这里插入图片描述

                        visited  点击之后的颜色；

在这里插入图片描述

    hover 鼠标悬停的颜色；

在这里插入图片描述
active 鼠标点击时的颜色；

伪元素选择器

在这里插入图片描述

<!DOCTYPE html>
<html >
<head>
      <title></title>
      <style type="text/css">
        p::before{
            content: "张三";
            color: red;
        }
        p::after{
            content: "李四";
            color: green;
        }


      </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>