神奇的css选择器

六哥是全栈

于 2024-09-30 08:11:30 发布

阅读量342

点赞数 19

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_26913569/article/details/142647782

版权

本文六哥给大家介绍几个不常见却非常实用的css选择器，废话不多说，直接整活。

1.:focus-within

:focus-within 是 CSS 中的一个伪类，用于当元素自身或其任何后代元素获得焦点时，应用特定的样式。这个伪类对于创建更友好的用户界面非常有用，比如当用户在一个表单字段中点击或者使用 Tab 键导航到某个输入框时，可以用来高亮整个表单组。

<form>
    <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username">
    </div>
    <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" id="password" name="password">
    </div>
</form>

<style>
    .form-group {
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 10px;
    }

    .form-group:focus-within {
        border-color: blue; /* 当 input 获得焦点时改变边框颜色 */
        background-color: #eef; /* 可以同时改变背景色或其他样式 */
    }
</style>

2.:has()

:has() 是 CSS 中的一个相对较新的伪类，它允许选择器基于元素是否包含特定的后代元素来匹配元素。这个伪类非常强大，因为它可以实现以前只能通过 JavaScript 或者复杂的 HTML 结构才能达到的效果。不过需要注意的是，在撰写此信息时（2024年9月），:has() 伪类的支持情况在不同浏览器中可能有所不同。一些现代浏览器已经开始支持 :has()，但并不是所有浏览器都完全支持。因此，在使用之前，最好检查一下目标浏览器的支持情况。

<div class="has-p">
    <div>
        <input class="has-c" placeholder="使我聚焦">
    </div>
</div>

<style>
    /* 选中子元素聚焦的元素 */
    .has-p:has(:focus) {
        background: #888888;
    }
</style>

<div>
    <div>
        <span class="has-l">项目</span>
        <input class="has-v" lg-required placeholder="我有属性 lg-required">
    </div>
    <div>
        <span class="has-l">合同</span>
        <input class="has-v" placeholder="我没有属性 lg-required">
    </div>
</div>

<style>
    /* 选中紧跟的元素有lg-required属性的元素 */
    .has-l:has(+ [lg-required]):before {
        content: '*';
        color: red;
    }
</style>

3.:first-letter

:first-letter 是一个 CSS 伪元素，用于选择块级元素（如

等）或具有（display: block;、display: inline-block;、display: list-item; 或 display: table-caption;）的元素中的第一个字母，并允许你对该字母应用特定的样式。这在设计中经常用来为段落的第一个字母添加特殊效果，比如放大字体、改变颜色等。

<p>这是一个示例段落，这里展示如何使用:first-letter伪元素来美化段落的第一个字母。</p>

<style>
    p::first-letter {
        font-size: 2em;   /* 放大第一个字母的字体大小 */
        color: #ff6347;   /* 将第一个字母的颜色改为番茄色 */
        font-weight: bold; /* 加粗第一个字母 */
    }
</style>

4.:first-line

:first-line 是 CSS 中的一个伪元素，它用于选择块级元素（如

等）或具有（display: block;, display: inline-block;, display: list-item; 或 display: table-caption;）的元素中的第一行文本，并允许你对该行应用特定的样式。这在设计中常用来为段落的第一行添加特殊效果，比如改变字体颜色、增加行间距等。

<p>这是一个示例段落。这里展示如何使用:first-line伪元素来美化段落的第一行。你可以看到，只有这一行被特别地样式化了。</p>

<style>
    p::first-line {
        font-size: 1.2em;   /* 放大第一行的字体大小 */
        color: #ff6347;     /* 将第一行的颜色改为番茄色 */
        font-weight: bold;  /* 加粗第一行 */
    }
</style>

5.:selection

:selection 是一个 CSS 伪元素，用于定义当用户选择（即高亮）文本时的样式。这可以用来改变选中文本的颜色、背景颜色等，从而提升用户体验或符合网站的整体设计风格。

<p>这是一个示例段落。试着选择一些文本来看看效果。</p>

<style>
    p::selection {
        color: white;          /* 选中文本的颜色 */
        background-color: blue; /* 选中文本的背景颜色 */
    }
</style>