伪类的用法及盒子设置边距

最新推荐文章于 2024-03-29 03:40:23 发布

Ospaceman

最新推荐文章于 2024-03-29 03:40:23 发布

阅读量440

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/Ospaceman/article/details/129230241

版权

本文详细介绍了CSS中的伪类链接选择器和相邻选择器的使用，包括链接的四种状态和如何应用于其他标签。同时，深入解析了CSS盒模型的概念，包括内容(content)的width和height属性，内边距(padding)，边框(border)以及外边距(margin)的应用，特别是外边距在居中布局中的作用。此外，还讨论了CSS中元素的显示与隐藏技巧，如display:none和visibility:hidden的区别。

摘要由CSDN通过智能技术生成

一、复合选择器

1、伪类链接选择器

用于添加特殊效果

语法

    选择器:伪类{ }

用于设置链接的不同状态

    a:link{ 链接的默认样式 }
    a:visited{ 链接访问过后的样式 }
    a:hover{ 鼠标悬停的样式 }
    a:active{ 鼠标按下的样式 }
    
    a:link {
            color: tomato;
        }

        a:visited {
            color: yellow;
        }

        a:hover {
            color: purple;
        }

        a:active {
            color: greenyellow;
        }

四个伪类状态都有效：L-v-H-a

:hover不仅可以表示链接的悬停，也可以用于其他标签中

/* 鼠标悬停到.box1盒上，让其本身的背景颜色变为蓝色 */
    .box1:hover{
        background-color: lightblue;
    }
/* 鼠标悬停到.box2盒上，让p标签文字颜色变为红色 */
    .box2:hover p{
        color: red;
    }
/* 鼠标悬停到.box3上，让p标签和h3标签的文字颜色都变为blue */
    .box3:hover h3,
    .box3:hover p{
        color: red;
    }
    
    .box3  :hover{
        color: blue;
    }

2、相邻选择器

兄弟之间的hover
<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            background: tomato;
        }

        .con {
            width: 300px;