CSS3 selectors (basic selectors, attribute selectors, pseudo-class selectors, selector strategies)_html/css

CSS3 selectors (basic selectors, attribute selectors, pseudo-class selectors, selector strategies)_html/css_WEB-ITnose

WBOY

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

Original

1318 people have browsed it

《CSS3 Basic Selector》

                      <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 Attribute Selector》

CSS3 attribute selectors mainly include the following types:

E[attr]: only uses the attribute name, but does not determine any attribute value;
E[attr="value"]: Specifies the attribute name, and specifies the attribute value of the attribute;
E[attr~="value"]: Specifies the attribute name, and has the attribute value, This attribute value is a word list separated by spaces. The word list contains a value word, and the "?" in front of the equal sign must be written;
E[attr^="value" ]: The attribute name is specified, and there is an attribute value, and the attribute value starts with value;
E[attr$="value"]: The attribute name is specified, and there is an attribute value, and the attribute value is Ending with value;
E[attr*="value"]: The attribute name is specified, and there is an attribute value, and the attribute value contains value;
E[attr|= "value"]: The attribute name is specified, and the attribute value is value or a value starting with "value-" (for example, 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 Pseudo-Class Selector》

1. This is the most commonly used dynamic pseudo-class

                      <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 element status pseudo-class

":enabled",":disabled",":checked "Pseudo-classes are called UI element state pseudo-classes. These are mainly used for Form element operations in HTML. The most common one is that our "type="text" has two states: enabled and disabled. The former is a writable state and the latter is Not available; in addition, "type="radio" and "type="checkbox"" have two states: "checked" and "unchecked". Let's look at two examples. For example, if you want to distinguish the "disabled" text box from other text boxes, you can apply it like this;

IE6-8 does not support ":checked", ":enabled" ",":disabled" these three selectors

3. :nth selector

:fist-childSelect the first child element of an element;

:last-childSelect the last child element of an element;

:nth- child()Select one or more specific child elements of an element;

:nth-last-child()Select one or more specific child elements of an element child elements, counting from the last child element of this element;

:nth-of-type() selects the specified element;

: nth-last-of-type()Select the specified element, counting from the last element;

:first-of-typeSelect the first element under a superior A child element of the same type;

:last-of-type Selects the last child element of the same type of a parent element;

:only-childThe selected element is the only element of its parent element;

:only-of-typeThe selected element is the only child element of the same type of its parent element;

:emptyThe selected element has no content.

IE6-8 and FF3 - browsers do not support ":nth-child, :nth-last-child(), :nth-of-type" selectors

4 , Negative selector (:not)

The negative selector is exactly the same as the :not selector in jq. Just use the elements in the form to illustrate the usage of this selector. For example, if you want to Add borders to all inputs, but you don’t want the submit to change. You can use :not to implement

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

Copy after login

5. Pseudo element

Everyone has seen pseudo elements in CSS before: :first-line, :first-letter, :before, :after; then in CSS3, he has made certain changes to pseudo elements. Based on the previous adjustment, a ":" was added, which now becomes "::first-letter,::first-line,::before,::after". In addition, he also added a "::" selection", two "::" and one ":" are mainly used to distinguish pseudo classes and pseudo elements in CSS3. So far, both methods are accepted, which means that no matter which writing method is used, The functions are the same, but the writing format is different.

Then let’s briefly understand their functions

::first-line selects the first line of the element. For example, to change the style of the first line of text in each paragraph, we can use this.

::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）