属性选择符：

E[att]　　　　　　选择具有att属性的E元素。

  1. <style type="text/css">
  2. a[class]{ background-color: red;}
  3. </style>
  4. <body>
  5. <a href="" class="a">链接a</a>
  6. <a href="" id="b">链接b</a>
  7. </body>

E[att="val"] 　　　选择具有att属性且属性值等于valu的E元素。

  1. <style type="text/css">
  2. a[class="1"]{ background-color: red;}
  3. </style>
  4. <body>
  5. <a href=""  class="1">链接a</a>
  6. <a href=""  class="2">链接b</a>
  7. </body>

E[att~="val"]　　　　选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

  1. <style>
  2. a[class~="id"]{color: red;}
  3. </style>
  4. <body>
  5. <ul>
  6. <li><a href="" class="id 1">链接a</a></li>
  7. <li><a href="" class="1">链接b</a></li>
  8. <li><a href="" class="1">链接b</a></li>
  9. </body>

E[att^="val"]　　　　选择具有att属性且属性值为以val开头的字符串的E元素。

  1. <style>
  2. a[title~=""]
  3. {color:red;}
  4. </style>
  5. <body>
  6. <a href="http://www.163.com/" title="www 163 com">红色</a>
  7. <a href="http://www.baidu.com/" title="www baidu com">红色</a>
  8. </body>

E[att$="val"]　　　　选择具有att属性且属性值为以val结尾的字符串的E元素。

  1. <style>
  2. li[class$="a"] {color: #f00;}
  3. </style>
  4. </head>
  5. <body>
  6. <ul>
  7. <li class="abc">列表项目</li>
  8. <li class="acb">列表项目</li>
  9. </ul>
  10. </body>

E[att*="val"]　　　　选择具有att属性且属性值为包含val的字符串的E元素。

  1. <style type="text/css">
  2. a[href*=".html"]{color:red;}
  3. a[href*=".php"]{color:green;}
  4. a[href*=".jsp"]{color:blue;}
  5. </style>
  6. <body>
  7. <a href="http://www.dreamdu.com/css.html?id=1&name=www">梦之都红色字体</a>
  8. <a href="http://www.dreamdu.com/css.php?id=2&name=dreamdu">梦之都绿色字体</a>
  9. <a href="http://www.dreamdu.com/css.jsp?id=3&name=com">梦之都蓝色字体</a>
  10. </body>

E[att|="val"]　　　　选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

  1. <style type="text/css">
  2. a[title~="dreamdu"]{color:red;}
  3. </style>
  4. <body>
  5. <a href="http://www.dreamdu.com/" title="www dreamdu com">红色</a>
  6. </body>

font-family，font-size，font-weight，font-style

  1. <style type="text/css">
  2. p { font-family: "宋体";}
  3. h1 { font-size:14px ;}
  4. h2 { font-weight: normal ;}
  5. h3 {font-style: italic;}
  6. </style>
  7. </head>
  8. <body>
  9. <p>这是一个标签</p>
  10. <h1>这是一个标签</h1>
  11. <h2>这是一个标签</h2>
  12. <h3>这是一个标签</h3>
  13. </body>

font(字体样式缩写)

  1. <style type="text/css">
  2. /*p{font-style:italic;
  3. font-weight:bold;
  4. font-size:14px;
  5. line-height:22px;
  6. font-family:宋体;}*/
  7. p {font:italic bold 14px/22px 宋体}
  8. </style>
  9. </head>
  10. <body>
  11. <p>这是一个标签</p>
  12. </body>
  13. </html>

text-decoration(文本装饰线条)，text-shadow(文字阴影)

  1. <style type="text/css">
  2. p { text-decoration: underline;
  3. text-shadow: 2px 2px #ff0000; }
  4. </style>
  5. </head>
  6. <body>
  7. <p>这是一个标签</p>
  8. </body>

width，height

  1. <style type="text/css">
  2. p { width:300px;}
  3. div { height:100px; padding: 1px; border:1px solid;}
  4. </style>
  5. </head>
  6. <body>
  7. <p>这是一个标签这是一个标签这是一个标签这是一个标签</p>
  8. <div>这是一个标签</div>
  9. </body>

CSS属性选择符的更多相关文章

  1. 强大的CSS 属性选择符 配合 stylish 屏蔽新浪微博信息流广告

    新建一条微博域名下的规则: @-moz-document domain("weibo.com") { #v6_pl_rightmod_rank,#v6_pl_rightmod_ad ...

  2. #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

  3. css关系选择符

    <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. CSS3初学篇章_3（属性选择符/字体样式/元素样式）

    属性选择符  选择符  说明  E[att]  选择具有att属性的E元素.  E[att="val"]  选择具有att属性且属性值等于val的E元素.  E[att~=&quo ...

  5. CSS 组合选择符

    CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...

  6. CSS：CSS 组合选择符

    ylbtech-CSS:CSS 组合选择符 1.返回顶部 1. CSS 组合选择符 CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CS ...

  7. CSS高级选择符

    2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...

  8. CSS 的选择符

    CSS是什么? 如果说元素是标记代码的构建块料,那么CSS就是约束这些构建块料样式的规则. CSS规则的组成 CSS的规则由 选择符 和属性,值组成. Css选择符:选择符是规则中用于确定样式所涵盖的 ...

  9. CSS之选择符、链接、盒子模型、显示隐藏元素

    <html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素< ...

随机推荐

  1. mysql 替换某个字段中的某个字符

    遇到这么个情况: 比如: Msql里面的某个表的某个字段里面存储的是一个人的地址,有一天这个地址的里面的某个地 名变了,那么他的地址也就要变: 比如: 原来是: number              ...

  2. git简单命令

    1. git status(不代参数) -- 查看本地修改过的文件 git status -s (简洁) 2. git add  -- 添加到暂存区 3. git commit -m '提交的mess ...

  3. SharePoint常用目录介绍

    SharePoint常用目录介绍 stsadm命令管理程序目录:C:\Program Files\Common Files\Microsoft Shared\web server extensions ...

  4. android Json Gson FastJson 解析

    一 Json xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...

  5. 阅读笔记 1 火球 UML大战需求分析

    伴随着七天国庆的结束,紧张的学习生活也开始了,首先声明,阅读笔记随着我不断地阅读进度会慢慢更新,而不是一次性的写完,所以会重复的编辑.对于我选的这本   <火球 UML大战需求分析>,首先 ...

  6. 浏览器请求URL原理

    访问服务器url其实是访问DNS服务器,浏览器询问DNS服务器锁访问的url的IP是什么, 找到之后就会返回结果,找不到就继续去其他DNS中寻找,找到路径之后就会返回一个html文档,浏览器会解析这个 ...

  7. jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后

    代码如下: setFocus=function(id){ var t=$("#"+id).val(); $("#"+id).val(""). ...

  8. 解决android:background背景图片被拉伸问题

    ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...

  9. JFinal - scheduler 插件做定时任务

    我在项目中遇到一个需求:服务运行期间,数据库要定期去监测某表并且更新. 正好项目是使用 jfinal 做的,于是就用了 jfinal-scheduler 插件来解决(jfinal-scheduler ...

  10. C程序中常见的内存操作错误

    对C/C++程序员来说,管理和使用虚拟存储器可能是个困难的, 容易出错的任务.与存储器有关的错误属于那些令人惊恐的错误, 因为它们在时间和空间上, 经常是在距错误源一段距离之后才表现出来. 将错误的数 ...