前端学习 -- Css -- 属性选择器
属性选择器：根据元素的属性选择指定元素
语法：[属性名] 选取含有指定属性的元素
- [属性名="属性值"]：选取属性值等于指定值的元素
- [属性名^="属性值"]：选取属性值以指定内容开头的元素
- [属性名$="属性值"]：选取属性值以指定内容结尾的元素
- [属性名*="属性值"]：选取属性值中包含指定内容的元素
demo:(注：这么尴尬的诗句肯定不是我写的)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*[属性名="属性值"]：选取属性值等于指定值的元素*/
h2[title="abcde"]{
color: red;
}
/*[属性名^="属性值"]：选取属性值以指定内容开头的元素*/
h3[title^="o"]{
color: green;
}
/*[属性名$="属性值"]：选取属性值以指定内容结尾的元素*/
h4[title$="c"]{
color: blue;
}
/*[属性名*="属性值"]：选取属性值中包含指定内容的元素*/
h1[title*="df"]{
color: blue;
}
</style>
</head>
<body>
<!--
作者：1213854220@qq.com
时间：2017-03-18
描述：title是当鼠标移上去，悬浮在上面的内容
-->
<h1 title="dfc">致女儿书</h1>
<h2 title="abcde">煲汤比写诗重要 </h2>
<h3 title="opq">自己的手艺比男人重要 </h3>
<h4 title="cde">胸和腰和屁股比脸蛋重要 </h4>
<h5>内心强大到混蛋 </h5>
<h6>比什么都重要 </h6>
<br />
<br />
<h1 title="cde">致女儿书</h1>
<h2 title="opq">煲汤比写诗重要 </h2>
<h2 title="abcde">自己的手艺比男人重要 </h2>
<h4 title="abc">胸和腰和屁股比脸蛋重要 </h4>
<h5>内心强大到混蛋 </h5>
<h6>比什么都重要 </h6>
<br />
<br />
<h1 title="cde">致女儿书</h1>
<h1 title="dfdf">致女儿书</h1>
</body>
</html>
效果图：
前端学习 -- Css -- 属性选择器的更多相关文章
- IE7浏览器下CSS属性选择器二三事
一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...
- CSS 属性选择器的深入挖掘
CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...
- Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469 觉得博文有用,请点赞,请评论,请关注,谢谢!~ CSS外部文档链接: & ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 前端基础-CSS属性操作
前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...
- CSS：CSS 属性 选择器
ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需 ...
- CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别
CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别 总结: "value 是完整单词" 类型的比较符号: ~=, |= "拼接字符串" 类型的比较 ...
- 使用这些 CSS 属性选择器来提高前端开发效率
属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并 ...
- 2020年12月-第02阶段-前端基础-CSS基础选择器
CSS选择器(重点) 理解 能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的 ...
随机推荐
- 如何布局您的PC站和移动站，并表达两者之间内容的对应关系
如何布局您的PC站和移动站,并表达两者之间内容的对应关系 目前较流量的PC站与移动站配置方式有三种,百度站在搜索引擎角度将这三种分别称为跳转适配.代码适配和自适应,以下为这三种配置方式的名词解释及 ...
- Dingo Api 1.0在laravel5.2中的简单应用
Dingo Api是为基于laravel的开发提供了一系列工具集,这些工具集可以帮助开发者快速构建API.Dingo Api最新的版本是2.0.0-alpha1,这个版本需要php7.0以上的php版 ...
- 随手记录-linux-Linux目录结构
转:别人的 装完Linux,首先需要弄清Linux 标准目录结构 / root —?启动Linux时使用的一些核心文件.如操作系统内核.引导程序Grub等. home —?存储普通用户的个人文件 ft ...
- bash登录过程 其实还不太了解，先码后看
在刚登录Linux时,首先启动 /etc/profile 文件,然后再启动用户目录下的 ~/.bash_profile. ~/.bash_login或 ~/.profile文件中的其中一个,执行的顺序 ...
- java控制台编译通过，运行出现找不到或无法加载主类的情况
参考链接:http://www.knowsky.com/1046493.html 当建了一个包之后(假设建的包的名字为com),找到该java文件的com目录,发现编译能够通过,但是运行的时候出现了一 ...
- 2-Fifth Scrum Meeting20151205
任务安排 闫昊: 今日完成:设计本地数据库. 明日任务:请假.(最近代码写得多……很累……) 唐彬: 今日完成:ios客户端代码的了解. 明日任务:ios客户端代码的深度学习. 史烨轩: 今日完成: ...
- OO第二阶段作业总结
第五次作业: 设计策略: 本次作业设计的基本思路是按照指导书所给的推荐方法来完成的,即共用对象为队列盘,线程有电梯.调度器.以及扫描器,扫描器将控制台输入的有效指令加入到队列盘中,调度 ...
- 团队计划backlog---DayTwo
任务索引卡(Two): 1. 季方:实现界面跳转,数据库相关数据的显示 的测试: 2. 司宇航:添加部分团队博客,并测试: 3. 王金萱.马佳慧:学习爬虫的相关内容,为将来统计博客部分做准备: ...
- SGU 223 little kings BSOJ2772 状压DP
1896 [SCOI2005]互不侵犯King [问题描述]在n*n(1<=n<=10)的棋盘上放k(0<=k<=n*n)个国王(可攻击相邻的8 个格子),求使它们无法互相攻击 ...
- SQL SERVER安装（2008）
首先需要下载SQL SERVER2008安装程序:为省的麻烦给出网盘地址自行下载,百度网盘:密码:hslb 1.下载到你所选定文件夹中,我下载在E:\SQL SERVER中 2.选择第一个.exe文件 ...