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

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

css selector简介  

2011-04-16 16:21:43|  分类: web标准 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一.Tag selector
标签selecor ,也可以称为类型selector,它将对HTML页面中所有的该类型有效。

  1. h1 {font-family:Arial,sans-serif;color:#CCCCFF;} 
  1. DIV,H1 {font-family:Arial,sans-serif;color:#CCCCFF;}  

表示所有h1标签都适用该CSS的rule,当然为了缩短代码,适用相同的rule的多个HTML Tag可以用逗号分隔开进行统一的修饰。如上。

二.Class Selector

类选择器和HTML中的class相结合,应用到所有声明了该class的标签中。类选择器必须要以 “.”来开头。
对于

  1. .title{color:#FF000;font-size:24px;}  

class selector可以分成独立和相关两种方式,独立的class selector是直接以.开头的,表示所有具有属性class的节点都是该CSS规则修饰的目标;相关的class selector常常跟Tag selector一起来修饰,表示指定的Tag 节点里面且具有对应的class的节点才是该CSS规则修饰的目标,如DIV.testClass {}

三.ID selector
ID选择器会将其syle应用在HTML中该ID的tag上。
对于

  1.  #sidebar{float:left;margin-left:30px;

一个有意思的问题是如果在一个HTML中,有两个以上的tag用了同一个ID会怎么样呢?虽然并不是合法的HTML,但是大部分的游览器会忽略这个问题。这个时候ID选择器就像类选择器一样,只要哪个tag的使用了该ID,就会应用该style.
四.Descendent selector

这种选择器的的意思就是根据DOM树的祖先、父子关系来选择具体的元素。

如:

  1. h1 strong{color:red;

将对<h1> This is homepage of <strong>liwenbing</strong></h1>中的strong的内容进行标红。

同样这种方式是可以组合前面的任何三种选择器:

  1. h1 .intro a{color:yellow;}

将对<h1> This is homepage of <strong >liwenbing </strong> who is <span class=”intro”><a href=”#”>lovely boy</a></span></h1>中的lovely boy标黄。

注意tag和类之间是否有空格是非常重要的。

有空格表示是应用该类的元素在tag之中,就像上面的例子;没有空格,则表示tag和class都标明的是同一个元素。

  1. h1.intro a { //注意h1和.intro之间没有空格  
  2.   color:blue;}  

对<h1 class=”intro”>This is homepage of <a href=”#” >liwenbing </a></h1>中的liwenbing是有效的。

再举一个和ID selector结合的例子:

  1. #sidebar h2{font-size:1.2em;

上述style将对sidebar元素下面的所有h2进行应用。

五.Group selector

组选择器顾名思义就是对于一组selector应用同一中style,以逗号”,”隔开;组中的元素都可以是前面四中的任何一种。

  1. h1,p .intro#sidebar .title{color:#6F6F6F;}

六.伪选择
伪选择器可以进一步地定义用户和页面的行为。最常用的就是对link的定义了;

  1. a:hover{text-decoration:none;
  2. a:visited{color:blue;

当然关于link的除了上述两种,还有a:link,a:active;
其他还有很多的伪选择,例如现在在用的focus.下面这个CSS可以让input 有safari中的高亮效果(不过IE并不支持)。

  1.  input:focus{border-color:#feca70;}

其他伪选择器还有:before,:after,:firs-child.

Overview of CSS 2.1 selector syntax
Selector typePatternDescription
Universal*Matches any element.
TypeEMatches any E element.
Class.infoMatches any element whose class attribute contains the value info.
ID#footerMatches any element with an id equal to footer.
DescendantE FMatches any F element that is a descendant of an E element.
ChildE > FMatches any F element that is a child of an E element.
AdjacentE + F

Matches any F element immediately preceded by a sibling element E.

(E元素和F元素同属于一个parent并且E元素在F元素之前)

AttributeE[att]Matches any E element that has an att attribute, regardless of its value.
AttributeE[att=val]Matches any E element whose att attribute value is exactly equal to val.
AttributeE[att~=val]Matches any E element whose att attribute value is a list of space-separated values, one of which is exactly equal to val.
AttributeE[att|=val]Matches any E element whose att attribute has a hyphen-separated list of values beginning with val.
The :first-child pseudo-classE:first-childMatches element E when E is the first child of its parent.
The link pseudo-classesE:link
E:visited
Matches not yet visited (:link) or already visited (:visited) links.
The dynamic pseudo-classesE:active
E:hover
E:focus
Matches E during certain user actions.
The :language pseudo-classE:lang(c)Matches elements of type E that are in language c.
The :first-line pseudo-elementE:first-lineMatches the contents of the first formatted line of element E.
The :first-letter pseudo-elementE:first-letterMatches the first letter of element E.
The :before and :after pseudo-elementsE:before
E:after
Used to insert generated content before or after an element’s content.
  评论这张
 
阅读(4520)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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