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

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

  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. Netty源码分析第2章(NioEventLoop)---->第7节: 处理IO事件

    Netty源码分析第二章: NioEventLoop   第七节:处理IO事件 上一小节我们了解了执行select()操作的相关逻辑, 这一小节我们继续学习select()之后, 轮询到io事件的相关 ...

  2. Kubernetes集群部署篇（ 一）

    K8S集群部署有几种方式:kubeadm.minikube和二进制包.前两者属于自动部署,简化部署操作,我们这里强烈推荐初学者使用二进制包部署,因为自动部署屏蔽了很多细节,使得对各个模块感知很少,非常 ...

  3. Linux 文件系统 -- 文件权限简介

    一.文件权限 使用 ls -l 命令可以查看文件的具体属性: 如图所示,第一列所示告诉了用户一个文件的类型和权限信息: 1)第一个字符 "d",表明该文件是一个目录文件: 2)r ...

  4. 2019 年软件开发人员必学的编程语言 Top 3

    AI 前线导读:这篇文章将探讨编程语言世界的现在和未来,这些语言让新一代软件开发者成为这个数字世界的关键参与者,他们让这个世界变得更健壮.连接更加紧密和更有意义.开发者要想在 2019 年脱颖而出,这 ...

  5. 机器学习基础 --- pandas的基本使用

    一.pandas的简介 Python Data Analysis Library 或 pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的.Pandas 纳入了大量库和一些 ...

  6. Windows下 搭建redis集群

    Windows下搭建redis集群教程 一,redis集群介绍 Redis cluster(redis集群)是在版本3.0后才支持的架构,和其他集群一样,都是为了解决单台服务器不够用的情况,也防止了主 ...

  7. 使用spring整合Quartz实现—定时器

    使用spring整合Quartz实现—定时器(Maven项目做演示) 不基于特定的基类的方法 一,开发环境以及依赖的jar包 Spring 4.2.6.RELEASE Maven 3.3.9 Jdk ...

  8. Redis Jedis简介

    Redis是一种基于内存类型的数据存储工具 Jedis是一个用java写的Redis数据库操作的客户端,通过Jedis,可以很方便的对redis数据库进行操作.Jedis通过Jedis Pool进行R ...

  9. swapon和swapoff命令详解

    基础命令学习目录首页 原文链接:https://blog.csdn.net/yexiangCSDN/article/details/83182259 swapon命令用于激活Linux系统中交换空间, ...

  10. The Begining

    学习记录之旅,就此开始.软件工程,Java神马的统统到我碗里来.