CSS 选择器(一):属性选择器
属性选择器的介绍
属性选择器顾名思义就是通过标签的属性来查找标签的选择器。让我们来回忆一下标签的属性是什么?HTML5 的所有标签共同拥有的属性叫作全局属性,除此之外还有标签自己拥有的属性,就叫作私有属性吧。除了 ID 选择器、标签选择器、Class 选择器以外,属性选择器能够满足以上选择器的功能,属性选择器的适用范围非常广泛。
语法规则及使用案例
属性选择器的基本语法:labelName[attrName=attrValue] {}
。attrName 代表标签的属性,attrValue 代表属性值。比如,选择属性为 class,且属性值为 css 的 a 标签:
<a class="css" href="cnblogs.com/shiramashiro">My Blog Address.</a>
<a class="css html">Talk is cheap, show me the code.</a>
a[class="css"] {
font-size: 20px;
}
以上是属性选择器最基本的用法,属性值等价的方式来筛选不太满足需求,类似于正则表达式的方式选择标签是最为高效和灵活的方式,属性选择器也提供这样的方式:
属性选择的方式 | 描述 |
---|---|
label[attr^=value] | 表示带有以 attr 命名的属性,且属性值是以 value 开头的元素。 |
label[attr$=value] | 表示带有以 attr 命名的属性,且属性值是以 value 结尾的元素。 |
label[attr*=value] | 表示带有以 attr 命名的属性,且属性值至少包含 value 的元素。比如 zh-CN 和 zh,"value" 为 zh 时,zh-CN 和 zh 都匹配。 |
label[attr|=value] | 表示带有以 attr 命名的属性的元素,属性值为 "value" 或是以 "value-" 为前缀("-"为连字符)开头。如 zh-CN 和 zh-TW 可以用 zh 作为 value。 |
label[attr~=value] | 表示带有以 attr 命名的属性的元素,且属性值中至少有一个值为 value。 |
^=value
匹配属性值以 value 开头的标签(元素):
<div id="ti">hello</div>
<div id="title">javascript!</div>
div[id^="ti"] {
font-size: 20px;
}
$=value
匹配属性值以 value 结尾的标签(元素):
<div id="title">hello</div>
<div id="le">javascript!</div>
div[id$="le"] {
font-size: 20px;
color: red;
}
*=value
匹配属性值至少包含一个 value 的标签;value 是属性值的一部分:
<div id="title title header top leader">hello</div>
<div id="title top">javascript!</div>
div[id*="der"] {
font-size: 20px;
color: red;
}
|=value
匹配属性值为 "value" 或是以 "value-" 为前缀("-"为连字符)开头的标签:
<div class="zh-CH">中国</div>
<div class="zh-TW">中國</div>
div[class|="zh"] {
font-size: 20px;
color: red;
}
~=value
匹配属性值中至少有一个值为 value 的标签:
<div class="zh-CH zh">中国</div>
<div class="zh-TW">中國</div>
div[class~="zh"] {
font-weight: bold;
}
CSS 选择器(一):属性选择器的更多相关文章
- CSS伪元素选择器和属性选择器
伪元素 能使用伪元素来选择元素中的一些特殊位置 一.给段落定义样式 :first-letter 首字母(只能用于块元素) :first-line 第一行 1.为p元素中的第一个字符设置颜色为黄色, ...
- id选择器、类选择器、属性选择器
在网页编辑时,通常要对样式进行各种设置.我们借助CSS样式设计中的选择器,就能很好很方便的对它们进行管理和设置了. 今天,跟大家分享一下几个常用的选择器:id选择器.类选择器.属性选择器. id选择器 ...
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
- css选择器(2)——属性选择器和基于元素结构关系的选择器
在有些标记语言中,不能使用类名和id选择器,于是css2引入了属性选择器. 3.属性选择器 a)根据是否存在该属性来选择 如果希望选择有某个属性的元素,例如要选择有class属性的所有h1元素,使其文 ...
- selenium选择器_css属性选择器
搜索 <button class="btn-search tb-bg" type="submit" data-spm-click="gostr= ...
- python 之 前端开发(基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器)
11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- CSS3 新增选择器:伪类选择器和属性选择器
一.结构(位置)伪类选择器( : ) 1.:first-child 2.:last-child 3.:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) &l ...
- css3选择器归类整理---基本选择器和属性选择器
css3选择器分类 CSS3选择器分类如下图所示 选择器的语法 1.基本选择器 类型 代码 功能描述 通配选择器 *{ margin: 0; padding: 0; border: none; } 选 ...
随机推荐
- 【多线程与高并发原理篇:4_深入理解synchronized】
1. 前言 越是简单的东西,在深入了解后发现越复杂.想起了曾在初中阶段,语文老师给我们解说<论语>的道理,顺便给我们提了一句,说老子的无为思想比较消极,学生时代不要太关注.现在有了一定的生 ...
- Wireshark学习笔记(一)常用功能案例和技巧
@ 目录 常用功能 1.统计->捕获属性 2.统计->协议分级 3.过滤包Apply as filter E1:过滤出特定序号的包 E2:过滤出某IP地址或端口 E3:导出php文件 E4 ...
- 腾讯云数据库TDSQL-大咖论道 | 基础软件的过去、现在、未来
近十年来,中国基础软件发展势头迅猛,市场前景看高,越来越多的企业也正在进行基础软件升级.那中国基础软件行业目前在国际市场上有什么优势,面临哪些困境,以及未来基础软件行业会如何发展呢?腾讯云数据库邀请沙 ...
- 『忘了再学』Shell流程控制 — 38、while循环和until循环介绍
目录 1.while循环 2.until循环 1.while循环 对while循环来讲,只要条件判断式成立,循环就会一直继续,直到条件判断式不成立,循环才会停止.和for循环的第二种格式for((初始 ...
- Python列表解析式的正确使用方式(二)
高级解析式 条件逻辑早些时候,我向您展示了这个公式: python学习交流群:660193417### new_list = [expression for member in iterable] 公 ...
- Vue3 项目实战
使用Vue3 开发一个小米商城 业务流程 登录---> 产品首页--->产品站--->产品详情 购物车--->订单确认--->订单支付--->订单列表 业务开发流程 ...
- 【cartogarpher_ros】二: 官方Demo的介绍与演示
上一节我们介绍了在linux中快速安装集成ros环境的cartographer. 本节我们会来跑一些官方demo,用于测试cartographer是否正确安装,顺便看看cartographer的建图与 ...
- Java方法的重写
package Demo.oop.APP.Demo04; //启动器 public class application { public static void main(String[] args) ...
- Running Median_via牛客网
题目 链接:https://ac.nowcoder.com/acm/contest/28886/1002 来源:牛客网 时间限制:C/C++ 5秒,其他语言10秒 空间限制:C/C++ 65536K, ...
- 常用的函数式接口Function接口和常用的函数式接口Function接口默认方法andThen
常用的函数式接口Function接口 package com.yang.Test.FunctionStudy; import java.util.function.Function; /** * ja ...