CSS选择符的用法与实例详解

发布时间:2019-12-28编辑:脚本学堂
本文介绍下,css选择符的用法,提供了一些css选择符的例子,供大家学习参考。

本节内容:
CSS选择符的用法举你

本节为大家介绍CSS选择符(CSS Selectors)用法和相关例子。

总结下css1及css2选择符(本文的CSS选择符都为css1及css2)的用法及实例。

一,CSS选择符:
 

CSS选择符(CSS Selectors - CSS1 and CSS2)
类型选择符(Type Selectors) CSS1
包含选择符(Descendant Selectors) CSS1
ID选择符(ID Selectors) CSS1
类选择符(Class Selectors) CSS1
分组选择符(Grouping Selectors) CSS1
通配选择符(Universal Selectors) CSS2
子选择符(Child Selectors) CSS2
相邻选择符(Adjacent Selectors) CSS2
属性选择符(Attribute Selectors)
E1[attr] CSS2
E1[attr=value] CSS2
E1[attr~=value] CSS2
E1[attr|=value] CSS2
伪类选择符(CSS Pseudo-Classes Reference)
:link CSS1
:visited CSS1
:hover CSS1
:active CSS1
:focus CSS2
:first-child CSS2
:first CSS2
:left CSS2
:right CSS2
:lang CSS2
伪对象选择符(CSS Pseudo-Elements Reference)
:first-letter CSS2
:first-line CSS2
:before CSS2
:after CSS2

以上列出了所有的CSS选择符,以下对每个选择符做单独的解释和举例。
希望大家注意各种选择符的使用范围和方法。

1,类型选择符(Type Selectors)
  语法:E1
  说明:有的时候我们也将它叫做标签选择符,因为它是直接用html标记来做选择符进行操作。目前所有主流浏览器均支持该选择符,属于CSS1选择符。
例子:
 

