你不知道的css选择器

远之喵
359 阅读3分钟

在网页开发中，CSS 不仅是美化页面的工具，还能实现各种实用的功能效果。本文将介绍两个有趣的 CSS 应用案例。

一、Form 表单必选样式设置

demo

image.png

效果

image.png

在处理表单时，为了明确必选字段，提升用户体验和数据准确性，我们利用纯 CSS 样式实现了必选项的红色星号展示。通过组合使用:after、:has和:focus-within这三个强大的 CSS 属性，达到了简洁而高效的效果。

  • :after属性允许我们在元素之后插入额外的内容，在这个案例中，我们在必选表单字段的标签后添加了红色星号。
  • :has属性可以根据一个元素是否包含特定的子元素来选择该元素。在这里，我们可以通过它选择包含必选输入字段的表单元素。
  • :focus-within属性在表单元素获得焦点时起作用，确保当用户开始输入时，必选样式依然清晰可见。

`html

<style>
    .form-container {
        width: 380px;
        margin: 0 auto;
        margin-top: 100px;
        text-align: center;
    }
    .txt {
        border: 1px solid #ccc;
        padding: 8px;
        margin: 10px;
    }
    .txt:focus {
        border-color: #409eff;
        outline: none;
    }
    input.txt {
        caret-color: red;
        font: 16px "Helvetica", "Arial", "sans-serif";
    }
    .form-item {
        height: 50px;
        transition: .5s;
    }

    .form-item:focus-within {
        background-color: #eee;
    }
    .label {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: center;
    }
    .label input {
        width: 250px;
        height: 10px;
    }
    .label span {
        display: inline-block;
        width: 50px;
        margin-right: 10px;
    }

    .label span:has(+input[data-require])::after {
        content: '*';
        color: red;
    }
</style>
<body>
    <div class="form-container">
        <div class="form-item">
            <label class="label" for="">
                <span>姓名:</span>
                <input class="txt" data-require type="text" name="" id="">
            </label>
        </div>
        <div class="form-item">
            <label class="label" for="">
                <span>密码:</span>
                <input class="txt" type="password" name="" id="">
            </label>
        </div>
        <div class="form-item">
            <label class="label" for="">
                <span>电话:</span>
                <input class="txt" type="text" name="" id="">
            </label>
        </div>
    </div>
</body>

`

这种纯 CSS 的实现方式避免了繁琐的 JavaScript 代码，提高了开发效率，同时也使页面更加简洁和易于维护。

二、文章可选背景样式设置与默认首字母样式调整

① demo

image.png

② 选中效果

image.png

<style>
       .content {
            font-size: 1.2em;
            line-height: 2;
            -webkit-font-smoothing: antialiased;
            color: #333;
        }

        .content::first-letter {
            font-size: 4em;
            text-transform: uppercase;
            float: left;
            line-height: 1;
            margin-right: 10px;
        }
        .content::selection {
            background: black;
            color: #409eff;
        }
</style>
<body>
 <p class="content">
        Lorem, ipsum dolor sit amet consectetur

        adipisicing elit. Laudantium ex qui asperiores.

        Adipisci, ipsam aliquid cupiditate laborum distinctio dolor

        neque voluptatem
        sit laudantium nam, accusamus odit ipsum maxime ratione placeat!

        Lorem ipsum dolor, sit amet consectetur adipisicing elit.

        Eaque quos ipsam officia aspernatur sint. Voluptatem, a illo. Quod sed sequi saepe inventore dicta eum
        quidem tempora, explicabo, qui nostrum unde distinctio reiciendis esse sit nihil. Rem natus error adipisci

        veritatis ratione molestiae sed itaque unde quos, id veniam aliquam debitis cupiditate illo, a amet modi
        perferendis pariatur autem. Recusandae nam accusamus exercitationem incidunt eius quaerat animi aspernatur.
        Harum amet minima voluptatibus earum dolor eius optio maxime, iste officia ab cum veritatis

        ipsum rerum numquam deleniti laborum voluptates veritatis! Sunt voluptate quasi inventore non sequi

        quo id a eos doloribus eveniet.

    </p>
</body>

对于文章页面，我们可以通过 CSS 为其设置可选的背景样式，增强页面的视觉效果和可读性。

  • 可选背景样式可以根据不同的主题或用户偏好进行切换，为用户提供个性化的阅读体验。通过设置不同的背景颜色、纹理或图像，可以营造出不同的氛围。

  • 默认首字母样式调整可以让文章的开头更加突出和吸引人。可以通过 CSS 的::first-letter伪元素来选择文章的首字母，并对其进行字体大小、颜色、装饰等方面的调整。

这些样式设置不仅可以提升文章的美观度，还可以引导读者的注意力，提高文章的阅读体验。

总之，通过巧妙地运用 CSS 属性，我们可以在不依赖复杂的 JavaScript 代码的情况下，实现丰富的页面效果和功能。无论是表单的必选样式设置还是文章的样式调整，CSS 都为我们提供了强大而灵活的工具，让我们能够创造出更加出色的网页设计。

avatar
文章
阅读
粉丝