前端学习（218）:属性选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>属性选择器</title><style type="text/css">td[lang] {color: red;}td[title="a"] {color: red;}td[title~="c"] {color: red;}td[title|="h"] {color: red;}</style></head><body><big><b>有lang属性的td元素会被选择</b></big><table border="1"><tr><td>th[lang]</td><td>无属性</td><td lang="">lang=""</td><td lang="en">lang="en"</td><td lang="cn">lang="cn"</td></tr></table><br /><big><b>title属性值为a的td元素会被选择</b></big><table border="1"><tr><td>[title="a"]</td><td>无属性</td><td title="a">title="a"</td><td title="a b">title="a b"</td><td title="ab">title="ab"</td><td title="ba">title="ba"</td></tr></table><br /><big><b>title属性值包含“c，且c前后只能有空格”的td元素会被选择</b></big><table border="1"><tr><td>[title~="c"]</td><td>无属性</td><td title="c">title="c"</td><td title="c d">title="c d"</td><td title="c-d">title="c-d"</td><td title="cd">title="cd"</td><td title="d c">title="d c"</td><td title="dc">title="dc"</td></tr></table><br /><big><b>title属性值为“h开头，且h只能为独立单词，后面可跟连字符”的td元素会被选择</b></big><table border="1"><tr><td>[title|="h"]</td><td>无属性</td><td title="h">title="h"</td><td title="h i">title="h i"</td><td title="h-i">title="h-i"</td><td title="hi">title="hi"</td><td title="i h">title="i h"</td><td title="i h j">title="i h j"</td></tr></table></body>
</html>

运行结果

前端学习（218）:属性选择器相关推荐

前端学习 -- Css -- 属性选择器
属性选择器:根据元素的属性选择指定元素语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...
前端学习笔记-jQuery-jQuery选择器/隐式迭代/链式编程
jQuery选择器 jQuery基本选择器原生JS获取原生的方式很多,很杂,而且兼容性情况,不一致,因此jQuery给我们做了封装,使获取元素统一标准. $("选择器") // ...
图解css3：核心技术与案例实战. 2.11　属性选择器
2.11 属性选择器在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同DIV元素进行区分.CSS2中引入了一些属性选择器,这些选择器可基于元素的属性来匹配元素 ...
CSS的属性选择器lang使用说明
CSS 2 引入了属性选择器,属性选择器可以根据元素的属性及属性值来选择元素,今天我们来学习特定属性选择器lang的使用方法. css :lang选择器定义用法介绍 lang 向带有指定 lang 属 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
【译】使用这些 CSS 属性选择器来提高前端开发效率！
译者:前端小智原文:www.smashingmagazine.com/2018/10/att- 属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心 ...
【前端学习之HTMLCSS】-- CSS第三篇 -- 选择器（上）
[前端学习之HTML&CSS]-- CSS第三篇 – 选择器(上) 文章目录 [前端学习之HTML&CSS]-- CSS第三篇 -- 选择器(上) 前言选择器简单选择器 1. ID ...
HTML 前端学习（3）—— CSS 选择器
HTML 前端学习(3)-- CSS 选择器 CSS 注释 CSS 语法结构 CSS 三种引入方式行内式 link 引入 style CSS 基础选择器 id 选择器类选择器元素(标签)选择器 ...
a标签download属性无效_使用这些 CSS 属性选择器来提高前端开发效率
如题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法.通常将 HTML属性放在方括号中,称为属性选择器,如下: ...

前端学习（218）:属性选择器

前端学习（218）:属性选择器相关推荐

最新文章

热门文章