复制代码 代码示例:
  div{color:#F00;}
  <div>这里是测试内容</div>

2,包含选择符(Descendant Selectors)
  语法:E1 E2
  说明:选择所有被E1包含的E2,这里的E1和E2即可以是html标记,也可以是class或id。目前所有主流浏览器均支持该选择符,属于CSS1选择符。
例子:
 

复制代码 代码示例:
 div em{color:#F00;}
  .test em{color:#F00;}
  <div>这里是<em>测试</em>内容</div>
  <div class="test">这里是<em>测试</em>内容</div>

3,ID选择符(ID Selectors)
  语法:#sID
  说明:以DOM中作为对象的唯一标识符的ID作为选择符。目前所有主流浏览器均支持该选择符,属于CSS1选择符。
例子:
 

复制代码 代码示例:
 #test{color:#F00;}
  <div id="test">这里是测试内容</div>

4,类选择符(Class Selectors)
  语法:.className
  说明:其效果等同于E1[class~=className]。可以为对象的class属性指定多于一个值(className),其方法是用空格将每个className隔开。目前所有主流浏览器均支持该选择符,属于CSS1选择符。
例子:
 

复制代码 代码示例:
  .test{color:#F00;}
  .test2{font-size:14px;}
  <div id="test">这里是测试内容</div>
  <div id="test test2">这里是测试内容</div>

5,分组选择符(Grouping Selectors)
  语法:E1,E2,E3
  说明:将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组。目前所有主流浏览器均支持该选择符,属于CSS1选择符。
例子:
 

复制代码 代码示例:
 .test,p{color:#F00;}
  <div id="test">这里是测试内容</div>
  <p>这里是测试内容</p>

6,通配选择符(Universal Selectors)
  语法:*
  说明:选定DOM中的所有对象。目前所有主流浏览器均支持该选择符,属于CSS2选择符。
例子:
 

复制代码 代码示例:
 *{color:#F00;}
  <div>这里是测试内容</div>
  <p>这里是测试内容</p>

7,子选择符(Child Selectors)
  语法:E1 > E2
  说明:选择所有作为E1子对象的E2,不包括孙辈和更深的关系。非IE内核浏览器和IE7及以上浏览器支持,属于CSS2选择符。
例子:
 

复制代码 代码示例:
 .test > strong{color:#F00;}
  <div class="test">
   <strong>测试的内容</strong>
   <p>这是<strong>测试的内容</strong>哦!</p>
   <strong>测试的内容</strong>
  </div>

8,相邻选择符(Adjacent Selectors)
  语法:E1 + E2
  说明:选择紧跟在对象E1之后的所有E2对象(E1与E2需结构级别相同)。非IE内核浏览器和IE7及以上浏览器支持,属于CSS2选择符。
例子:
 

复制代码 代码示例:
  p + p{color:#F00;}
  <p>测试的内容1</p>
  <p>测试的内容2</p>
  <div>测试的内容3</div>
  <p>测试的内容4</p>
  <p>测试的内容5</p>
  <div><p>测试的内容6</p></div>

9,属性选择符(Attribute Selectors)
  语法:(属性选择符具体再分为4种不同的表现方式)
  1.E1[attr]
  2.E1[attr=value]
  3.E1[attr~=value]
  4.E1[attr|=value]

说明:
  1. 选择具有attr属性的E1
  2. 选择具有attr属性且属性值等于value的E1
  3. 选择具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于value的E1。
  4. 选择具有attr属性且属性值为一用连字符分隔的字词列表,由value开始的E1
  非IE内核浏览器和IE7及以上浏览器支持,属于CSS2选择符。
例子:
  

复制代码 代码示例:
div[title]{color:#f00;}
  <div title="测试的内容">测试的内容</div>
  div[class=a]{color:#f00;}
  <div class="a">测试的内容</div>
  <div class="a b">测试的内容</div>
  div[class~=a]{color:#f00;}
  <div class="a">测试的内容</div>
  <div class="a b">测试的内容</div>
  div[title|=a]{color:#f00;}
  <div title="a">测试的内容</div>
  <div title="a b c">测试的内容</div>
  <div title="a-b-c">测试的内容</div>

10,伪类选择符(CSS Pseudo-Classes Reference)
  语法:(伪类选择符共有10种)
  

1. Selector:link{ sRules }
  2. Selector:visited{ sRules }
  3. Selector:hover{ sRules }
  4. Selector:active{ sRules }
  5. Selector:focus{ sRules }
  6. Selector1 Selector2:first-child{ sRules }
  7. Selector:first{ sRules }
  8. Selector:left{ sRules }
  9. Selector:right{ sRules }
  10.Selector:lang{ sRules }

说明:
  1. 设置a对象在未被访问前的样式表属性。默认值由浏览器决定。对于无href属性(特性)的a对象,此伪类不发生作用。
  2. 设置a对象在其链接地址已被访问过时的样式表属性。默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无href属性(特性)的a对象,此伪类不发生作用。
  3. 设置对象在其鼠标悬停时的样式表属性。在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
  4. 设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。
  5. 设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式表属性。
  6. 设置对象(Selector1)的第一个子对象(Selector2)的样式表属性。
  7. 设置页面容器第一页使用的样式表属性。仅用于@page规则。
  8. 设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。
  9. 设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。
  10.设置对象使用特殊语言的内容样式表属性。
  :link, :visited, :hover, :active属于CSS1,目前所有主流浏览器均支持a对象的该4种伪类选择符,非IE浏览器和IE7及以上浏览器还支持非a对象的:hover, :active;:focus, :lang属于CSS2,非IE核心浏览器及IE8支持。
例子:
 

复制代码 代码示例:
 a:link{color:#f00;}
  a:visited{color:#666;}
  a:hover{color:#F60;text-decoration:none;}
  a:active{color:#000;}
  <a href="http://www.jb200.com/">css探索之旅</a>
  input:focus,a:focus{background:#f00;/* 点击或按TAB键获得焦点时生效 */}
  <a href="http://www.jb200.com/">css探索之旅</a>
  <input type="text" />
  div em:first-child{color:#f00;}
  <div><em>web</em>前端开发<em>权威指南</em></div>

11,伪对象选择符(CSS Pseudo-Elements Reference)
  语法:(伪对象选择符共有4种)
  

1. Selector:first-letter
  2. Selector:first-line
  3. Selector:before
  4. Selector:after
 

  说明:
  1. 设置对象内的第一个字符的样式表属性。此伪对象仅作用于块元素。内联元素要使用该伪对象,必须先设定对象具有块元素的表状。
  2. 设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象具有块元素的表状。
  3. 用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。
  4. 用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。
  这几个伪对象选择符都为属于CSS2选择符,其中:first-letter和:first-line目前所有主流浏览器均支持;:before和:after非IE核心浏览器及IE8支持。

例子:
 

复制代码 代码示例:
 div:first-letter {color:#f00;}
  <div>我是一只丑小鸭,伊啊伊啊哟</div>
  div:first-line {color:#f00;}
  <div>我是一只丑小鸭,伊啊伊啊哟</div>
  div:before {content:"web";}
  <div>前端开发</div>
  div:after {content:"...";}
  <div>大段的文字</div>

有关CSS选择符的用法与具体示例,就介绍这些吧,希望对大家有所帮助。