css3选择器

孙景荣

已于 2023-01-28 16:08:12 修改

阅读量93

点赞数

分类专栏： CSS 文章标签： css3 前端

于 2022-09-30 16:01:51 首次发布

本文链接：https://blog.csdn.net/ssjjrr/article/details/127125009

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、属性选择器

就是某个元素设置了属性，可以通过属性选择这个元素

1.E[attr] 选中标签和属性
2.E[attr=“value”] 选中带有属性值的属性(E表示标签，[]表示设置属性，attr属性)

以下代码，通过属性选择器，选择不同的p标签，设置不同字体颜色

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
 <style>
   p[title1] {
     color: red;
   }
   p[title2="second"] {
     color: blue;
   }
 </style>
</head>
<body>
 <p title1>标题一</p>
 <p title2="second">标题二</p>
 <p>标题三</p>
</body>
</html>

在这里插入图片描述

二、结构选择器

当某个标签重复出现的时候，可以通过结构选择器，选择其中某个标签

1.当所有的标签名称都是一样
X:first-child{} 选中集合下第一个元素
X:last-child{} 选中集合下最后一个元素
X:nth-child(序号){} 选中集合下第几个(从前往后数)
X:nth-last-child(序号){} 选中集合下第几个(从后往前数)
2.当标签名称不一样的时候:相同标签作为一个集合，在集合中选择第几个
X:first-of-type{} 选中集合下的第一个元素
X:last-of-type{} 选中集合下的最后一个元素
X:nth-of-type(序号){} 选中集合下第几个(从前往后数)
X:nth-last-of-type(序号){} 选中集合下第几个(从后往前数)

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <style>
      div:first-child {
        color: red;
      }
      div:nth-child(3) {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div>标题1</div>
    <div>标题2</div>
    <div>标题3</div>
    <div>标题4</div>
    <div>标题5</div>
    <div>标题6</div>
  </body>
</html>

在这里插入图片描述

三、目标选择器

目标选择器: 通过绑定锚点点击控制元素的状态
使用方法 :target需要给改变的元素添加

以下代码，通过目标选择器，点击开关，灯的样式由1变为2

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <style>
      div:target {
        color: pink;
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <div id="box">灯</div>
    <a href="#box">开关</a>
  </body>
</html>

在这里插入图片描述

四、层级选择器

 - > 直接子级元素
 - + 相邻元素(后面的一个)
 - ~ 相邻元素(后面的所有)

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <style>
    .father > div {
      color: red;
    }
    .box3 + div {
      color: blue;
    }
    .box6 ~ div {
      color: greenyellow;
    }
  </style>
</head>
<body>
  <div class="father">
    盒子1
    <div>盒子1的子级元素</div>
  </div>
  <div>盒子2</div>
  <div class="box3">盒子3</div>
  <div>盒子4</div>
  <div>盒子5</div>
  <div class="box6">盒子6</div>
  <div>盒子7</div>
  <div>盒子8</div>
  <div>盒子9</div>
</body>
</html>

在这里插入图片描述