程序博客网 > 电子数据交换技术

03、CSS3属性选择器

来源：互联网发布：电子数据交换技术编辑：程序博客网时间：2024/06/09 19:11

E[attr] 属性名，不确定具体属性值

E[attr="value"] 指定属性名，并指定其对应属性值

E[attr ~="value"] 指定属性名，其具有多个属性值空格隔开，并包含value值

E[attr ^= "value"] 指定属性名，属性值以value开头

E[attr $="value"] 指定属性名，属性值以value结束

E[attr *="value"] 指定了属性名，属性值中包含了value

E[attr |= "value"] 指定属性名，属性值以value-开头

E[attr] 属性名，不确定具体属性值：

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/div[class]{color:red;}div[lang]{color:blue;}</style></head><body><!--身体--><div class="wrap">这是一个div标签1</div><div lang="en" id="con">这是一个div标签2</div></body></html>

E[attr="value"] 指定属性名，并指定其对应属性值

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/div[class="wrap"]{color:red;}div[id="con"]{color:blue;}</style></head><body><!--身体--><div class="wrap">这是一个div标签1</div><div class="content" lang="en" id="con">这是一个div标签2</div></body></html>

E[attr ~="value"] 指定属性名，其具有多个属性值空格隔开，并包含value值

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/div[class~="wrap"]{color:red;}</style></head><body><!--身体--><div class="wrap">这是一个div标签0</div><div class="wrap cont">这是一个div标签1</div><div class="wrap content" lang="en" id="con">这是一个div标签2</div></body></html>

E[attr ^= "value"] 指定属性名，属性值以value开头

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/div[class^="wrapb"]{color:red;}</style></head><body><!--身体--><div class="wrapsdsd">这是一个div标签0</div><div class="wrapbfbfds cont">这是一个div标签1</div><div class="wrapcgfd content" lang="en" id="con">这是一个div标签2</div></body></html>

E[attr $="value"] 指定属性名，属性值以value结束

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/div[class$="d"]{color:red;}</style></head><body><!--身体--><div class="wrapsdsd">这是一个div标签0</div><div class="wrapbfbfds contd">这是一个div标签1</div><div class="wrapcgfd" lang="en" id="con">这是一个div标签2</div></body></html>

E[attr *="value"] 指定了属性名，属性值中包含了value

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/div[class*="bf"]{color:red;}</style></head><body><!--身体--><div class="wrapsdsd">这是一个div标签0</div><div class="wrapbfbfds contde">这是一个div标签1</div><div class="wrapcegfd" lang="en" id="con">这是一个div标签2</div></body></html>

E[attr |= "value"] 指定属性名，属性值以value-开头

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/div[class|="wrap"]{color:red;}</style></head><body><!--身体--><div class="wrapsdsd">这是一个div标签0</div><div class="wrap-contde wrap-contdedesa">这是一个div标签1</div><div class="wrapcosngded" lang="en" id="con">这是一个div标签2</div></body></html>

0 0

电子数据交换技术

电子数据交换技术

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子达字开头成语达字组词金字华美达酒店天台达字开头的成语接龙带达字的公司名称大全达字开头的成语达安达富丁达尔盖达尔瓜达尔港瓜达尔比达尔康达尔丁达尔现象辛达尔海姆达尔达尔塞达尔达尔富尔纳达尔晋级达尔特康达尔股吧康达尔股票塞达尔传说赛达尔维达尔塞尔达尔肯达尔凯达尔达尔克尔达尔松厕所钥匙纳达尔婚纱照曝光阿莱克斯比达尔纳达尔晋级决赛达尔富尔事件纳达尔横扫费德勒达尔盖帜旗技术讨论区达川达川区达川中学