CSS笔记(二)CSS属性选择器
对带有指定属性的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属性选择器的更多相关文章
- css笔记04:属性选择器
1.属性选择器: 带有 title 属性的所有元素设置样式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- css选择器学习(二)属性选择器
属性选择器 /*******************************************css2中的属性选择器*************************************** ...
- CSS(二):选择器
一.基本选择器 1.标签选择器 HTML标签作为标签选择器的名称,例如<h1>~<h6>.<p>等. 语法: p{font-size: 16px;} p:标签选择器 ...
- CSS 笔记之 CSS 选择器
/*先设置背景再设置前景*/ pre{ background-color: #f8f8f8; border: solid 1px #ccc; border-radius: 3px; overflow: ...
- css基础知识之属性选择器
css属性选择器及属性和值选择器如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 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 ...
- Webpack4 学习笔记二 CSS模块转换
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- CSS(二)- 属性速览(含版本、继承性和简介)
相关链接 CSS3速查表,这里面列出了所有新增的属性以及新增或者修改的属性值 css参考手册,很好地一个常用网站 CSS定位(不可继承) CSS布局(仅visibility可继承) CSS尺寸(不可继 ...
- css笔记07:通配符选择器
通配符选择器: * { margin:10px ;//默认四个位置参数全为零 margin-top:10px;//分别设置四个参数 margin-left:10px; margin-right:0px ...
随机推荐
- 161207、高并发:java.util.concurrent.Semaphore实现字符串池及其常用方法介绍
实现字符串池: StrPool.java import java.util.ArrayList; import java.util.List; import java.util.concurrent. ...
- Mac OX 隐藏文件夹,文件,应用,磁盘的2种方法 hide finder folder, file, application, volume in 2 ways
经常需要主目录下隐藏一些文件夹之类的, 第一想到的当然就是:在要隐藏的文件夹前面加『.』(leading dot),这个用法当然可以的了 用习惯了Linux/GNU系统的,基本习惯使用这种办法 但是, ...
- 10 个迅速提升你 Git 水平的提示【转】
转自:https://www.oschina.net/translate/10-tips-git-next-level 最近我们推出了两个教程:熟悉Git的基本功能和让你在开发团队中熟练的使用Git ...
- 两个升序链表的合并 Merge Two Sorted Lists 【 leetcode】
class Solution {public: ListNode* mergeTwoLists(ListNode* l1, ListNode* l2) { ListNode *p; ListN ...
- db2常用函数(1)
VALUE函数 语法:VALUE(EXPRESSION1,EXPRESSION2) VALUE函数是用返回一个非空的值,当其第一个参数非空,直接返回该参数的值,如果第一个参数为空,则返回第一个参数的值 ...
- 怎么样 解决nginx负载均衡的session共享问题呢
php服务器有多台,用nginx做负载均衡,这样同一个IP访问同一个页面会被分配到不同的服务器上,如果session不同步的话,就会出现很多问题,比如说最常见的登录状态,下面提供了几种方式来解决ses ...
- poj1811 Prime Test
http://poj.org/problem?id=1811 #include <cstdio> #include <cstring> #include <algorit ...
- hrtimer和work工作队列的使用
1.hrtimers - 为高分辨率kernel定时器,可作为超时或周期性定时器使用 1). hrtimer_init初始化定时器工作模式. hrtimer_init(&vibe_timer, ...
- 开发与测试整体过程中的Git分支merge流程
开发与测试整体过程中的Git分支merge流程 Git分支merge之开发流程 首先在Gitlab上有个仓库存储着原始的项目代码,其中包含一个叫master的分支.然后可能按功能进行分配,由不同的开发 ...
- 使用cookie保存页面登录信息
1.数据库连接配置页面:connectvars.php <?php//数据库的位置define('DB_HOST', 'localhost');//用户名define('DB_USER', 'r ...