CSS3选择器详解

原创 2015年07月08日 10:40:16

在CSS3中,我们可以使用html元素的属性名称先择性地定义CSS样式,其实属性选择器早在CSS2中就被引入了,属性选择器一共分为4中匹配模式选择器


1.完全匹配属性选择器

2.包含匹配选择器

3.首字母匹配选择器

4.尾字符匹配选择器


下面就开始讲解这4中选择器的具体用法:


1.完全匹配属性选择器:

其含义就是完全匹配字符串 当一个元素的属性和属性值与样式所指定的属性和属性值完全相同时,才会使用该样式,并且适用所有被匹配的元素

eg:  <div id="style1">完全匹配属性选择器</div>

<style type="text/css">

[id="style1"]{boder-color:red;}

</style>

2.包含匹配选择器:

包含匹配选择器比完全匹配要广,只要元素中的属性值包含有指定的字符串,元素就会使用该样式

其语法是:[attribute*=value] 其中attribute是属性名,value是属性值

eg: <div id="style1">包含匹配选择器1</div>

<div id="style2">包含匹配选择器2</div>

<div id="style3">包含匹配选择器3</div>

<style type="text/css">

[id*="style"]{boder-color:red;}

</style>

以上3个div都会使用该元素

3.首字符匹配选择器

首字符匹配选择器是指只要元素的属性值的开头有指定的字符串,元素就会使用该样式

其语法是:[attribute^=value]

<div id="style1">首字符匹配选择器1</div>

<div id="style2">首字符匹配选择器2</div>

<div id="mystyle">首字符匹配选择器3</div>

<style type="text/css">

[id*="style"]{boder-color:red;}

</style>

只有属性值为style1和style2的div会使用该样式

4.尾字符匹配选择器

和首字符选择器一样 只要元素的属性值的尾字符符合匹配,元素就会使用该样式

其语法是:[attribute$=value]

<div id="style">尾字符匹配选择器1</div>

<div id="style1">尾字符匹配选择器2</div>

<div id="mystyle">尾字符匹配选择器3</div>

<style type="text/css">

[id*="style"]{boder-color:red;}

</style>

只有id为style的div会使用该样式


-------------------------------------------------------------------------------------------------------------伪类选择器----------------------------------------------------------------------------------------------------------

在CSS3选择器中,伪类选择器种类非常多。然后再CSS2.1时代,伪类选择器就已经存在,例如超链接的四个状态选择器: a:link a:visited a:hover a:active 

CSS3中增加了非常多的选择器,其中包括:

first-line 伪元素选择器

first-letter 伪元素选择器

root 选择器

not选择器

empty选择器

target选择器

这些伪类选择器是CSS3新增的选择器,他们都能得到在Andoird和IOS平台下Web浏览器的支持,现在着重讲解这部分选择器

1.before

before伪类元素选择器主要的作用是在某个元素前插入内容,一般用于清除浮动

其语法是:

元素标签:before{

content:"插入的内容"

}

eg:在p标签前插入"文字":   p.before{ content : ”文字"}




2.after

after和before原理一样,在某个标签后插入内容

3.first-child

指定元素列表中第一个元素的样式 

其语法是:

li:first-child{

color:red

}

4.last-child

和first-child原理一样,指定元素列表的最后一个元素的样式

5.nth-child和nth-last-child

可以指定某个元素的样式或从后数起某个元素的样式

eg: li:nth-child(2){}  //指定第二个li元素

  li:nth-last-child(2){} //指定倒数第二个li元素

  li:nth-child(even){}  //指定偶数个li元素

  li:nth-child(odd){}   //指定奇数个li元素


这只是部分常用的CSS选择器,并不止这几种,其余的选择器不再详细介绍,有兴趣的朋友和阅读CSS3相关资料






CSS3介绍以及新增选择器

一:基本介绍 1:css版本 css1: 定义了网页的基本属性:字体,颜色,补白,基本选择器等等。 css2:添加了高级功能:浮动,定位,高级选择器(子选择器,相邻选择器,通用选择器) css...
  • u013628152
  • u013628152
  • 2015年04月21日 18:00
  • 1081

CSS3高级选择器用法

CSS3高级选择器用法介绍
  • qq_35718410
  • qq_35718410
  • 2016年08月24日 17:16
  • 2245

css3新增的选择器

css3的属性选择器 E[foo] 选择匹配E的元素,且该元素定义了foo属性。注意,E选择器可以省略,表示选择定义了foo属性的任意类型元素 E[foo="bar"] 选择匹...
  • wuzhe128520
  • wuzhe128520
  • 2016年04月17日 19:54
  • 266

jQuery与CSS3的选择器

jQuery与CSS在选择器方面,有很多的相似之处,本文稍加总结。 注:本文以jQuery1.9.1版本和CSS3为例进行说明,CSS在选择器方面存在兼容问题,请自行分辨。1 jQuery的版本 ...
  • aiolos1111
  • aiolos1111
  • 2016年08月02日 16:52
  • 1836

css3-新增的选择器

1.css3新增的3个属性选择器[attribute^="value"] eg:a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 元素。[attribute$="...
  • github_34514750
  • github_34514750
  • 2016年04月11日 15:36
  • 641

【CSS3】选择器(表单元素选择器 & 其他)--慕课网【学习总结】

1.表单元素选择器 (1):enabled选择器   (2):disabled选择器  (3):checked选择器  (4):read-on;y选择器  (5):read-write选择器  2.其...
  • shenjun1992722
  • shenjun1992722
  • 2016年06月29日 22:44
  • 1205

CSS 选择器参考手册

CSS 选择器参考手册 CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。(C...
  • ssisse
  • ssisse
  • 2016年09月01日 08:33
  • 222

css3选择器--基本选择器,层次选择器,属性选择器

在大篇CSS代码中,并没有说明什么样式服务于什么元素,只是在元素中使用了class属性。而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性,并没把样式和元素绑定起来,一个CSS类选...
  • Ljs_cn
  • Ljs_cn
  • 2016年12月05日 23:35
  • 2049

CSS3选择器,筛选指定的index的元素,兼容IE7+

1.定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。 ul> li>1li> li>2li> ...
  • qq285679784
  • qq285679784
  • 2016年12月29日 18:39
  • 834

CSS3选择器(全)

CSS选择器复习通用选择器:* 选择到所有的元素 选择子元素:> 选择到元素的直接后代(第一级子元素) 相邻兄弟选择器:+ 选择到紧随目标元素后的第一个元素 普通兄弟选择器:~ 选择到紧随其...
  • liuyan19891230
  • liuyan19891230
  • 2016年02月19日 11:04
  • 6030
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3选择器详解
举报原因:
原因补充:

(最多只允许输入30个字)