前端学习 -- 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组,最快的方法怎办? 很多, 比如一只眼睛的一组,剩下的 ...

随机推荐

Cocos2dx源码赏析(4)之Action动作
Cocos2dx源码赏析(4)之Action动作本篇,依然是通过阅读源码的方式来简单赏析下Cocos2dx中Action动画的执行过程.当然,这里也只是通过这种方式来总结下对Cocos2dx引擎的理 ...
Oracle VM VirtualBox 无法卸载更新和修复
好久没更新Oracle VM VirtualBox 突然发现不能更新了提示要某个msi文件,回想起来好像是被某个清理垃圾的软件清理掉了. 于是根据提示的版本号网上搜了种子又把安装包下载回来在命令行 ...
Java面试中的Spring方面问题
1.一般问题 1.1. 不同版本的 Spring Framework 有哪些主要功能? VersionFeatureSpring 2.5发布于 2007 年.这是第一个支持注解的版本.Spring 3 ...
oraclejdbc
https://segmentfault.com/q/1010000004952621/a-1020000004955600
（第二周）scrum站立会议
敏捷流程scrum中的很重要的一个制度之一每日站立会议了解的内容: 问题:为啥不用email汇报代替每日会议? E-mail不能取代每日会议,E-mail只会增加沟通成本,而且不能提供细节信息或者给 ...
团队项目-NABCD
用户需求分析与NABCD 模拟经营类(SIM)游戏:玩家模拟经营一家软件公司,平台初步定为Android. Need需求任何一款游戏都要有自己的定位和目标群体,这些 iiMediaResearch数 ...
2018-2019-20172329 《Java软件结构与数据结构》第八周学习总结
2018-2019-20172329 <Java软件结构与数据结构>第八周学习总结现在对于我而言,最珍贵的是时间,感觉自己在时间飞逝的时候真的挽留不住什么,只能怒发冲冠的让自己疯狂的学习 ...
MFC按钮、列表控件应用实例（一）
需求:实现张三.李四.王五 3 人的课程选择,并将选课结果提交到列表框中显示. 实现过程: 1.建立对话框mfc工程. 2.添加控件 tab 顺序控件类型控件 ID1 Button IDC_ ...
web11 Struts处理表单数据
电影网站:www.aikan66.com 项目网站:www.aikan66.com游戏网站:www.aikan66.com图片网站:www.aikan66.com书籍网站:www.aikan66.co ...
初涉JSP+JDBC 基于SQL2008的登陆验证程序
简单的以代码的形式纪念一下,因为现在还没有解决SQL2008驱动的问题,并且有好多东西要学,所以日后会有更新~ 所安装的软件有:SQL2008,eclipse,tomcat,JDK,涉及环境配置.等等 ...

前端学习 -- Css -- 属性选择器

前端学习 -- Css -- 属性选择器的更多相关文章

随机推荐

热门专题