CSS常见选择器

桉榆

已于 2024-03-12 20:52:04 修改

阅读量587

点赞数 16

分类专栏：总结文章标签： css

于 2024-03-12 20:43:39 首次发布

本文链接：https://blog.csdn.net/weixin_65096435/article/details/136661448

版权

总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.基础选择器

选择器作用：查找标签设置样式

标签选择器：使用标签名作为选择器
类选择器：（1）定义类选择器 --> .类名（2）使用类选择器标签添加 class = "类名"

<style>
    /* 定义 */
    .green{
      color: green;
    }

    .size {
      font-size: 10px;
    }
  </style>

  <!-- 使用 -->
  <!-- 一个类选择器可以给多个标签使用 -->
  <p class="green">1111</p>
  <p>2222</p>
  <!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 -->
  <div class="green size">div 标签</div>

id选择器：（1）在CSS中定义 id选择器 ---> #id自定义名字

（2）使用id选择器 --> 标签添加属性 id= "id名字"

<head>
  <style>
    /* 定义 */
    #green{
      color: green;
    }
  </style>
</head>
<body>
  <!-- 使用 -->
  <div id="green">div 标签</div>
</body>

通倍符选择器：* {}

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

<body>
  <p>p 标签</p>
  <div>div 标签</div>
  <h1>h1 标签</h1>
  <ul>
    <li>li</li>
    <li>li</li>
    <li>li</li>
  </ul>
  <strong>strong</strong>
</body>

2.复合选择器

定义：两个或者多个基础选择器组成 通过不同的方式组合而成

作用：更准确，更高效的选择目标元素

常用的复和选择器：后代，子代，并集，伪类

（1）后代选择器：选中某元素的后代元素；

写法：父选择器子选择器 { CSS 属性}，父子选择器之间用空格隔开。

范围：选中是指定的所有后代包含儿子和孙子。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后代选择器</title>
  <style>
    /* div 里面的 span 文字颜色是绿色 */
    /* 后代选择器，选中所有后代，包含儿子、孙子、... */
    div span {
      color: green;
    }
  </style>

（2）子代选择器：范围：选中的是亲儿子元素（即嵌套的第一层元素）

语法： 选择器1 >选择器2 {}

<head>
  <title>子代选择器</title>
  <style>
    /* div 的儿子 span 文字颜色是绿色 */
    div > span {
      color: green;
    }
  </style>
</head>

（3）并集选择器：范围：选中的是多组标签设置同样的样式

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

（4）伪类选择器：表示元素的状态，选中某个状态设置样式

鼠标悬停的状态：选择器:hover {} 只有鼠标移入悬停才会触发这个样式

  <style>
    /* 任何标签都可以设置鼠标悬停的状态 */
    a:hover {
      color: red;
    }

    /* div:hover */
    .box:hover {
      color: green;
    }
  </style>
</head>
<body>
  <a href="#">这是个a 标签，超链接</a>
  <div class="box">div 标签</div>
</body>