本文六哥给大家介绍几个不常见却非常实用的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>
-
原文连接 神奇的css选择器
-
推荐一个前后端脚手架 lg-soar:助力开发者腾飞的利器
-
微信公众号
-