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：属性选择器的更多相关文章

  1. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  2. css笔记09：选择器优先级

    1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. 5月22日上课笔记-js属性选择器、过滤选择器、鼠标事件

    一.属性选择器 [attr] 包含属性 [attr=value] 属性值 [attr!=value] 属性值不等于value [attr^=value] 属性值以value开头 [attr$=valu ...

  4. css笔记02：选择器（标签式和类）

    body { margin:; padding:; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font: ...

  5. CSS学习_属性选择器

    CSS选择器参考 [attribute]——选取带有指定属性的元素: [attribute=value]——选取带有指定属性和值的元素: [attribute~=value]——选取属性值中包含指定词 ...

  6. AMQ学习笔记 - 04. 消息选择器

    概述 消息选择器使用类似于SQL语法,为Consumer指定基于Message属性的筛选条件. 消息选择器 发送的时候,给消息添加一些属性:在接收的时候,根据属性进行过滤. API javax.jms ...

  7. JQUERY1.9学习笔记 之属性选择器(一) 前缀选择器

    描述:选择指定属性值的元素,或者是以字符串开始其后跟随“-”符号的. jQuery( "[attribute|='value']" ) 例:查找出所有语言属性为en的链接. < ...

  8. css笔记11：选择器练习

    1. (1)exam1.css文件: .s1 { font-size: 50px; color: blue; } .s2 { backgoround:gray; font-style: italic; ...

  9. JQUERY1.9学习笔记 之属性选择器(二) 包含选择器

    jQuery("[attribute*='value']") 描述:选择所有与给定值匹配的属性值的标签. 例:找出所有name属性包含"man"的input标签 ...

随机推荐

  1. MFC学习20160718（GetModuleFileName&&GetAppDataPath）

    1.标题栏设置 一.对话框标题栏内容为静态 直接在对话框属性“General”的“Caption”中修改. 二.对话框标题栏内容为动态生成的 在对应对话框的初始化函数OnInitDialog()中添加 ...

  2. 文本分类之特征描述vsm和bow

    当我们尝试使用统计机器学习方法解决文本的有关问题时,第一个需要的解决的问题是,如果在计算机中表示出一个文本样本.一种经典而且被广泛运用的文本表示方法,即向量空间模型(VSM),俗称“词袋模型”. 我们 ...

  3. uva202：循环小数（循环节+抽屉原理）

    题意: 给出两个数n,m,0<=n,m<=3000,输出n/m的循环小数表示以及循环节长度. 思路: 设立一个r[]数组记录循环小数,u[]记录每次的count,用于标记,小数计算可用 r ...

  4. 基于Node.js的实时推送 juggernaut

    基于Node.js的实时推送 juggernaut Juggernaut 基于 Node.js 构建.为浏览器和服务器端提供一个实时的连接,可在客户端和服务器端进行数据的实时推送,适合多角色游戏.聊天 ...

  5. PID入门的十五个基本概念

    PID调节系统PID功能由PID调节器或DCS系统内部功能程序模块实现,了解与PID调节相关的一些基本概念,有助于PID入门新手快速熟悉调节器应用,在自动调节系统中成功整定PID参数.1.被调量被调量 ...

  6. 在 Web 层应用程序中使用Spring

    前面已经配置成功后,就可以在Web 层的Servlet或Jsp中调用访问Spring了,如果你 编制的是一个Servlet/Jsp 程序,那么在你的Servlet/Jsp 使用下面的代码通过Sprin ...

  7. Unity3D之UGUI学习笔记（二）：Rect Transform与Anchor

    Rect Transform 我们都知道,Unity3D中所有的GameObject都必须要携带一个Transform组件,且该组件无法移除,那么作为UI显示的GameObject则不是携带Trans ...

  8. 连接查询中on and和on where的区别

    一.区别 1. and条件是在生成临时表时使用的条件,它不管and中的条件是否为真,都会返回左(或者右)边表中的记录. 2.where条件是在临时表生成好后,再对临时表进行过滤的条件.这时已经没有le ...

  9. Mac下生成RSA密钥

    MAC OS自带了OpenSSL,直接在命令行里使用OPENSSL就可以. 打开命令行工具,然后输入 openssl打开openssl,接着只要三句命令就可以搞定. 第一句命令生成1024位私钥: O ...

  10. 从零开始学android开发-布局中 layout_gravity、gravity、orientation、layout_weight

    线性布局中,有 4 个及其重要的参数,直接决定元素的布局和位置,这四个参数是 android:layout_gravity ( 是本元素相对于父元素的重力方向 ) android:gravity (是 ...