【6.0】CSS之选择器

【一】分组与嵌套

【1】分组

（1）语法

/*查找div或者p或者span*/
div, p, span {
    color: red;
}

（2）示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div {
      color: red;
    }
    
    p {
      color red;
    }
    
    span {
      color: red;
    }
  </style>
  
</head>
<body>
<div>这是div标签</div>
<p>这是p标签</p>
<span>这是span标签</span>
</body>
</html>

上述方法，重复代码造成了代码的冗余

（3）优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /* 逗号表示并列关系 */
    div,span,p {
      color: red;
    }
  </style>

</head>
<body>
<div>这是div标签</div>
<p>这是p标签</p>
<span>这是span标签</span>
</body>
</html>

【2】嵌套

（1）语法

/*查找id是d1或者class包含c1或者span*/
#d1, .c1, span {
    color: red;
}

（2）示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /* 嵌套 */
    #div, .c1,span {
      color: red;
    }
  </style>

</head>
<body>
<div class="c1">这是div标签</div>
<p class="c1">这是p标签</p>
<span class="c1">这是span标签</span>
</body>
</html>

【3】综合

（1）玩法1

div#d1		查找id是d1的div标签
div.c1		查找class包含c1的div标签

（2）玩法2

div #d1   查找div内部id是d1的后代标签
#d1>.c1	  查找id是d1的内部class包含c1的儿子标签

【二】伪类选择器

【1】概览

/*# 1.鼠标悬浮*/
p:hover {
    /*鼠标移动到p标签上方 字体颜色动态修改为橙色*/
    color: orange;
}

/*# 2.获取聚点*/
input:focus {
    /*输入框被鼠标左键选中(聚焦) */
    background-color: black;
}

/*#3.常态*/
a:link {
    /* 常态 */
    color: red;
}

/*4.访问之后修改状态*/
a:visited {
    /* 访问之后的状态 */
    color: burlywood;
}

/*5.鼠标点击，激活*/
a:active {
    /* 鼠标点击不松开 激活态 */
    color: blue;
}

【2】示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link {
            color: red; /* 常态 */
        }

        a:hover {
            color: green; /* 鼠标悬浮态 */
        }

        a:active {
            color: blue; /* 鼠标点击不松开 激活态 */
        }

        a:visited {
            color: burlywood; /* 访问之后的状态 */
        }
        
        input:focus {
            background-color: red; /* input输入框获取焦点(input被选中) */
        }
        
    </style>
</head>
<body>
<a href="https://www.xiaohuar.com/"> 当前网址是否存在 </a>
<input type="text">
</body>
</html>

【三】伪元素选择器

【1】语法

/*1.修改首个字体样式*/
p:first-letter {
    color: red;
    font-size: 48px;
}

/*2.在文本开头添加内容*/
p:before {
    content: '哈哈';
    color: blue;
}

/*3.在文本结尾添加内容*/
p:after {
    content: '嘿嘿';
    color: yellow;
}

【2】示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-letter { /* 第一个文字加效果 */
            font-size: 48px;
            color: red;
        }
        
        p:before { /* 在文本开头添加内容并且带有装饰，无法被选中! */
            content: "这是一句话";
            color: burlywood;
        }
        
        p:after {/* 在文本结尾添加内容并且带有装饰，无法被选中! */
            content: "?";
            color: blue;
        }
        
        
    </style>
</head>
<body>
<p>
    这是一个p标签
</p>
</body>
</html>
  • befor 和 after 通常都是用来清除浮动带来的影响
  • 即父标签塌陷的问题

【3】使用场景

  • 用于后面清除浮动带来的负面影响
  • 用于网站的内容防爬

【四】选择器优先级

【1】概述

  • id选择器
  • 类选择器
  • 标签选择器
  • 行内选择器

【2】选择器相同 书写顺序不同

  • 就近原则：谁离得近，就使用谁的样式

【3】选择器不同 ...

  • 行内选择器 > id选择器 > 类选择器 > 标签选择器
  • 精确度越高，优先级越高
posted @ 2024-02-27 08:29  Chimengmeng  阅读(6)  评论(0)  编辑  收藏  举报