CSS3选择器（基础选择器、属性选择器、伪类选择器、选择器策略）_html/css

CSS3选择器（基础选择器、属性选择器、伪类选择器、选择器策略）_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:59:38

Original

1253 people have browsed it

《CSS3基本选择器》

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

Copy after login

《CSS3属性选择器》

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

E[attr]：只使用属性名，但没有确定任何属性值；
E[attr="value"]：指定属性名，并指定了该属性的属性值；
E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写；
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

                              <p class="sycode">                                  <p class="sycode">          .demo a[href][title] {background: yellow; color:green;}//存在href 和title 被选中         </p>                                  <p class="sycode">          .demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}//id="first"被选中         </p>                              </p>

Copy after login

《CSS3伪类选择器》

1、这是最常用的动态伪类

                      <p class="sycode">                          <p class="sycode">        .demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/       </p>                          <p class="sycode">        .demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/       </p>                          <p class="sycode">        .demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/       </p>                          <p class="sycode">        .demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/       </p>                      </p>

Copy after login

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选择器

:fist-child选择某个元素的第一个子元素；

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

:nth-child()选择某个元素的一个或多个特定的子元素；

:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

:nth-of-type()选择指定的元素；

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

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

:last-of-type选择一个上级元素的最后一个同类子元素；

:only-child选择的元素是它的父元素的唯一一个了元素；

:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；

:empty选择的元素里面没有任何内容。

IE6-8和FF3-浏览器不支持":nth-child，:nth-last-child()，：nth-of-type"选择器

4、否定选择器（:not）

否定选择器和jq中的:not选择器一模一样，就拿form中的元素来说明这个选择器的用法，比如你想对form中所有input加边框，但又不想submit也起变化，此时就可以使用:not为实现

                  <p class="sycode">                      <p class="sycode">       input:not([type="submit"]) {border: 1px solid red;}      </p>                  </p>

Copy after login

5、伪元素

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。

那么我们简单了解一下他们的作用

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式，我们就可以使用这个。

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

                  <p class="sycode">                      <p class="sycode">       .clearfix:before,      </p>                      <p class="sycode">       .clearfix:after {      </p>                      <p class="sycode">       content: ".";      </p>                      <p class="sycode">       display: block;      </p>                      <p class="sycode">       height: 0;      </p>                      <p class="sycode">       visibility: hidden;      </p>                      <p class="sycode">       }      </p>                      <p class="sycode">       .clearfix:after {clear: both;}      </p>                      <p class="sycode">       .clearfix {zoom: 1;}      </p>                  </p>

Copy after login

《CSS选择器优化》

固有效率：

id选择器（#myid）

类选择器（.myclassname）

标签选择器（div,h1,p）

相邻选择器（h1+p）

子选择器（ul > li）

后代选择器（li a）

通配符选择器（*）

属性选择器（a[rel="external"]）

伪类选择器（a:hover,li:nth-child）