神奇的 css 选择器

2024-09-30
广西
本文字数：1906 字
阅读完需：约 6 分钟

本文六哥给大家介绍几个不常见却非常实用的 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 伪元素，用于选择块级元素（如 <p>, <div>, <h1> 等）或具有（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 中的一个伪元素，它用于选择块级元素（如 <p>, <div>, <h1> 等）或具有（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>

复制代码

原文连接 神奇的css选择器
推荐一个前后端脚手架 lg-soar：助力开发者腾飞的利器
微信公众号
<img src="https://foruda.gitee.com/images/1724914069247525063/6321a6b8_4914681.jpeg" width="200" style="width: 200px" alt="六哥是全栈">

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/5f827ea7a03d2fa1a35d00975】。

六哥是全栈

关注

还未添加个人签名 2024-08-28 加入

还未添加个人简介

发布

暂无评论

创作场景

神奇的 css 选择器

1.:focus-within

2.:has()

3.:first-letter

4.:first-line

5.:selection

六哥是全栈

评论