css3选择器

原创 2015年07月09日 14:06:06

 


1、基本选择器
浏览器支持情况:

  通配符选择器(*),all

  元素选择器(E),all

  类选择器(.className)所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。

  id选择器(#ID),all

  后代选择器(E F),all

  子元素选择器(E>F),IE6不支持子元素选择器。

  相邻兄弟元素选择器(E + F),IE6不支持这个选择器

  通用兄弟选择器(E ? F),IE6不支持这个选择器

   群组选择器(selector1,selector2,...,selectorN),all

2、属性选择器(均不支持ie6)

  1. E[attr]:只使用属性名,但没有确定任何属性值;
  2. E[attr="value"]:指定属性名,并指定了该属性的属性值;
  3. E[attr~="value"]:属性值有value时就相匹配而且等号前面的“?”不能不写;
  4. E[attr^="value"]:属性值是以value开头的;
  5. E[attr$="value"]:属性值是以value结束的;
  6. E[attr*="value"]: 属值中包含了value;
  7. E[attr|="value"]:  属性值是value或者以“value-”开头的值(比如说zh-cn);

2、伪类选择器

动态伪类 

  a:link       链接没有被访问时的样式
  a:visited  链接被访问过后的样式

  :hover      鼠标悬浮到元素上面时的效果,在IE6下只有a元素支持,:
  :active      鼠标点中元素时的效果,IE7-6不支持

  :focus       用于元素成为焦点,这个经常用在表单元素上,IE6-7下不被支持

 注:先后顺序,要让他们遵守一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active

 

UI元素状态伪类(不支持IE6-8

 :enabled

 :disabled

 :checked

eg:input[type="text"]:disabled {}

 

CSS3的:nth选择器

:first-child选择某个元素的第一个子元素;

:last-child选择某个元素的最后一个子元素;

:nth-child()选择某个元素的一个或多个特定的子元素(值可以是整数,也可以是表达式);

          eg:li:nth-child(n)=li{}//n是从0开始计算

               li:nth-child(2n)=li:nth(even){}//

               li:nth-child(2n-1)=li:nth(odd){}

               li:nth-child(n+5)//从第五个开始及以

               li:nth-child(-n+5)//从第五个开始及以

:nth-last-child()同上类似,只是从指定元素的元素的最后一个子元素开始算;

:nth-of-type()选择指定的元素,与nth-child类似,只是指定了子元素的类型;//实际意义并不是很大

:nth-last-of-type()选择指定的元素,从元素的最后一个开始计算//

:first-of-type选择一个上级元素下的第一个同类子元素//

:last-of-type选择一个上级元素的最后一个同类子元素;//:nth-child之类选择器就能达到这此功能

以上均不支持IE6-8和FF3.0-

:only-child选择的元素是它的父元素的唯一一个了元素;//IE6-8浏览器不支持

:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;//IE6-8和FF3.0-浏览器不支持

:empty选择的元素里面没有任何内容。//IE6-8浏览器不支持

:not() 选择不匹配的元素//IE6-8浏览器不支持:not()选择器

 

伪元素

::first-line选择元素的第一行,比如说改变每个段落的第一行文本的样式

::first-letter选择文本块的第一个字母//主要运用于段落排版上多,比如说首字下沉

::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动

::selection用来改变浏览网页选中文字的默认效果//只能设置两个属性,一个就是background,另一个就是color属性,只有IE9+版本支持,在Firefox中需要加上其前缀“-moz”

版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS3选择器(全)

CSS选择器复习通用选择器:* 选择到所有的元素 选择子元素:> 选择到元素的直接后代(第一级子元素) 相邻兄弟选择器:+ 选择到紧随目标元素后的第一个元素 普通兄弟选择器:~ 选择到紧随其...
  • liuyan19891230
  • liuyan19891230
  • 2016年02月19日 11:04
  • 6298

CSS3介绍以及新增选择器

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

css3新增的选择器

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

css3-新增的选择器

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

CSS3高级选择器用法

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

CSS3选择器——2、层次选择器

CSS3选择器——2、层次选择器 *{ margin: 0px; padding: 0px; } body{ width: 300px; mar...
  • yezis
  • yezis
  • 2015年02月14日 17:49
  • 5083

css3新增选择器的一些练习。

css3非常强大,可以实现很多以前只能通过js实现的功能。 也简化了许多不必要的复杂代码。 简单练下一下css3的选择器: li{ list-style: none; } input:...
  • u011263845
  • u011263845
  • 2015年04月09日 16:33
  • 254

css3选择器--层次选择器

层次选择器:通过html的dom元素间的层次关系获取元素,主要层次关系有 后代、父子、相邻兄弟和通用兄弟。 1. 后代选择器: E  F, 作用的是选择元素的后代元素。包括子元素、孙辈元素等。(常用...
  • guoyangyang123456
  • guoyangyang123456
  • 2017年06月01日 16:29
  • 440

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

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

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

在大篇CSS代码中,并没有说明什么样式服务于什么元素,只是在元素中使用了class属性。而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性,并没把样式和元素绑定起来,一个CSS类选...
  • Ljs_cn
  • Ljs_cn
  • 2016年12月05日 23:35
  • 2358
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3选择器
举报原因:
原因补充:

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