对带有指定属性的HTML元素设置样式。

  参考: http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp

选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
  • 属性选择器

将所有带title属性的元素设置为红色:

[title]
{
color:red;
}

使用:

<h2 title="Hello world">Hello world</h2>

效果:

  • 属性和单值选择器

为title="Hello"的所有元素设置样式:

[title=Hello]
{
border:5px solid blue;
}
  • 属性和多值选择器

为title中包含指定值的所有元素设置样式。

[title~=hello] { color:red; }

使用:

<h2 title="hello world">Hello world</h2>
<h1 title="every hello">Hello everyone</h1>

效果:

  

CSS笔记(二)CSS属性选择器的更多相关文章

  1. css笔记04:属性选择器

    1.属性选择器: 带有 title 属性的所有元素设置样式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  2. css选择器学习(二)属性选择器

    属性选择器 /*******************************************css2中的属性选择器*************************************** ...

  3. CSS(二):选择器

    一.基本选择器 1.标签选择器 HTML标签作为标签选择器的名称,例如<h1>~<h6>.<p>等. 语法: p{font-size: 16px;} p:标签选择器 ...

  4. CSS 笔记之 CSS 选择器

    /*先设置背景再设置前景*/ pre{ background-color: #f8f8f8; border: solid 1px #ccc; border-radius: 3px; overflow: ...

  5. css基础知识之属性选择器

    css属性选择器及属性和值选择器如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. CSS 笔记二(Text/Fonts/Links/Lists)

    CSS Text 1> Text Color used to set the color of the text 2> Text Alignment used to set the hor ...

  7. Webpack4 学习笔记二 CSS模块转换

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...

  8. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  9. CSS(二)- 属性速览(含版本、继承性和简介)

    相关链接 CSS3速查表,这里面列出了所有新增的属性以及新增或者修改的属性值 css参考手册,很好地一个常用网站 CSS定位(不可继承) CSS布局(仅visibility可继承) CSS尺寸(不可继 ...

  10. css笔记07:通配符选择器

    通配符选择器: * { margin:10px ;//默认四个位置参数全为零 margin-top:10px;//分别设置四个参数 margin-left:10px; margin-right:0px ...

随机推荐

  1. altera soc体验之旅 FPGA与ARM的窃窃私语

      喜大普奔,公司要评估用SOC做产品,我就自然而然的被安排了学习和评估的工作,于是,每天的工作就是开始研究soc了.其实,只要能静下心来学习,一切都还是能够弄出来的. 以前像个无头苍蝇一样到处乱撞, ...

  2. Hibernate,JPA注解@OneToMany_Set

    用例代码如下: 数据库DDL语句 1,CAT表 create table CAT ( id CHAR) not null, create_time ), update_time ), cat_name ...

  3. 6、XML(2)

    1 总结XML基础 XML基础 1)XML的作用 1.1 作为软件配置文件 1.2 作为小型的"数据库" 2)XML语法(由w3c组织规定的) 标签: 标签名不能以数字开头,中间不 ...

  4. apache php 开启伪静态

    打开apache的配置文件httpd.conf 找到 #LoadModule rewrite_module modules/mod_rewrite.so 把前面#去掉.没有则添加,但必选独占一行,使a ...

  5. [HTML][服务器]状态码列表status

    AJAX中请求远端文件.或在检测远端文件是否掉链时,都需要了解到远端服务器反馈的状态以确定文件的存在与否. 当然,在我们平常浏览网页时,也会发现一些文件不存在时显示为“404错误”,这就是常见的Htt ...

  6. ACM题目————Aggressive cows

    Description Farmer John has built a new long barn, with N (2 <= N <= 100,000) stalls. The stal ...

  7. HDU 1060 Leftmost Digit

    基本思路:(参考大神和加自己的思考) 考虑到此题需要输入这么大的数a,并且还的求aa,求出来会更大,更多位.当时考虑用大数方法求(数组实现),结果实现不行.看网上大神采用对数法,巧妙避开处理这么大的数 ...

  8. FIleReader无法解决编码问题

    可把FileReader 用InputStreamReader(new FileInputStream(String fileptah),"utf-8")替代

  9. 上传文件时,Request报文头不同浏览器会产生不同的content-type

    选择一个zip文件上传,用IE看的报文头是image/jpeg,用chrom看是application/octet-stream. 第一次遇到这个类型的content-type,百度了一下, octe ...

  10. python中string.casefold和string.lower区别

    string.casefold和string.lower 区别 python 3.3 引入了string.casefold 方法,其效果和 string.lower 非常类似,都可以把字符串变成小写, ...