一、格式

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

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. 一、Mybatis配置详解

    Mybatis配置详解 XML配置文件层次结构 下图展示了mybatis-config.xml的全部配置元素 properties元素 properties是一个配置属性的元素,让我们能在配置文件的上 ...

  2. 百度Sitemap生成器

    今天用了两个小时, 为无限影视(https://www.88tv.org)开发了一个小工具, 用来生成baidu的sitemap.  方便用. 因为该电影站的视频内容详情网页的ID是自增长的,所以可以 ...

  3. python基础(25):面向对象三大特性二(多态、封装)

    1. 多态 1.1 什么是多态 多态指的是一类事物有多种形态. 动物有多种形态:人,狗,猪. import abc class Animal(metaclass=abc.ABCMeta): #同一类事 ...

  4. SpringBoot(五) SpringBoot整合mybatis

    一:项目结构: 二:pom文件如下: <parent> <groupId>org.springframework.boot</groupId> <artifa ...

  5. System 类初探

    System 类 操作方法 取得当前的系统时间 currentTemiMillis() public static long currenTimeMillis() ; 实例: 统计某些操作的执行时间 ...

  6. Linux下用户管理:创建用户指定密码

    首先我们来了解下Linux下用户管理的概念: 如上图所示,左边的一列表示用户名,中间的一列表示用户组,最右边的一列表示的是家目录.用户名我们这里处于简单就,添加了root,xm,xh三个用户.用户组和 ...

  7. hadoop 自定义OutputFormat

    1.继承FileOutputFormat,复写getRecordWriter方法 /** * @Description:自定义outputFormat,输出数据到不同的文件 */ public cla ...

  8. 一文解读ARM架构 (转)

    本文主要介绍的是arm架构和x86架构的区别,首先介绍了ARM架构图,其次介绍了x86架构图,最后从性能.扩展能力.操作系统的兼容性.软件开发的方便性及可使用工具的多样性及功耗这五个方面详细的对比了a ...

  9. nRF24L01+如何检测信道被占用-RSSI寄存器实战分享

    检测信道占用的需求场景 在使用nRF24L01模块做一对多或多对一的组网通信中,大家都会担心一个问题就是在发送的时候,希望不要有其他的模块也进行发送,因为这样就会使无线信号发生碰撞,信道被堵塞,造成通 ...

  10. Mysql—配置文件my.ini或my.cnf的详解

    [mysqld] log_bin = mysql-bin binlog_format = mixed expire_logs_days = # 超过7天的binlog删除 slow_query_log ...