注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

和申的个人主页

专注于java开发,1985wanggang

 
 
 

日志

 
 

第二章 .选择器 (第二部分) 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout  

2013-02-11 18:14:35|  分类: Html/Js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout
学习笔记

第二章 .选择器 (第二部分)

2.14 部分属性值选择 (CSS3)
    a[href="http://w3.org/"]  精确匹配URL的链接元素
    a[href*="w3.org"]     { font-weight: bold;} 
    只需要在等号前面加个星号就行了。注意,这不是通用选择器,也不能把星号放到值得前面来创建UNIX或者grep式的通配符。
    例子:
     img[src*=mainlog.png"]
     将会匹配:
     <img src="/img/2010/mainlogo.png.gif" alt="ConHugCo Inc."/>
     <img src="/img/2010/mainlogo.pngdir/big.png" alt="ConHugCo Inc."/>
     当然,你或许不应该这样命名文件和目录。
  例子:
   a[href*="/contact"] {color: maroon;}
   a[href*="/news"] {font=weight: bold;}
   img[alt*="igure"] 匹配诸如“configure”,“disfigure”,“oliguresis”等。
    需要注意属性值区分大小写
     
2.15 更多部分属性值选择 (CSS3)
    根据属性值得开始部分的子串进行选择
    a[href^="http"]
    根据属性值得结尾子串选择元素,可以使用模式:
    a[hrefs$=".pdf"]
    例子:
    a[href^="https"]            安全服务器链接
    a[href^="mailto"]          电子邮件联系链接
    a[href^="aim"]               AOL及时通信服务链接
    a[href$=".doc"]              微软Word文档
    a[href$=".xls"]                微软Excel文档
    a[href$=".zip"]                压缩文档
    其他:
    img[alt^="Figure"] {border:1px solid gray;}

2.16 选择后代元素 (CSS3)
    div#header a {color: #DEFACE;}
    只选择有序列表(ol)的子元素(而不是后代元素)的列表项(li)
    ol  > li {list-style-type: upper-alpha;}
  
2.17 模拟部分子选择 (CSS3)
     如果不得不支持IE6这种不支持子选择符的浏览器,也不想靠JavaScript添加对这些浏览器的支持。
      例子,使用子选择符的方式:
      div#main > div {border: 1px solid gray;}
      模拟这个效果
      div#main div {border: 1px solid gray;}
      div#main * div { border: 0;}
       这个伪造的子选择技术只能用于非继承的属性。对于可继承的属性,可能会有意想不到的效果,举个例子,有如下规则:
      ol  li { font-weight:bold;}
      ol * li {font-weight: normal;}
      假设希望夹菜具有某个特定类名的有序列表下的无序列表的字体,
      ol.urgent ul {font-weght: bold;}
      加上这条规则后,无序列表会如何?不会加粗。这是因为之前的ol * li规则会直接作用到这些列表项上,因此,font-weight:normal会覆盖它们从ol.urgent li规则继承来的加粗(bold)的值
      如果使用非继承的属性就不会发生这种情况,比如background(背景)、border(边框)、display(显示)、margin(外边距)、padding(内边距)等。
       哪些属性是否是继承的属性,可以参看http://www.w3.org/TR/CSS2/propidx.html
      
2.18 兄弟选择 (CSS3)
       CSS定义了一个选择符,它允许基于元素之前的兄弟元素来选择元素。
       例如,如果想移除任何紧跟在二级标题(h2 )元素后的段落(p)元素的上外边距,可以这样写:
       h2 {margin-bottom: 0;}
       h2 + p {margin-top: 0;}
<style>
h1 +  ul {list-style-type: lower-alpha;border: 1px solid red;}
</style>
<body>
       <ul>...</ul>
       <h1>Planning</h1>
       <ul>...</ul>
       <ul>...</ul>
       <h2>Introduction</h2>
       <p>We have some thoughts here.</p>
       <ul>....</ul>
</body>
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
 
       另一类似的选择符,它允许选择后续的兄弟元素,但不包含直接相邻的兄弟元素。她使用~作为选择符:
       h1  ~  ul {list-style-type: lower-alpha;}
       这段代码会选择位于h1元素后面且与之共享父元素的ul元素,除第一个ul之外。
       <body>
       <ul>...</ul>
       <h1>Planning</h1>
       <ul>...</ul>
       <ul>...</ul>
       <h2>Introduction</h2>
       <p>We have some thoughts here.</p>
       <ul>....</ul>
       </body>
       
<style>
h1 ~ ul {list-style-type: lower-alpha;border: 1px solid red;}
</style>
<body>
       <ul>...A</ul>
       <h1>Planning</h1>
       <ul>...B</ul>
       <ul>...C</ul>
       <h2>Introduction</h2>
       <p>We have some thoughts here.</p>
       <ul>...D</ul>
</body>
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
    在
在IE9下均不可用。

2.19 生成内容 (CSS3)
      CSS提供可以生成内容,并将其插入到文档中的方法,这使通常意义上的内存简写变模糊了。该方法是通过伪元素:before和:after以及它们的content属性实现的。
       li:before {content: "Item: "; border-bottom: 1px solid gray;}
      
<style>
li:before {content: "Item: "; border=bottom: 1px solid gray;}
</style>
<ol>
<li>Introduction</li>
<li>Premisers
  <ul>
 <li>The Role of Government</li>
 <li>The Role of free Markets</li>
 <li>Human Behavior</li>
  </ul>
</li>
<li>Problem</li>
<li>Various Solutions
   <ul>
 <li>Systemic Restructuring</li>
 <li>Regulatory Frameworks</li>
 <li>Human Behavior</li>
  </ul>
</li>
<li>Problem</li>
<li>Various Solutions
<ul>
 <li>Systemic Restructuring</li>
 <li>Regulatory Frameworks</li>
 <li>Human Behavior</li>
  </ul>
</li>
<li>Conclusion</li>
</ol>
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
        在列表项前面加点儿内容
li:before {content: "<em>Item:</em> "; border=bottom: 1px solid gray;}
    注意,只能插入文本结构。就试图把标记插入到content属性值中。
<style>
li:before {content: "<em>Item:</em> "; border=bottom: 1px solid gray;}
</style>
<ol>
<li>Introduction</li>
<li>Premisers
  <ul>
 <li>The Role of Government</li>
 <li>The Role of free Markets</li>
 <li>Human Behavior</li>
  </ul>
</li>
<li>Problem</li>
<li>Various Solutions
   <ul>
 <li>Systemic Restructuring</li>
 <li>Regulatory Frameworks</li>
 <li>Human Behavior</li>
  </ul>
</li>
<li>Problem</li>
<li>Various Solutions
<ul>
 <li>Systemic Restructuring</li>
 <li>Regulatory Frameworks</li>
 <li>Human Behavior</li>
  </ul>
</li>
<li>Conclusion</li>
</ol>
 第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
        标记被转换成了纯文本

li:before {content: "\BB";}
<style>
li:before {content: "\BB";}
</style>
<ol>
<li>Introduction</li>
<li>Premisers
  <ul>
 <li>The Role of Government</li>
 <li>The Role of free Markets</li>
 <li>Human Behavior</li>
  </ul>
</li>
<li>Problem</li>
<li>Various Solutions
   <ul>
 <li>Systemic Restructuring</li>
 <li>Regulatory Frameworks</li>
 <li>Human Behavior</li>
  </ul>
</li>
<li>Problem</li>
<li>Various Solutions
<ul>
 <li>Systemic Restructuring</li>
 <li>Regulatory Frameworks</li>
 <li>Human Behavior</li>
  </ul>
</li>
<li>Conclusion</li>
</ol>
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
        通过转义编码插入字符
      注意较老的浏览器可能无法恰当处理Unicode字符。
      a[href]:after {content: " [" attr(href)  "]" ; font-size: smaller;}
      打印页面增强:  http://alistapart.com/article/goingtoprint
      渐进增强:http://en.wikipedia.org/wiki/Progressive_enhancement

  评论这张
 
阅读(552)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016