contains选择器的作用
时间: 2023-10-30 08:04:33 浏览: 70
`contains` 选择器用于选择包含指定文本的元素。它的语法如下:
```css
selector[attribute*=value] {
/* styles */
}
```
其中,`selector` 是要选择的元素的选择器,`attribute` 是要匹配的属性名,`value` 是要匹配的属性值中的文本。
举个例子,如果想要选择所有 `class` 属性中包含 `button` 的元素,可以这样写:
```css
[class*=button] {
/* styles */
}
```
这样就会选择所有 `class` 属性中包含 `button` 的元素,并对它们应用样式。
相关问题
jquery选择器大全
以下是一些常用的 jQuery 选择器:
1. 基本选择器
- 通过元素名选取元素:`$('element')`
- 通过类名选取元素:`$('.class')`
- 通过 id 选取元素:`$('#id')`
- 通过属性选取元素:`$('[attribute]')`
- 通过属性值选取元素:`$('[attribute=value]')`
- 通过属性值前缀选取元素:`$('[attribute^=value]')`
- 通过属性值后缀选取元素:`$('[attribute$=value]')`
- 通过属性值包含选取元素:`$('[attribute*=value]')`
2. 层次选择器
- 后代选择器:`$('ancestor descendant')`
- 子元素选择器:`$('parent > child')`
- 相邻兄弟选择器:`$('prev + next')`
- 兄弟选择器:`$('prev ~ siblings')`
3. 过滤选择器
- :even:选取偶数位置的元素
- :odd:选取奇数位置的元素
- :eq(index):选取指定位置的元素
- :gt(index):选取位置大于指定位置的元素
- :lt(index):选取位置小于指定位置的元素
- :not(selector):选取不符合选择器的元素
- :header:选取标题元素
- :animated:选取正在执行动画的元素
4. 表单选择器
- :input:选取所有表单元素
- :text:选取所有文本框
- :password:选取所有密码框
- :radio:选取所有单选框
- :checkbox:选取所有复选框
- :submit:选取所有提交按钮
- :image:选取所有图像按钮
- :reset:选取所有重置按钮
- :button:选取所有按钮
- :file:选取所有文件域
5. 内容过滤选择器
- :contains(text):选取包含指定文本的元素
- :empty:选取没有子元素的元素
- :has(selector):选取包含指定元素的元素
- :parent:选取有子元素的元素
6. 可见性过滤选择器
- :visible:选取可见的元素
- :hidden:选取隐藏的元素
7. 属性过滤选择器
- [attribute]:选取带有指定属性的元素
- [attribute=value]:选取指定属性值的元素
- [attribute!=value]:选取不等于指定属性值的元素
- [attribute^=value]:选取属性值以指定值开头的元素
- [attribute$=value]:选取属性值以指定值结尾的元素
- [attribute*=value]:选取属性值包含指定值的元素
8. 子元素过滤选择器
- :first-child:选取第一个子元素
- :last-child:选取最后一个子元素
- :only-child:选取唯一的子元素
9. 表单对象属性过滤选择器
- :checked:选取被选中的表单元素
- :selected:选取被选中的选项元素
- :enabled:选取可用的表单元素
- :disabled:选取不可用的表单元素
jQuery过滤选择器实例
好的,下面是一个 jQuery 过滤选择器的示例:
假设有一段 HTML 代码如下:
```html
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item special">Special Item</li>
</ul>
```
我们可以使用 jQuery 的过滤选择器来选择特定的元素。例如:
1. 选择所有的 `<li>` 元素:
```js
$('li');
```
2. 选择 class 为 `item` 的 `<li>` 元素:
```js
$('li.item');
```
3. 选择 class 为 `special` 的 `<li>` 元素:
```js
$('li.special');
```
4. 选择第一个 `<li>` 元素:
```js
$('li:first');
```
5. 选择最后一个 `<li>` 元素:
```js
$('li:last');
```
6. 选择第二个 `<li>` 元素:
```js
$('li:eq(1)');
```
7. 选择包含文本 `Item 1` 的 `<li>` 元素:
```js
$('li:contains("Item 1")');
```
8. 选择所有偶数位置的 `<li>` 元素:
```js
$('li:even');
```
9. 选择所有奇数位置的 `<li>` 元素:
```js
$('li:odd');
```
以上就是一些 jQuery 过滤选择器的例子。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)