CSS3选择器(基础选择器、属性选择器、伪类选择

当前位置 : 首页 > 网页制作 > CSS > CSS3选择器(基础选择器、属性选择器、伪类选择

CSS3选择器(基础选择器、属性选择器、伪类选择

来源: 作者: 时间:2016-01-23 10:51
《CSS3基本选择器》一、通配符选择器(*)*{marigin: 0;padding: 0;}二、元素选择器(E)li {background-color: grey;color: orange;}三、类选择器( className)四、id选择器( ID) first {backgr
《CSS3基本选择器》

一、通配符选择器(*)*{marigin: 0;padding: 0;}
二、元素选择器(E)li {background-color: grey;color: orange;}
三、类选择器(.className)
四、id选择器(#ID)#first {background: lime;color: #000;}#last {background: #000;color: lime;}
五、后代选择器(E F).demo li {color: blue;}
六、子元素选择器(E>F)ul > li {background: green;color: yellow;}
七、相邻兄弟元素选择器(E + F)li + li {background: green;color: yellow; border: 1px solid #ccc;}
八、通用兄弟选择器(E ? F).active ~ li {background: green;color: yellow; border: 1px solid #ccc;}
九、群组选择器(selector1,selector2,...,selectorN).first, .last {background: green;color: yellow; border: 1px solid #ccc;}
《CSS3属性选择器》

CSS3的属性选择器主要包括以下几种:

  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);
  8. .demo a[href][title] {background: yellow; color:green;}//存在href 和title 被选中.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}//id="first"被选中
    《CSS3伪类选择器》 1、这是最常用的动态伪类
    .demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
    2、UI元素状态伪类 ":enabled",":disabled",":checked"伪类称为UI元素状态伪类,这些主要是针对于HTML中的Form元素操作,最常见的比如我们"type="text"有enable和disabled两种状态,前者为可写状态后者为不可状态;另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例,比如说你想将"disabled"的文本框与别的文本框区别出来,你就可以这样应用 ; IE6-8不支持":checked",":enabled",":disabled"这三种选择器
    3、:nth选择器
  9. :fist-child选择某个元素的第一个子元素;
  10. :last-child选择某个元素的最后一个子元素;
  11. :nth-child()选择某个元素的一个或多个特定的子元素;
  12. :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
  13. :nth-of-type()选择指定的元素;
  14. :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
  15. :first-of-type选择一个上级元素下的第一个同类子元素;
  16. :last-of-type选择一个上级元素的最后一个同类子元素;
  17. :only-child选择的元素是它的父元素的唯一一个了元素;
  18. :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
  19. :empty选择的元素里面没有任何内容。 IE6-8和FF3-不支持":nth-child,:nth-last-child(),:nth-of-type"选择器 4、否定选择器(:not) 否定选择器和jq中的:not选择器一模一样,就拿form中的元素来说明这个选择器的用法,比如你想对form中所有input加边框,但又不想submit也起变化,此时就可以使用:not为实现
    input:not([type="submit"]) {border: 1px solid red;}
    5、伪元素 中的伪元素大家以前看过::first-line,:first-letter,:before,:after;那么在CSS3中,他对伪元素进行了一定的调整,在以前的基础上增加了一个“:”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“::”和一个“:”css3中主要用来区分伪类和伪元素,到目前来说,这两种方式都是被接受的,也就是说不管使用哪种写法所起的作用都是一样的,只是一个书写格式不同而以。 那么我们简单了解一下他们的作用 ::first-line选择元素的第一行,比如说改变每个段落的第一行文本的样式,我们就可以使用这个。 ::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动
                .clearfix:before,			.clearfix:after {			     content: ".";			     display: block;			     height: 0;			     visibility: hidden;			  }			 .clearfix:after {clear: both;}			 .clearfix {zoom: 1;}
    《CSS选择器优化》 固有效率:
  20. id选择器(#myid)
  21. 类选择器(.myclassname)
  22. 标签选择器(div,h1,p)
  23. 相邻选择器(h1+p)
  24. 子选择器(ul > li)
  25. 后代选择器(li a)
  26. 通配符选择器(*)
  27. 属性选择器(a[rel="external"])
  28. 伪类选择器(a:hover,li:nth-child)
    Tag:
网友评论

<