【CSS选择器大总结】

最新推荐文章于 2024-05-04 20:38:31 发布

zyj_cute

最新推荐文章于 2024-05-04 20:38:31 发布

阅读量198

点赞数

分类专栏： css的学习文章标签： css 学习 html

本文链接：https://blog.csdn.net/qq_41564804/article/details/130721935

版权

css的学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css选择器总结

css常见选择器

css常见选择器

开发中经常需要找到特定的网页元素进行设置样式，此时就会用到各种选择器，我们会涉及到的选择器有：

通用选择器（universal selector）
元素选择器（type selectors）
类选择器（class selectors）
id选择器（id selectors）
属性选择器（attribute selectors）
组合选择器（combinators）
伪类（pseudo-classes）
伪元素（pseudo-elements）

❤❤❤具体的使用和效果，让我的猪宝们一起来探索吧：❤❤❤

1.通用选择器：一般用来给所有元素作一些通用性的设置。

作用范围：所有的元素都会被选中。
应用范围：内边距、外边距、重置一些内容。

<style>
body, p, div, h2, span {
      margin: 0;
      padding: 0;
      color: green;
    }
</style>

<body>
  
  <div>你好</div>
  <p>我好</p>

  <div>
    <h2>大家好</h2>
    <p>都好  <span>好极了</span> </p>
  </div>

</body>

2.简单选择器：开发中常用的选择器（括号中对应使用方法）

简单选择器分类：

元素选择器（元素标签的名称）、
类选择器（.类名）、
id选择器（#id）(id是唯一的，取名字不可重复)；

<style>
    div {
      color: red;
    }

    .zyj {
      color: blue;
    }

    #home {
      color: green;
    }
  </style>

<div>div元素</div>
  <div class="zyj">一个美女</div>
  <div id="home">努力猪</div>

  <p class="zyj">一个P元素</p>

  <h2 id="div">p标签</h2>

3.属性选择器：选择器用于选取带有指定属性的元素。

[attribute] 选择器用于选取带有指定属性的元素。
[attribute=“value”] 选择器用于选取带有指定属性和值的元素。
[attribute~=“value”] 选择器选取属性值包含指定词的元素。
[attribute|=“value”] 选择器用于选取指定属性以指定值开头的元素。
[attribute^=“value”] 选择器用于选取指定属性以指定值开头的元素。
[attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素。
[attribute*=“value”] 选择器选取属性值包含指定词的元素。
注意：重点在于分辨出属性和值，然后通过公式对其进行引用。

<style>
    [target] {
      color: red;
    }
    [title=h2] {
      background-color: blue;
    }
  </style>

<body>
  
  <div>我是div元素</div>
  <a target="div">hello</a>
  <h2 title="h2">world</h2>
</body>

4.后代选择器：又称为包含选择器，可以选择作为某元素后代的元素。

全选所有的后代：选择器之间用空格分隔；
后代选择器的进一步说明：通常用单个空格（" "）字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。

.home span {
      color: yellow;
      font-size: 40px;
    }

 <div class="home">
    <span>啦啦啦啦</span>  
    <div class="box">
      <p>我是p元素</p>
      <span class="home1">呵呵呵呵</span>
    </div>

    <div class="home-item">
      <div class="item">
        <p>
          <span class="home1">哈哈哈哈</span>
        </p>
      </div>
    </div>
  </div>
  <div class="home-unselected">不会变色</div>

5.子组合器：（>）被放在两个 CSS 选择器之间，它只匹配那些被第二个选择器匹配的元素，这些元素是被第一个选择器匹配的元素的直接子元素。

 .home > span {
      background-color: green;
    }

<div class="home">
    <span>hello</span>
    <span>喜喜</span>  
    <div class="box">
      <p>我是p元素</p>
      <span class="home-item">呵呵呵呵</span>
    </div>
    <span>zyjzyj</span>
    <span class="hei">嘿嘿</span>
    <div class="content">
      <div class="desc">
        <p>
          <span class="home-item">哈哈哈哈</span>
        </p>
      </div>
    </div>
  </div>

**6.兄弟选择器：**分为通用兄弟选择器（~）和相邻兄弟选择器 (+) 。

相邻兄弟选择器： (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父 element 的子元素，则第二个元素将被选中。
通用兄弟选择器：（~）将两个选择器分开，并匹配第二个选择器的所有迭代元素，位置无须紧邻于第一个元素，只须有相同的父级元素。

<body>
  <div class="home">
    <div>hello</div>
    <div class="box">world</div>
    <div class="content">a</div>
    <div>beautiful</div>
    <div>universal</div>
    <p>pppppp</p>
  </div>
</body>

<style>
    .box + .content {
      color: red;
    }

    .box ~ div {
      font-size: 30px;
      background-color: blue;
      color: orange;
    }
 </style>

效果：
在这里插入图片描述
7.选择器列表：CSS 选择器列表（,）选择所有匹配的节点。选择器列表是以逗号分隔的多个选择器所组成的列表。
选择器列表的分类

并集选择器：在开发中通常为了给多个元素设置相同的样式，两个选择器之间用逗号（，）分割。
并集选择器的详细解释：当多个选择器共享相同的声明时，它们可以被编组进一个以逗号分隔的列表。选择器列表也可以作为参数传递给一些函数式 CSS 伪类。逗号之前和/或之后可以有空白（字符）。
交集选择器：在开发中精准的选择某一个元素。

<style>
/* 并集选择器 */
    .box1,p,h1 {
      color: red;
      font-size: 40px;
    }
</style>

<body>
<!-- 并集选择器 -->
  <p>我是p元素</p>
  <h1>我是h1元素</h1>
  <div class="box1">我是div1元素</div>
  <div class="box2">我是div2元素</div>
  <br>我是脑title</br>
</body>

在这里插入图片描述

/*交集选择器*/
<style>
    div.box {
      color: green;
    }
</style>

<body>
<!--交集选择器-->
  <div class="box">我是div元素</div>
  <p class="box">我是p元素</p>
</body>

在这里插入图片描述
伪类和动态伪类和伪元素的说明见文章添加链接描述

zyj_cute

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS选择器大总结】

开发中经常需要找到特定的网页元素进行设置样式，此时就会用到各种选择器，掌握了选择器就是知道化妆的时候知道把哪个化妆品往脸上哪个地方抹，所以我们一定要学会哟。
复制链接

扫一扫

专栏目录

【CSS选择器大总结】

css选择器总结

css常见选择器

“相关推荐”对你有帮助么？