css3 ---2 属性的选择器
2024-09-06 09:10:50
存在和值属性选择器1：[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[name]{
background: pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>存在和值属性选择器</title>
<style type="text/css">
/*
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
*/
[name]{
background: pink;
}
</style>
</head>
<body>
<div name="atguigu_llc">李立超</div>
<div name="atguigu_xfz">晓飞张</div>
<div name="atguigu_bhj">白浩杰</div>
<div name="atguigu_sym">腿长1米8</div>
<div>佟刚</div>
<div>陈雷</div>
<div>李贺飞</div>
</body>
</html>
存在和值属性选择器2：[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[name="atguigu_llc"]{
background: pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>存在和值属性选择器</title>
<style type="text/css">
/*
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
*/
[name="atguigu_llc"]{
background: pink;
}
</style>
</head>
<body>
<div name="atguigu_llc">李立超</div>
<div name="atguigu_xfz">晓飞张</div>
<div name="atguigu_bhj">白浩杰</div>
<div name="atguigu_sym">腿长1米8</div>
<div>佟刚</div>
<div>陈雷</div>
<div>李贺飞</div>
</body>
</html>
存在和值属性选择器3 ：
[attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，
比如位于被空格分隔的多个类（class）中的一个类。
[name~="atguigu"]{
background: pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>存在和值属性选择器</title>
<style type="text/css">
/*
[attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，
比如位于被空格分隔的多个类（class）中的一个类。
*/
[name~="atguigu"]{
background: pink;
}
</style>
</head>
<body>
<div name="atguigu_llc atguigu">李立超</div>
<div name="atguigu_xfz">晓飞张</div>
<div name="atguigu_bhj atguigu">白浩杰</div>
<div name="atguigu_sym">腿长1米8</div>
<div>佟刚</div>
<div>陈雷</div>
<div>李贺飞</div>
</body>
</html>
存在和值属性选择器4：
[attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素
[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。
[name*="atguigu"]{
background: pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>存在和值属性选择器</title>
<style type="text/css">
/*
[attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素
[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。
*/
[name*="atguigu"]{
background: pink;
}
</style>
</head>
<body>
<div name="atguigu-llc atguigu">李立超</div>
<div name="atguigu-xfz">晓飞张</div>
<div name="atguigu-bhj atguigu">白浩杰</div>
<div name="atguigu_sym">腿长1米8</div>
<div>佟刚</div>
<div>陈雷</div>
<div>李贺飞</div>
</body>
</html>
最新文章
- sort命令
- redis make时 提示 zmalloc.h:50:31: error: jemalloc/jemalloc.h:
- Linux下jvm、tomcat、mysql、log4j优化配置笔记
- 在JavaScript 自定义对象来模拟Java中的Map
- 在VS2010 中兼容Qt4和Qt5
- JS获取两个日期的月份差
- scala知识点（二）
- PHP5.4的变化关注---What has changed in PHP 5.4.x(转)
- Android 5.1 Camera 架构学习之Camera初始化
- itext poi 学习之旅 （1）创建pdf
- js实现选项卡切换的三种方式
- 统计的基本操作语法 <第五篇>
- 如何利用.Net内置类，解析未知复杂Json对象
- Pycharm实用技巧汇总
- FineReport填报分页设置
- python数据可视化学习1
- python3 常用模块
- python继承——封装
- Python第十三天 django 1.6 导入模板 定义数据模型 访问数据库 GET和POST方法 SimpleCMDB项目 urllib模块 urllib2模块 httplib模块 django和web服务器整合 wsgi模块 gunicorn模块
- ue4 蓝图方法备份
热门文章
- P1624 单词缩写
- IDea 工具debug模式详细使用说明
- 『BASH』——Hadex's brief analysis of "Lookahead and Lookbehind Zero-Length Assertions"
- 20130330 printf数组改变 数组指针便利二维数组 二级指针遍历二维数组 ZigZag
- Ctrl快捷键
- 【POJ】2492 A Bug's Life
- flutter setInitialRoute: 不生效
- 判断APP是否已安装
- Android开发 retrofit入门讲解
- drupal7 smtp+mimemail+mailsystem 实现发送html邮件