一、格式

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

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. consolidate.js 一个Node.js 模板引擎的集合

    consolidate是一个模板引擎的结合体.包括了常用的jade和ejs.通过配置我们就可以使用多种模板引擎. consolidate.js安装 npm install consolidate co ...

  2. 通过 SCQA 的框架来讲故事

    SCQA:Situation情景.Complication冲突.Question疑问. Answer回答   SCQA模型是一个"结构化表达"工具,是麦肯锡咨询顾问芭芭拉·明托在& ...

  3. node.js箭头函数使用

    ES6允许使用=>定义函数,箭头函数使得表达更加简洁,例如 // 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1 ...

  4. C# .NET 使用 NPOI 生成 .xlsx 格式 Excel

    IWorkbook workbook = new XSSFWorkbook(); ISheet sheet = workbook.CreateSheet("-"); IRow ro ...

  5. PHP语法入门以及变量

    1PHP语法入门 1.1PHP是编译型语言      编译语言和解释语言的区别在于是否保存最终的可执行程序. 1.2PHP定界符       因为PHP是脚本语言,所以需要定界符 <?php e ...

  6. kafka以及消息队列详解

    Kafka 是LinkedIn 开发的一个高性能.分布式的消息系统. 用途:广泛用于日志收集.流式数据处理.在线和离线消息分发等场景. 1. Kafka 将消息流按Topic 组织,保存消息的服务器称 ...

  7. Feign自动装配原理

    spring.factories 按照以往的惯例,在研究源码的时候,我们先看一下spring.factories文件下自动装配的类FeignAutoConfiguration,其中比较重要的东西有这么 ...

  8. v8js-在PHP中运行javascript代码

    起因之前写自动登录操作一个网站的PHP脚本,但是发现该网站用js代码做了cookie的计算和验证,所以使用了v8js. 安装安装v8.(Mac:brew install v8)使用pecl insta ...

  9. 如何突破DNS报文的512字节限制

    - DNS的512字节限制 根据协议标准,DNS协议同时占用UDP和TCP的53端口,这是为什么呢? 翻阅DNS资料,可以发现,DNS协议默认按UDP传输,为优化传输性能,DNS协议有一个512字节的 ...

  10. B/S架构与C/S架构(略讲)

    B/S架构基本概念 B/S是Browser/Server,即浏览器/服务器架构.Browser指的是Web浏览器,极少数事务逻辑在前端实现,但主要事务逻辑在服务器端实现. B/S三层体系结构可以定义为 ...