CSS选择器

📚 自定义伪类

1. :contains(text) 伪类

此伪类用于通过元素的文本内容来定位元素。

用途： 选取所有包含指定文本的元素。

用法示例 ：

/* 选择所有文本内容包含 "Next" 的 <button> 元素 */
button:contains("Next")

/* 选择所有 <button> 元素，但排除内容包含 "Save" 的元素 */
button:not(:contains("Save"))

2. :shadow 伪类

穿透 Shadow DOM 的边界，直接选中组件内部的元素。

/* 示例 1: 选择 <product-card> Shadow DOM 内部的标题元素 */
product-card:shadow h3.title

/* 示例 2: 选择 <my-tabs> Shadow Root 直接子级的所有 div 元素 */
my-tabs:shadow > div

/* 示例 3: 选择 <user-avatar> Shadow DOM 内部，且 alt 属性为 "profile" 的 img 元素 */
user-avatar:shadow img[alt="profile"]

/* 示例 4: 选择 <nav-menu> Shadow DOM 内部列表中的最后一个 li 元素 */
nav-menu:shadow li:last-child

CSS 选择器参考资料

1. css 选择器 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_selectors
2. jquery css 选择器 https://www.runoob.com/jquery/jquery-ref-selectors.html
3. jQuery 选择器检测器 https://www.runoob.com/try/trysel.php (演示了 css 选择器是如何选择元素的)