实训第四天css——伪类

沐影y_

已于 2022-11-21 16:24:23 修改

阅读量82

点赞数

文章标签： html 前端

于 2022-11-21 15:16:59 首次发布

本文链接：https://blog.csdn.net/muying0302/article/details/127964377

版权

**/* 伪类（不存在的类，特殊的类**）

定义：不真实存在的类，它表示元素的一种状态

例如：鼠标悬浮鼠标点击

常见的伪类选择器

语法使用 “：”开头

：first-child 第一个元素

：last-child 最后一个元素

：nth-child（）选中第几个元素

特殊值：

2n或even 偶数

2n+1或odd 奇数

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

：first-of-type 第一个元素

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

：nth-of-type（）选中第几个元素

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

a元素的伪类

    <STYle>
        /* 需求一：给未访问的超链接加红色字体 */
        /* 1 ：link 没有访问过的状态 */
        a:link {
            color: orange;
        }

        /* 需求二 给访问过的超链接加绿色字体 */
        /* 2. ：visited 访问过的状态 */
        a:visited {
            color: green;
        }

        /* 需求三 鼠标移入，链接字体变大到30px*/
        /* 3. ：hover 鼠标移入的状态 */
        a:hover{
            font-size: 30px;
            color: pink;
        }
        /* 需要四：鼠标点击后，增加背景色 */
        /* 4. ：active 鼠标点击后的状态 */
        a:active{
            background-color: red;
        }
        /* 注意 
        hover，active 针对所有元素
        */
    </STYle>

伪元素的选择器

    <STyle>
        /* 伪元素 */
        /* 要求一 要文章的首字母一直为字体24px */
        /* 1.::first-letter 第一个字母*/
        p::first-letter{
            font-size: 24px;
        }
        /* 需求二 让文章的第一行添加背景色黄色 */
        /* 2. ::first-line 第一行 */
        p::first-line{
            background-color: yellow;
        }

        /* 需求三 让选中的内容，字体变红色 */
        /* 3. ::selection */
        p::selection{
            color: red;
        }
        /* 需求四 在元素开始的位置前面+“abc” */
        /* 4. ::before 在元素的最前面 */
         p::before{
            content: "ABC";
        } 
         p::after{
            content: "ABC";
        } 
        
        
    </STyle>

继承

/* 共同的祖先元素，设置统一的字体大小 */

/* 样式的继承（继承祖先的遗产）

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

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

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

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

选择器权重

<!-- 样式冲突：给同一个元素设置相同的样式名，不一样的样式值，最终哪个样式有效果

是看选择器的权重，谁的权重高，就有效果

选择器权重:

内联样式 1000

id选择器 100

class选择器/属性选择器 10

元素选择器 1

通配选择器 0

继承样式没有权重

注意：

1.如果选择器权重一样，那么谁在下谁生效（自上而下）

2.要让所有选择器权重相加，最终谁大听谁的（类似于交集选择器中）

3.在并集选择器（群组选择器）当中权重是各算各的

4.所有的选择器权重相加，最高不会超过上一个等级{比如11个class选择器也没有一个id选择器权重高}

5. !important 是最高的权重但慎用（不好修改）

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

-->

display 元素之间转换

元素分类

块元素

1.独占一行

2.宽度是父元素或者祖先元素内容区的宽度

3.高度是被内容撑开的

可以自定义宽高

行内元素

1.不会独占一行

2.宽高都是被内容撑开的，不可以自定义宽高

行内块元素

兼具块元素和行内元素的特点，即不会独占一行，可以设置宽高

<!-- 元素之间的相互转换，

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

可选值

block 将元素转成块元素

inline 将元素转成行内块元素

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

none 隐藏元素

-->

    <style>
        div{
            background-color: red;
            /* 设置元素的宽度 */
            width: 300px;
            /* 设置元素的高度 */
            height: 200px;
        }
        span{
            background-color: green;
            /* 将元素转成块元素 */
            display: block;
            width: 300px;
            height: 200px;
        }
        em{
            background-color: orange;
            /* 将元素转成块元素 */
            display: block;
            width: 300px;
            height: 200px;
        }
        p{
            /* 隐藏元素 */
            display: none;
            
        }
        em:hover+p{
            display:block ;
            background-color: pink;
            width: 300px;
            height: 200px;
        }
        section{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
        /* 需求一 鼠标移入section，更改背景颜色红色 */
        section:hover{
            background-color: pink;
        }
        /* 需求二 strong文字隐藏,鼠标点击section时候,strong出现 */
        strong{
            display: none;
        }
        section:active>strong{
            display: block;
        }

    </style>