CSS (CSS3) selector (1)

This article is mainly used to store CSS and CSS3 of the selector part of the Knowledge for future review and memory.

The content is divided into two parts, the first part is the CSS selector of some basic knowledge. The second part is the new CSS3 added selector.

Before we get started, let's start with a brief introduction to the selector, which is about locating the HTML elements of the page we want to style. Selectors can be divided into the following types.

1, simple selector , by element type, class or ID to match one or more elements.

2. attribute selector , which matches one or more elements by attribute/property value.

3, Pseudo-class , matching one or more elements in the determined state. (such as the mouse pointer hover element, the currently selected or unchecked check box, the element is the first child node of a parent node in the DOM tree, etc.)

4, pseudo-elements , matching one or more elements in the relevant determined position. (for example, the first word of each paragraph, or what was generated before an element)

5, the combination , here is not only the selector itself, there is an effective way to combine two or more selectors for very specific selection method.

6, Multi-use selectors , these are not separate selectors. The idea is to place multiple selectors separated by commas under a CSS rule to apply a set of declarations to all the elements selected by those selectors.

Then the following on the specific selector to do a certain explanation, there are insufficient places also hope to enlighten. Hey.

A. Basic selector:

1:*, wildcard, matches all elements.

*{  padding:0;  Margin:0;    } /* Personal advice, please do not appear in your CSS code wildcard characters, the wildcard (*) is a very low efficiency or even in a large web site, resulting in a slow page rendering possible. So, please do not use as much as possible. */

2:#id,ID selector, matches all elements with id attribute "id", the id attribute is unique.

#text {  font-size:16px;} /* an ID name must be unique in the file, and if the ID name is duplicated, unpredictable conditions may occur, so be sure to avoid duplicate ID names */

3:. Class, class selector, matches all elements of the class attribute that contain "class". Multiple elements in a document can have the same class name, and a single element can have more than one class name (written in the form of a space separating multiple class names)

. demo{    width:100px;    height:100px;    background:red;}

4:e(element), tag Selector, matches all elements that use the e tag.

span{    color:red;    Background:pink;    Font-style:20px;}

Two. Multi-element combination selector:

5:e,f, multi-element selector, matches all E and F elements, separated by commas (,) between E and F.

span,p,div{    color:red;    Background:pink;    Font-style:20px;}

6:E F, descendant element selector, matches all F elements that belong to the descendants of e elements, separated by spaces between E and F.

. Demo. text{    Color:gray;}

7:e > F, child element selector, matches all e element's child element F.

.demo>. text{    Color:gray;}

8:e + F, adjacent to the element selector, matches all sibling element F immediately following the E element.

. demo + . text{    Color:gray;}

Three. Property selector:

9:E[att], matches all E elements that have the ATT attribute, regardless of its value. (e can be omitted here, such as "[Checked]", hereinafter)

[Title] {    color:red;}

:E[att=val], matching all the ATT attributes equal to the "Val" element.

[title=name]{    border:5px solid Blue;} Img[title=bgimg]{    width:100px;    height:100px;        }

One:E[att~=val], match all ATT attributes have multiple space-delimited values, one of which equals "Val" of the E element.

[title~=hello]{    

E[att |= val], matching all ATT attributes with multiple hyphen delimited (hyphen-separated) values, one of the E elements with a value beginning with "Val". (mainly for Lang attributes, such as "en", "en-us", "EN-GB", etc.)

[lang|=en] {    color:red;}

Four. Pseudo-class selector:

e:first-child: Matches the first child element of a parent element.

. demo:first-child{    color:pink;}

E:link: Matches all the links that have not been clicked.

. demo:link{    font;}

e:visited: Match all the links that have been clicked.

. demo:visited{    font;}

C:e:active, matching the mouse has been pressed on it, has not released the E element.

. demo:active{    font;}

:e:hover, match the E element on which the mouse hovers.

. demo:hover{    Color:orange;    Font-weight:;      }

E:focus: matches the E element that obtains the current focus.

input:focus{    color:red;}

:E:lang (c), match the element with the lang attribute equal to C.

Html:lang (zh) {    color:lime;     > span{    color:pink;}

Five. Pseudo-element selector:

e:first-line: matches the first line of the E element.

. demo:first-line{    color:red;}

e:first-letter: matches the first letter of the E element.

. demo:first-letter{    font-weight:border;}

E:before: Inserts the generated content before the E element.

. num:before{  content:"(")",          }

E:after: Inserts the generated content after the E element.

. clearfix:after {    "";    Display:block;     0 ;    Clear:both;} /* After clear float, here is only a brief description of the selector for after and before, not specifically about attributes and their usage */

Finally, I would like to say that these things are simply listed and explained, it is convenient to use the time to quickly find, if you want to know more about the need for more practice and the amount of code, is the most basic selector knowledge, in fact, more than these. Just a lot of use is not particularly much, such as the above E:lang (c),e:visited,e:active , and so on, there are many not written in the article, if you want to learn more in-depth, You can go to the relevant links below to view.

Reference: CSS selector notes, 30 CSS selectors you must memorize, mdn-docs-selector introduction, HTML5 and CSS3 authoritative Guide (3rd edition under book-Lu Ling Niu) 19th, before and after pseudo-element usage.

CSS (CSS3) selector (1)