css属性选择器
1.E[att] 选择具有attr属性的E元素。
2.E[att="val"] 选择具有att属性且属性值等于val的E元素
3.E[att~="val"] 选择具有att属性的元素，且元素值列表中有一个符合val的元素
4.E[att^="val"] 选择E元素中有att属性，且以val开头的元素。
5.E[att$="val"] 选择E元素中有att属性，且以val结尾的元素。
6.E[att*="val"] 选择具有att属性且属性值包含val的字符串的E元素。
1.E[att]选择具有attr属性的E元素。示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
option[disabled]{color: red;}
</style>
</head>
<body>
<select name="">
<option value="0">火车</option>
<option value="1" disabled="disabled">汽车</option>
<option value="2">轮船</option>
<option value="3">飞机</option>
</select>
</body>
</html>
显示汽车为红色。如果要全部变为红色可把 disabled 换为 value。
2.E[att="val"] 选择具有att属性且属性值等于val的E元素。（他不仅要有符合的属性，值也要符合才会被选中。）示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
input[type="text"]{height: 100px;}
</style>
</head>
<body>
<form action="" method="post">
<input type="text" placeholder="这是文本框"/>
<input type="password" placeholder="这是密码"/>
<input type="radio"/>
<input type="submit"/>
</form>
</body>
</html>
显示输入文本区域高为100像素
3.E[att~="val"]选择具有att属性的元素，且元素值列表中有一个符合val的元素。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
p[class~=p1]{color: red;}
</style>
</head>
<body>
<div>
<p class="p1 pMore pColor">随便写点</p>
<p class="pMore pColor">段落二</p>
<p class="p12 pMore pColor">段落三</p>
<p class="p11 pMore pColor">段落四</p>
<p class="pMore p1 pColor">段落五</p>
</div>
</body>
</html>
显示为第一个和最后一个是红色的。
4.E[att^="val"]选择E元素中有att属性，且以val开头的元素。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
p[class^=p]{color: red;}
</style>
</head>
<body>
<div>
<p class="p1 pMore pColor">随便写点</p>
<p class="pMore pColor">段落二</p>
<p class="p12 pMore pColor">段落三</p>
<p class="p11 pMore pColor">段落四</p>
<p class="pMore p1 pColor">段落五</p>
</div>
</body>
</html>
全部显示为红色。
5.E[att$="val"]选择E元素中有att属性，且以结尾的元素。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
p[class$=p]{color: red;}
</style>
</head>
<body>
<div>
<p class="p1 pMore pColor">随便写点</p>
<p class="pMore pColor">段落二</p>
<p class="p12 pMore pColorp">段落三</p>
<p class="p11 pMore pColor">段落四</p>
<p class="pMore p1 pColorp">段落五</p>
</div>
</body>
</html>
段落三和段落五为红色
6.E[att*="val"] 选择具有att属性且属性值包含val的字符串的E元素。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
a[href*="jd"]{color: red;}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.taobao.com">淘宝</a>
<a href="http://www.jd.com">京东</a>
</body>
</html>
京东显示为红色。
css属性选择器的更多相关文章
- IE7浏览器下CSS属性选择器二三事
一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...
- CSS 属性选择器的深入挖掘
CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...
- CSS：CSS 属性 选择器
ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需 ...
- CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别
CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别 总结: "value 是完整单词" 类型的比较符号: ~=, |= "拼接字符串" 类型的比较 ...
- CSS属性选择器温故-4
1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总 ...
- CSS 属性选择器(八)
一.属性选择器 属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式 如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属 ...
- CSS笔记（二）CSS属性选择器
对带有指定属性的HTML元素设置样式. 参考: http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp 选择器 描述 [att ...
- 前端学习 -- Css -- 属性选择器
属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...
- 使用这些 CSS 属性选择器来提高前端开发效率
属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并 ...
- css 属性选择器
css2的属性选择器 1.[class~="flower"]:选中有flower的class class="flower ss" class="ss ...
随机推荐
- 在Unity中如何取得一个Box的Bounds
private BoxCollider mCollider; // Use this for initialization void Start () { mCollider = GetCompone ...
- dede 数据库类使用列表
dedecms的数据库操作类,非常实用,在二次开发中尤其重要,这个数据库操作类说明算是奉献给大家的小礼物了. 引入common.inc.php文件 require_once (dirname(__FI ...
- Scrum4.0＋5.0
1.题目: 1.准备看板. 形式参考图4. 2.任务认领,并把认领人标注在看板上的任务标签上. 先由个人主动领任务,PM根据具体情况进行任务的平衡. 然后每个人都着手实现自己的任务. 3.为了团队合作 ...
- windows系统调用 获取当前内存信息
#include "iostream" #include "windows.h" #include "shlwapi.h" #include ...
- linux中非root用户使用wireshark进行抓包
开始的时候我是在终端中使用sudo 命令打开 wireshark 的,因为如果不这样的话 wireshark 就没法抓包啊.偶尔抓一次包就使用这样的方式提权. 今天使用 wireshark 的时候特意 ...
- cxf(3.1.1) 客户端异常 请使用 @XmlType.name 和 @XmlType.namespace 为类分配不同的名称。
最近项目使用webService 于是就使用了最新版本 3.1.1 . cxf 客户端调用时老是出现这个错误,综合网上各种资料修改如下,问题解决 "@XmlType.name 和 @XmlT ...
- IIS7的集成模式下如何让自定义的HttpModule不处理静态文件（.html .css .js .jpeg等）请求
今天将开发好的ASP.NET站点部署到客户的服务器上后,发现了一个非常头疼的问题,那么就是IIS7的应用程序池是集成模式的话,ASP.NET项目中自定义的HttpModule会处理静态文件(.html ...
- js 操作 字符串
去w3school看看string的基本方法把: 方法描述 anchor() 创建 HTML 锚. big() 用大号字体显示字符串. blink() 显示闪动字符串. ...
- 如何使用Python调用AutoIt来实现Flash控件的上传功能
先看一段代码 upload.au3(这个后缀autoit3的格式): ;等待出现title为数据采集-军课网-MozillaFirefox的浏览器窗口 WinWait("数据采集 - XX网 ...
- selenium—JS点击方法
package com.allin.pc;import java.util.NoSuchElementException;import org.openqa.selenium.By;import or ...