CSS重点整理-CSDN博客

本文链接：https://blog.csdn.net/weixin_51574398/article/details/127971433

伪类及伪元素选择器

1.伪类选择器

1.1伪类（不存在的类，特殊的类）

定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定某一种。

例如：第一名，倒数第一名，鼠标悬浮，鼠标点击等。

常见的伪类选择器

语法使用‘:’开头

第一种写法：

:first-child 第一个元素

:last-child 最后一个元素

:nth-child() 选中第几个元素

特殊值：

2n或even 偶数

2n+1或odd 奇数

—以上这些伪类都是根据所有的子元素进行排序

第二种写法：

:first-of-type 第一个元素

:last-of-type 最后一个元素

:nth-of-type() 选中第几个元素

—功能跟上面相似，不同的是，这是在同类型的子元素中去选择

<body>
    <a href="#">超链接</a>

    <h1>沁园春·雪</h1>
    <h3>毛泽东</h3>
    <ul>
      <!-- <span>测试</span> -->
      <li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
      <li>北国风光，千里冰封，万里雪飘。</li>
      <li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
      <li id="l1">望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
      <li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
      <li>须晴日，看红装素裹，分外妖娆。</li>
      <li>江山如此多娇，引无数英雄竞折腰。</li>
    </ul>
  </body>

需求一：将ul里的第一个li自动一直设置为红色

 li:first-child{
          color: red;
        }

1.2:not() 否定伪类

-将符合条件的元素从选择器中去除

需求二：给所有诗句加背景色，除了l1

li:not(#l1){
          background-color: green;
        }

1.3 a元素的伪类

1、:link 没有访问过的状态

2、:visited 访问过的状态

3、:hover 鼠标移入的状态

4、:active 鼠标点击后的状态

注意：

1、:link和:visited 是a标签独有的伪类

2、由于隐私问题，:link和:visited只能设置字体颜色

3、:hover和:active 针对所有的元素

<body>
    <div>得龄</div>
    <h1>将王大量。</h1>
    <a href="#">空链接1</a>
    <a href="https://baidu.com">百度</a>
    <a href="https://jd.com">京东</a>
  </body>

需求一：给未访问过的超链接加红色字体

a:link{
        color: orange;
      }

需求二：给访问过的超链接加绿色字体

a:visited{
        color: green;
        /* 以下样式不生效 */
        font-size: 50px;
        background-color: pink;
      }

需求三：鼠标移入，链接字体变大到30px

 a:hover{
        font-size: 30px;
      }

需求四：鼠标点击后，增加背景色pink

a:active{
        background-color: pink;
      }

2.伪元素选择器

1、::first-letter 第一个字母

2、::first-line 第一行

3、::selection 选中的内容

4、::before 在元素的最前面 ::after 在元素的最后面

（必须要配合content样式名使用）

<body>
    <q>hello</q>
    <p>
      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>

需求一：让文章的首字母一直为字体为34px

p::first-letter {
        font-size: 34px;
      }

需求二：让文章的第一行添加背景色黄色

p::first-line {
        background-color: yellow;
      }

需求三：让选中的内容，字体为红色

p::selection {
        color: red;
      }

需求四：在元素开始的位置前+'你好'

p::before{
        content: "你好";
      }
      p::after{
        content: '你也好啊';
      }

3.样式的继承（继承祖先的资产）

定义：给父元素或者祖先元素设置有关样式，它会继承到子元素或后代元素上，

优势：一般情况下，样式的继承是对我们开发是有利，不需要额外调整

注意：不是所有的样式都能继承，一般情况布局上样式

共同的祖先元素，设置统一的字体大小、字体颜色、行高、字体等

<style>
       body{
         font-size: 12px;
         color: #3c3c3c;
       }
        p{
          color: red;
          font-size: 30px;
        }
    </style>
  </head>
  <body>
    <p>
      我是一个p元素
      <span>我是p元素的span元素
        <em>我是span里面的em元素，我也可以继承</em>
      </span>
    </p>
    <span>我是p元素外的span元素，我不会继承</span>
  </body>

4.选择器的权重

样式冲突：给同一个元素设置相同的样式名，不一样的样式值，最终哪个样式有效果，是看选择器的权重，谁的权重高，就有效果

选择器的权重

!important

内联样式

id选择器

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

元素选择器

通配选择器

继承样式

权重从上往下越来越小

注意：

1、如果选择器的权重一样，那么谁靠下，就谁生效

2、要让所有选择器的权重相加，最终谁大听谁的

3、所有的选择器权重相加，最高也不会超过上一等级的权重,如再多的类选择器权重相加，也不会超过id选择器权重

4、在并集选择器（群组选择器）当中，选择器权重是各算各的,最终谁大听谁的

5、!important 是最高的权重但慎用

一般情况下，可以测试使用,测试是否是选择器权重的问题

如果样式设置不成功：

1、你没选中

2、选择器权重问题 !important进行测试

注意：

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

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

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

选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器量变达不到质变

一般来说：

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

!important 慎用

5.display

（1）：将元素转成行内元素 display: inline;

（2）：将元素转成块元素 display: block;

（3）：将元素转成行内块元素 inline-block

display 实现元素之间的相互转换

可选值：

block 将元素转成块元素

inline 将元素转成行内元素

inline-block 将元素转成行内块元素

none 隐藏元素

需求一：鼠标移入section，更换背景色红色

 section:hover{
            background-color: red;
        }

需求二：strong文字隐藏，鼠标点击section的时候，strong出现

 strong{
            display: none;
        }
       section:active>strong{
           display: block;
       }