css笔记04：属性选择器
1.属性选择器：
带有 title 属性的所有元素设置样式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head> <body>
<h1>可以应用样式：</h1>
<h2 title="Hello">Hello world</h2>
<a title="School" href="http://w3school.com.cn">W3School</a> <hr /> <h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>
2.属性和值选择器：
下面的例子为 title="W3School" 的所有元素设置样式：这里title = "W3School",如果title不等于"W3School"，属性是不会应用的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title=W3School]
{
border:5px solid blue;
}
</style>
</head> <body>
<h1>可以应用样式：</h1>
<img title="W3School" src="/i/w3school_logo_white.gif" />
<br />
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<hr /> <h1>无法应用样式：</h1>
<p title="greeting">Hi!</p>
<a class="W3School" href="http://w3school.com.cn">W3School</a>
</body>
</html>
3.属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello]这种用法有点类似关键字一样，如果title属性中含有hello这个单词，就应用属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title~=hello]
{
color:red;
}
</style>
</head> <body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr /> <h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
</body>
</html>
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[lang|=en]
{
color:red;
}
</style>
</head> <body>
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr /> <h1>无法应用样式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>
</html>
效果图：
4.设置表单样式：
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
} input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
</style>
</head>
<body> <form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button"> </form>
</body>
</html>
效果图：
css笔记04：属性选择器的更多相关文章
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
- css笔记09：选择器优先级
1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 5月22日上课笔记-js属性选择器、过滤选择器、鼠标事件
一.属性选择器 [attr] 包含属性 [attr=value] 属性值 [attr!=value] 属性值不等于value [attr^=value] 属性值以value开头 [attr$=valu ...
- css笔记02：选择器（标签式和类）
body { margin:; padding:; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font: ...
- CSS学习_属性选择器
CSS选择器参考 [attribute]——选取带有指定属性的元素: [attribute=value]——选取带有指定属性和值的元素: [attribute~=value]——选取属性值中包含指定词 ...
- AMQ学习笔记 - 04. 消息选择器
概述 消息选择器使用类似于SQL语法,为Consumer指定基于Message属性的筛选条件. 消息选择器 发送的时候,给消息添加一些属性:在接收的时候,根据属性进行过滤. API javax.jms ...
- JQUERY1.9学习笔记 之属性选择器(一) 前缀选择器
描述:选择指定属性值的元素,或者是以字符串开始其后跟随“-”符号的. jQuery( "[attribute|='value']" ) 例:查找出所有语言属性为en的链接. < ...
- css笔记11：选择器练习
1. (1)exam1.css文件: .s1 { font-size: 50px; color: blue; } .s2 { backgoround:gray; font-style: italic; ...
- JQUERY1.9学习笔记 之属性选择器(二) 包含选择器
jQuery("[attribute*='value']") 描述:选择所有与给定值匹配的属性值的标签. 例:找出所有name属性包含"man"的input标签 ...
随机推荐
- mybatis系列-07-输出映射
7.1 resultType 使用resultType进行输出映射,只有查询出来的列名和pojo中的属性名一致,该列才可以映射成功. 如果查询出来的列名和pojo中的属性名全部不一致,没有创建 ...
- ACM1994
/* Problem Description 为自行解决学费,chx勤工俭学收入10000元以1年定期存入银行,年利率为3.7% .利率按年计算,表示100元存1年的利息为3.7元.实际上有时提前有时 ...
- 依赖包bcrypt安装Issues
说明:本文在个人博客地址为edwardesire.com,欢迎前来品尝. 在决策树项目中,使用到了bcrypt依赖包来加密文件.在wini8(win7)部署安装这个依赖的时候容易出现出现了问题. 解决 ...
- Java线程池学习
Java线程池学习 Executor框架简介 在Java 5之后,并发编程引入了一堆新的启动.调度和管理线程的API.Executor框架便是Java 5中引入的,其内部使用了线程池机制,它在java ...
- Session,Cookie 和local storage的区别
以前从没有听说过local storage, 在网上查了一些资料,得到如下结论 从存储位置看,分为服务器端存储和客户端存储两种 服务器端: session 浏览器端: cookie, localSto ...
- 第三方类AFNetworking
1.AFNetworking简介 AFNetworking是一个在iOS开发中使用非常多的轻量级网络开源库适用于iOS以及Mac OS X.它构建于在(Apple iOS开发文档) NSURLConn ...
- Objective-C ：Category
Category 引入 在日常的开发中,可能会碰到这样的需求:给某个类增加方法.比如说,需要给NSString类增加一个打印的方法.当然,我们可以新建一个类比如TestString,并继承NSStri ...
- c# 使用ChartDirector绘图的一些个人体会
c# 使用ChartDirector绘图的一些个人体会 引言: 最近给客户做一个B/S架构的证券交易大屏幕软件,其中用到对证券指数的走势以及成交量的图形绘制,由于客户要求图形的清晰而且要做 ...
- 通过OAF实现RTF多语言
职责: Oracle XML Publisher 管理员 -->主页 -->模板 -->创建模板 1.定义rtf模板时 在创建模板时,勾选可转换.
- MPAndroidChart 的实现
效果图: 代码实现: package com.jiahao.me; import java.util.ArrayList; import java.util.List; import android. ...