一、格式

标签[属性=值]:{属性:值;}

1.属性的取值是以什么开头的

attribute |= value(CSS2)

attribute^=value(CSS3)

两者之间的区别:CSS2中只能找到value开头,并且value是被-和其他内容隔开的;CSS3中只要是以value开头的都可以找到,无论有没有横线隔开的

        p[id|=abcd]{color: red;}

        p[id^=bcd]{color:blue;}

........省略代码.........

<p id="abcd-efg">优秀1</p>

<p id="abcdefg">优秀2</p>

<p id="bcd-efg">优秀3</p>

<p id="bcdefg">优秀4</p>

2.属性的取值是以什么结尾的

attribute$=value(CSS3)

        p[id$=efgh]{color: green;}

........省略代码.........

<p id="abcd-efgh">优秀5</p>

<p id="abcdefgh">优秀6</p>

3.属性的取值是否包含某个特定的值

attribute~=value(CSS2)

attribute*=value(CSS3)

两者之间的区别:CSS2中只能找到value开头,并且value是被空格和其他内容隔开的;CSS3中只要是以value开头的都可以找到,无论有没有横线或者空格隔开的

        p[id~=cdoe]{color:aqua}

        p[id*=cdp]{color:darkcyan}

 .......省略代码.........

<p id="ab cdoe fg">优秀7</p>

<p id="abcdoefg">优秀8</p>

<p id="ab cdp efg">优秀9</p>

<p id="abcdpefg">优秀10</p>

4.

python使用一行代码来实现”心形“函数

print('\n'.join([''.join([('Love'[(x-y) % len('Love')] if ((x*0.05)**2+(y*0.1)**2-1)**3-(x*0.05)**2*(y*0.1)**3 <= 0else' ') for x in range(-30, 30)]) for y in range(30, -30, -1)]))

二、源码:

d80_attribute_selector_2.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/d80_attribute_selector_2.html

2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)

3.博客园:https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号:傅里叶变换,后台回复“礼包”获取Java大数据学习视频礼包

HTML连载24-属性选择器(下)的更多相关文章

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

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

  2. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

  3. JQuery中常用的 属性选择器

    jQuery中使用$()作为选择符极大提高工作效率以及方便快捷;一些常用属性的选择器由以下几种 1) $('#id') id选择器 2) $('.class') css选择器,class类名 3) $ ...

  4. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  5. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  6. jQuery属性选择器.attr()和.prop()两种方法

    在判断表单单选框是否被选中时,通常会想到使用$('#checkbox').attr('checked')来判断,但在一些情况下,你会发现这种方法并不管用,得到的是undefined. 原来jQuery ...

  7. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  8. CSS-id选择器-类选择器-属性选择器

    Css基础 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 每个属性有一个值.属性和值被冒号分开. 下 ...

  9. [转] 属性选择器.mark

    CSS 2 引入了属性选择器. 属性选择器可以根据元素的属性及属性值来选择元素. 简单属性选择 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器. 例子 1 如果您希望把包含标 ...

  10. 测试css2.1选择器IE6/7/8支持情况,属性选择器/子元素/相邻

    环境 xp ie 8 , ietester <!doctype html> <html> <head> <meta charset="utf-8&q ...

随机推荐

  1. 使用rsync基于ssh免密登陆进行备份或目录同步

    日常工作中有很多的备份工作,rsync是一个很不错的工具,尝试使用基于ssh免密登陆的方式进行备份,测试成功,是可行且方便的方法,撰文记之,以备后用: 1.A主机root用户对B主机root用户做ss ...

  2. IT兄弟连 Java语法教程 流程控制语句 经典案例

    使用continue忽略本次循环剩下的语句 continue的功能和break有点类似,区别是continue只是忽略本次循环剩下的语句,接着开始下一次循环,并不会终止循环:而break则是完全终止循 ...

  3. pixijs shader 案例

    pixijs shader 案例 const app = new PIXI.Application({ transparent: true }); document.body.appendChild( ...

  4. java在hashmap初始化时赋初值

    Java中的HashMap是一种常用的数据结构,一般用来做数据字典或者Hash查找的容器. 一般我们初始化并赋初值是这样做的: HashMap<String, Object> map = ...

  5. SQL server已经设置为单用户模式,还是无法做分离、属性设置等操作

    https://www.cnblogs.com/xingyunqiu/p/10336938.html SQL server已经设置为单用户模式,Sql server还原失败数据库正在使用,无法获得对数 ...

  6. C#中巧用Lambda表达式实现对象list进行截取

    场景 有一个对象的list,每个对象有唯一的属性Id,并且是从1递增,现在要根据此Id属性进行截取. 其中DataTreeNode 实现 Global.Instance.PrepareCompareD ...

  7. CSS渐变的两种基本用法

    1.线性渐变(linear-gradient) 基础用法:background:linear-gradient(angle,start-color,soft-line,end-color); 依次解释 ...

  8. CSS元素显示模式

    CSS的元素显示模式 什么是元素显示模式 作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页 元素的显示模式就是元素(标签)以什么样的方式进行显示,比如& ...

  9. SQLi-LABS Page-3 (Stacked injections) Less-38-Less-45

    Less-38 堆叠注入原理简介堆叠注入简介 Stacked injections: 堆叠注入.从名词的含义就可以看到应该是一堆 sql 语句(多条)一起执行.而在真实的运用中也是这样的, 我们知道在 ...

  10. arcgis api for javascript 学习(六) 地图打印

    1.本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图: 2.需要特别注意的是:我们在运行代码前,需要打开PrintingTools, ...