属性选择器：根据元素的属性选择指定元素

语法：[属性名] 选取含有指定属性的元素

  1. [属性名="属性值"]：选取属性值等于指定值的元素
  2. [属性名^="属性值"]：选取属性值以指定内容开头的元素
  3. [属性名$="属性值"]：选取属性值以指定内容结尾的元素
  4. [属性名*="属性值"]：选取属性值中包含指定内容的元素

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 -- 属性选择器的更多相关文章

  1. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

  2. CSS 属性选择器的深入挖掘

    CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...

  3. Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469 觉得博文有用,请点赞,请评论,请关注,谢谢!~ CSS外部文档链接: & ...

  4. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  5. 前端基础-CSS属性操作

    前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...

  6. CSS：CSS 属性 选择器

    ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需 ...

  7. CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别

    CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别 总结: "value 是完整单词" 类型的比较符号: ~=, |= "拼接字符串" 类型的比较 ...

  8. 使用这些 CSS 属性选择器来提高前端开发效率

    属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并 ...

  9. 2020年12月-第02阶段-前端基础-CSS基础选择器

    CSS选择器(重点) 理解 能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的 ...

随机推荐

  1. Java字符串与日期互转

    Java字符串与日期的相互转换 1.字符串转日期 字符串的格式与日期的格式一定要对应,并且字符串格式可以比日期格式多,但不能少,数字大小不自动计算日期.其中需要主要大小写 年yyyy 月MM 日dd ...

  2. 如何判断Map中的key或value类型

    在上班写工具类时,遇到了一个问题,将xml文件的节点都放入map容器中时,map的value也是一个map,导致取map的value时,需要判断这个value的数据类型,用到了一下说的这些知识: 对于 ...

  3. MySQL基础练习(二)

    第一个例子我们编写一个 SQL 查询,列出所有超过或等于5名学生的课. 先建表 CREATE TABLE courses( student ) NOT NULL, class ) NOT NULL ) ...

  4. Solidity 神器Remix

    1 功能 这里我们使用在线编译器,打开网址 https://ethereum.github.io/browser-solidity 1.1 文件夹管理 最左边是文件夹管理,里面列出了当前工作区里的文件 ...

  5. 解读Python编程中的命名空间与作用域

    变量是拥有匹配对象的名字(标识符).命名空间是一个包含了变量名称们(键)和它们各自相应的对象们(值)的字典.一个Python表达式可以访问局部命名空间和全局命名空间里的变量.如果一个局部变量和一个全局 ...

  6. Final发布：文案+美工展示博客

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2476 小组介绍 组长:付佳 组员:张俊余 李文涛 孙赛佳 田良 于洋 段 ...

  7. 接着继续(OO博客第四弹)

    .测试与JSF正确性论证 测试和JSF正确性论证是对一个程序进行检验的两种方式.测试是来的最直接的,输入合法的输入给出正确的提示,输入非法的输入给出错误信息反馈,直接就能很容易的了解程序的运行情况.但 ...

  8. 20162328蔡文琛 大二 十二周课上测试 hash

  9. 冲刺One之站立会议2

    在确定了总体目标之后,我们先决定了实现的具体功能,包括一个登陆界面,一个聊天室的主界面和服务器端的内容.我们今天完成了一小部分内容,把每个内容的主体框架搭建了起来. 效果如下图所示: 燃尽图2

  10. HTML和CSS <h1> --1-- <h1>

    Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制 ...