HTML5+CSS3基础（day7）

澈如冬雪^

已于 2023-01-03 23:41:50 修改

阅读量86

点赞数 1

文章标签： css3 html5 css

于 2023-01-03 23:39:39 首次发布

本文链接：https://blog.csdn.net/m0_52372037/article/details/128540936

版权

本文介绍了CSS中的复合选择器，包括并集选择器的应用，如如何修改熊大、熊二和小猪一家的颜色。同时，详细讲解了链接伪类选择器，如`:link`,`:visited`,`:hover`和`:active`，以及它们在不同状态下的链接样式。此外，还提到了`focus`伪类在表单元素获取焦点时的效果。最后，文章简述了元素显示模式，特别是行内元素的特点，强调了块元素和行内元素的区别。

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

一、复合选择器（续）

1.并集选择器

在这里插入图片描述

示例

<title>复合选择器之并集选择器</title>
    <style>
        /* 要求1：请把熊大和熊二改为粉色 */
        div,
        p {
            color: pink;
        }

        /* 要求2：请把熊大熊二改为粉色，把小猪一家也改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }

        /* 约定的语法规范，并集选择器喜欢竖着写 */
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

2.链接伪类选择器

在这里插入图片描述

示例

<title>复合选择器之链接伪类选择器上</title>
    <style>
        /*1. 未访问的链接 a:link 把没有点击过的（访问过的）链接选择出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 2. a:visited 选择点击过的（访问过的）链接 */
        a:visited {
            color: orange;
        }

        /* 3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择的是鼠标正在按下还没有弹起，的那个链接 */
        a:active {
            color: green;
        }

        /* lvha顺序 */
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxx.com">未知网站</a>
</body>

<title>复合选择器之链接伪类选择器下</title>
    <style>
        body {
            /* a链接需要单独指定样式，像这样不会变颜色 */
            color: red;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: #369;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxx.com">未知网站</a>
</body>

3.focus伪类选择器

在这里插入图片描述

示例

<title>focus伪类选择器</title>
    <style>
        /* 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            /* 输入文字的时候变色，失去光标的时候就没色了 */
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

4.复合选择器总结

在这里插入图片描述

二、CSS的元素显示模式

在这里插入图片描述

1.什么是元素显示模式

在这里插入图片描述

2.元素显示模式的分类

（1）块元素

在这里插入图片描述

（2）行内元素

在这里插入图片描述

示例

 <title>显示模式之行内元素</title>
    <span>
        <style>
            span {
                /* 行内元素宽、高直接设置是无效的 */
                width: 100px;
                height: 100px;
                background-color: hotpink;
            }
        </style>
    </span>
</head>

<body>
    <!-- 默认宽度是它本身内容的宽度 -->
    <span>爱情就像水痘</span> <strong>你该早点经历</strong>
    <span>因为晚几年的话</span> <strong>它真有可能会要了你的命</strong>
</body>