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

随机推荐

Linux 磁盘与文件系统(EXT2)简介
Linux 中,一切(或几乎一切)都是文件. 一.Linux 磁盘分区与文件系统 1.1 磁盘分区磁盘的分区主要分为主分区和扩展分区 1)主分区:总共最多只能有四个主分区: 2)扩展分区:只能有一个 ...
axios常用操作
axios常用操作一:函数化编程 1:编写可复用的方法 axios(config)的方法中,有必须的url参数和非必须的options参数.所以我们可以先写一个接受这两个参数的方法,在这个方法中我们 ...
js中if else switch 条件判断的替代方法
function condition(test){ return({ cat :function(){console.log('cat');}, dog :function(){console.log ...
“Hello World!”Final发布文案加美工
文案: 大家好,我们是“Hello World!”团队,本次我将向大家简要介绍一下空天猎的final发布,在空天猎final发布中,我主要从以下两个方面向大家进行介绍,第一个方面是增加了敌方的boss ...
探路者 FInal冲刺中间产物
版本控制 https://git.coding.net/clairewyd/toReadSnake.git 版本控制报告 http://www.cnblogs.com/linym762/p/79976 ...
Notes of Daily Scrum Meeting（11.5）
Notes of Daily Scrum Meeting(11.5) 今天是我们学习学长代码,同时学习安卓语言的第三天.我们和学长沟通了一下,仔细讨论后得出一个结论,学长在 IOS平台上的代码可以借鉴 ...
团队项目之开题scrum meeting
scrum meeting 会议记一.会议要点: 1.确定成员角色: 2.讨论关于项目的疑问: 3.制定一周内成员任务. 二.具体会议内容: 1.成员角色: PM:杨伊 Dev:徐钧鸿刘浩然张艺 ...
WebGL学习笔记四点一
上一章是对图形的变换,这一章的第一节主要介绍了光栅化的过程,在创建多个颜色的三角形的过程中顶点着点器的过程如下 ,1.首先通过attribute的变量从javascript中获取数据,根据drawAr ...
B3
吴晓晖(组长) 过去两天完成了哪些任务一些细节的debug,部分优化,算法中有关记录的部分展示GitHub当日代码/文档签入记录接下来的计划推荐算法还剩下哪些任务组员:刘帅珍过去两天完成 ...
Leetcode题库——26.删除排序数组中的重复项
@author: ZZQ @software: PyCharm @file: removeDuplicates.py @time: 2018/9/23 13:51 要求: 给定一个排序数组,你需要在原 ...

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

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

随机推荐

热门专题