css 中class包含某元素的选择器
Posted 盘思动
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 中class包含某元素的选择器相关的知识,希望对你有一定的参考价值。
.cu-tag[class*="line-"]
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
这是一个 CSS 样式代码,它选择任何包含有 `class` 属性且包含 "line-" 的 `cu-tag` 元素,
并设置它们的右上角和右下角的圆角半径为 6 像素。
例如,如果有以下 HTML 代码:
<div class="cu-tag line-example">这是一个带有 line- 的 cu-tag</div>
那么上述 CSS 样式代码将会选中这个 div 元素,并为其设置右上角和右下角的圆角半径。
需要注意的是,使用属性值选择器 `[attribute*=value]` 可以匹配包含有指定子字符串的属性值。
在上述 CSS 代码中, `class*="line-"` 表示选中 class 属性值中包含有 "line-" 子字符串的元素。
相信坚持的力量,日复一日的习惯.
前端面试题-CSS选择器
一、CSS选择器作用
CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的选择器也是支持的,比如 document.document.querySelectorAll。
二、选择器类型
- 基本选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
三、基本选择器
选择器 |
含义 |
作用 |
CSS |
.class |
类选择器 |
匹配 class 包含(不是等于)特定类的元素 |
1 |
#id |
id选择器 |
匹配特定 id 的元素 |
1 |
* |
通用元素选择器 |
匹配页面任何元素(这也就决定了我们很少使用) |
2 |
element |
元素选择器 |
选择HTML元素 |
1 |
四、组合选择器
选择器 |
含义 |
作用 |
CSS |
E,F |
多元素选择器 |
同时匹配元素E或元素F |
1 |
E F |
后代选择器 |
匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F |
1 |
E>F |
子元素选择器 |
匹配E元素的所有直接子元素 |
2 |
E+F |
直接相邻选择器 |
匹配E元素之后的相邻的同级元素F |
2 |
E~F |
普通相邻选择器(弟弟选择器) |
匹配E元素之后的同级元素F(无论直接相邻与否) |
3 |
五、属性选择器
选择器 |
示例 |
示例说明 |
CSS |
[attribute] |
[target] |
选择所有带有target属性元素 |
2 |
[attribute=value] |
[target=-blank] |
选择所有使用target="-blank"的元素 |
2 |
[attribute~=value] |
[title~=flower] |
选择标题属性包含单词"flower"的所有元素 |
2 |
[attribute ^= language] |
[lang ^= en] |
选择一个lang属性的起始值="EN"的所有元素 |
2 |
[attribute $= language] |
[lang $= en] |
选择一个lang属性的结尾值="EN"的所有元素 |
2 |
[attribute *= language] |
[lang *= en] |
选择一个lang属性的包含"EN"的所有元素 |
2 |
六、伪类选择器
选择器 |
示例 |
示例说明 |
CSS |
:link |
a:link |
选择所有未访问链接 |
1 |
:visited |
a:visited |
选择所有访问过的链接 |
1 |
:hover |
a:hover |
把鼠标放在链接上的状态 |
1 |
:active |
a:active |
选择正在活动链接 |
1 |
:focus |
input:focus |
选择元素输入后具有焦点 |
2 |
所有伪类选择器在前端面试题-伪类和伪元素
七、伪元素选择器
选择器 |
作用 |
说明 |
CSS |
::before/:before |
在被选元素前插入内容。 |
需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。 |
2 |
::after/:after |
在选被元素后插入内容 |
其用法和特性与:before相似。 |
2 |
::first-letter/:first-letter |
匹配元素中文本的首字母。 |
被修饰的首字母不在文档树中。 |
1 |
::first-line/:first-line |
匹配元素中第一行的文本。 |
这个伪元素只能用在块元素中,不能用在内联元素中。 |
1 |
所有伪元素选择器在前端面试题-伪类和伪元素
扩展阅读
- 前端面试题-clearfix(清除浮动)
- 前端面试题-BFC(块格式化上下文)
以上是关于css 中class包含某元素的选择器的主要内容,如果未能解决你的问题,请参考以下文章
CSS如何选择不包含某个class的元素
CSS学习笔记
css选择器详解
css选择器
CSS选择器
前端面试题-CSS选择器