CSS选择器3

苦中苦。

已于 2022-10-11 20:32:13 修改

阅读量263

点赞数 1

文章标签：前端 html css 学习

于 2022-10-10 20:58:39 首次发布

本文链接：https://blog.csdn.net/Antoine__/article/details/127251945

版权

http://t.csdn.cn/EY5xE（入门学习1） http://t.csdn.cn/ISO0v（CSS选择器2）

http://t.csdn.cn/zpRi9 （入门学习2）

http://t.csdn.cn/PNvdB（入门学习3）

http://t.csdn.cn/hddFu（CSS选择器1）

前面学习文章的链接我给大家放在这里哦，大家可以巩固学习
今天的内容我依然以代码的形式展示，因为这些东西只要通过代码的演示，才能很好的帮助理解

知识点都注释在代码里面，大家结合着代码去看一看，然后动手敲一敲

一、a元素的伪类

<!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>
      /* 伪类  只是表示一种特殊的状态
          :link,:visited  是超链接独有的，一般用的不是很多，了解即可
          :hover,:active  是所有的标签都有，用的比较多，必须掌握
      */

      /* 需求一：给未访问过的超链接加红色字体 */
      /*1、:link  用来表示未访问过的链接（正常链接） */
      a:link{
        color: red;

      }
      /* 需求二：给访问过的超链接加绿色字体 */
      /*2、:visited 用来表示访问过的链接
               由于隐私的原因，所以visited只能改颜色 */
      a:visited{
        color: green;
        font-size: 50px;
      }
      /* 需求三：鼠标移入，链接字体变大到30px */
      /* 3、:hover 用来表示鼠标移入的状态 */
      span:hover{
        background-color: red;
        color: green;

      }
      div{
        width: 100px;
        height: 100px;
        background-color: #bfa;
      }
      div:hover{
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      /* 需求四：鼠标点击后，增加背景色pink */
      /* 4、:active  鼠标点击后的状态 ,松开鼠标，点击的状态就会结束*/
      a:active{
        font-size: 40px;
      }
      span:active{
        font-size: 40px;
      }
      div:active{
        background-color: red;
      }
    </style>
  </head>
  <body>
   <a href="#">空链接</a>
   <!-- https://www.baidu.com/ -->
   <a href="https://www.baidu.com/">百度</a>
   <a href="https://www.jd.com">京东</a>
   <a href="https://www.taobao.com/">淘宝</a>
   <span>搜狐</span>
   <!-- <div>
     box1
   </div> -->
<div class="box">
  <div class="box1">

  </div>
</div>
  </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>
      /* 需求一：让文章的首字母一直为字体为24px */
      /* 需求二：让文章的第一行添加背景色黄色 */
      /* 需求三：让选中的内容，字体为红色 */
      /* 需求四：在元素开始的位置前+'abc' */

      /* 伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）
          ::first-letter  表示第一个字母
          ::first-line  表示第一行
          ::selection  选中的内容
          ::before  元素的开始位置
          ::after   元素的结束位置
               before和after必须要结合content使用 */
      p::first-letter{
        font-size: 30px;
        color: red;
      }
      p::first-line{
        background-color: pink;
      }
      p::selection{
        color: green;
      }
      /* 加的内容，没有独占一行，所以添加的内容相当于行内元素 */
      p::before{
        content: "你好";
      }
      p::after{
        content: '你也好';
      }
    </style>
  </head>
  <body>
    <q>hello</q>
    <p>
     ipsum dolor sit amet consectetur adipisicing elit. Porro fugiat maiores sit ex expedita beatae, sint quisquam amet quod cupiditate, tempora omnis impedit deleniti, iure fuga illo
      quibusdam. Alias, soluta?
    </p>
  </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>
      /* 共同的祖先元素，一般会设置字体的大小，颜色，行高，字体，最小宽度*/
      body {
        font-size: 14px;
        color: #eee;
      }
     
      p {
        color: red;
        background-color: cadetblue;
        font-size: 20px;
      }
      /* 
      span 的背景色是透明的，你给p设置了背景色，给p设置，透出来，就是这个色了
            背景图片等，也都不会被继承 */
    </style>
  </head>
  <body>
    <p>
      我是一个p元素
      <span>我是p元素的span元素
        <em>我是span里面的em元素，我也可以继承</em>
      </span>
    </p>
    <span>我是p元素外的span元素，我不会继承</span>
  </body>
</html>

四、选择器的权重

样式冲突：

通过不同的选择器选中同一个元素，进行一样的样式设定

发生样式冲突时，应用哪一个样式由选择器的权重（优先级）决定

选择器的权重

!important 最高优先级慎用一般是用来检测是否是选择器权重问题

内联样式 1000 （PS：这些标黄的数字只是给大家参考理解使用的，没有实际用处，大家千万不要混淆）

id选择器 100

类和伪类选择器/属性选择器 10

元素选择器 1

通配符、子选择器、相邻选择器等。如*、>、+ 0000

继承的样式没有优先级

注意：

1、比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示

2、 (并集选择器)分组选择器是单独计算的

3、如果优先级计算后相同，此时则优先使用靠下的样式

4、选择器的累加，不会超过上一级数量级，

例如：类选择器再高也不会超过id选择器量变达不到质变

一般来说：

选择器越具体，优先级越高

<!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>
      
      /* body{
          background-color: green;
        } */
      /* div{
          background-color: red;
        } */
      
     /* .dd#di {
        background-color: grey;
      } */
      /* div.dd {
        background-color: khaki;
      } */
      /* [id]{
          background-color: indianred;
        }
        .dd{
        background-color: lightseagreen;
      } */
       
      #di{
          background-color: hotpink ;
        }

      /* body>div{
          background-color: lawngreen;
        } */
      /* *{
          background-color: lightblue;
        } */
        .dd.d1.d2.d3{
          background-color: lightslategray !important;
        }
    </style>
  </head>
  <body>
    <!--  -->
    <div class="dd d1 d2 d3 " id="di" style="background-color: lightseagreen">
      我是div元素
      <span>我是div中的span元素</span>
      <em>我是div中的em元素</em>
    </div>
  </body>
</html>

上述代码中注释掉的代码，大家可以一个一个解开注释，运行看看效果