A detailed introduction to the CSS Selector

Objective

CSS selector, is the front-end basic skills, as long as you are a front-end, this must be mastered! Today I want to revisit the CSS selector, mainly to review some of the CSS selector in the use of some common symbols, such as "+, ~, ^, $, >, *" and other uses! The reason I want to review it is because I write the back end of the man, the front end is also very good, but he suddenly asked me today, CSS, plus and greater than the number is the meaning? I said, this looks like jquery also has it! Well, maybe these symbols are not commonly used, causing us to be unfamiliar with these symbols! So today, let's review it together again!

Everyone in the search box to search the "selector", will find that I have previously written CSS with Pseudo-class nth-child, the choice of odd and even rows. Today, about the CSS3 pseudo class selector, I don't describe it much! At the same time, you can also look at my previous written "jquery Common selector Summary", in fact, the jquery selector and CSS selector similar! Especially in the attribute selection and combination selection above!

Basic Selector

ID selector: #header {}
Class selector:. Header {}
Element selector: div {}
Sub selector: ul > li {}
Descendant selector: div p {}
Pseudo class selector: a:hover {}
Property selector: input[type= "text"] {}
ID priority is higher than class;
The back style covers the front;
specified above the inheritance;

Special symbols for CSS selectors

1, > (greater than Number)

The greater-than number represents the selection of child elements, which we often use, notably the difference between H1>strong and H1 strong.

These 2 are all selected child elements, but H1>strong selects only the child elements of an element. For example, as follows:

H1>strong, only the first H1 below the strong is selected, the second does not work. But H1 strong, all the H1 underneath the strong were chosen.

2, + No.

Choose neighboring brothers, this is the same as jquery.

For example:

<p>this is paragraph.</p>
<p>this is paragraph.</p>

The first P element after H1 + p {margin-top:50px}//h1 will have 50px of spacing. Represents the selection of paragraphs that appear immediately after the H1 element
Property Selector

CSS Property Selector is more useful, before attending the second section of the CSS Developers Conference, some teachers share, their company is basically using attribute selector to write CSS, so literal, they are not how to use class. I feel this should be divided into the situation, the teacher said the project is Angularjs, so the property selector is more practical!

Give a few examples

1, to include the title of all elements into red

Write as follows:

*[title] {color:red;}
2. Set the text of the HTML hyperlink with the href and title attributes to red

A[href][title] {color:red;}
3, specify will http://www.111cn.net/post/css_wl_wys this text color turn red

A[href= "Http://www.111cn.net/post/css_wl_wys"] {color:red;}

Of course, can also be a number of attributes together, here is not a lot of examples!

4, property and property values must match exactly

Let's look at a class div

<p class= "Important haorooms" >this paragraph is a very important
We use class choice, we all know, very simple answer, but with attribute selection, we use the following:

P[class= "Important"]
is not chosen, because there is a haorooms. Therefore, you must write this:

P[class= "Important haorooms"] {color:red;}
5, according to the partial attribute value selection

See the above multiple attributes must match exactly, very uncomfortable, then there is no way to partially match the attribute? The answer is yes. Or the above example, we have the following choice on it!

P[class~= "Haorooms"] {color:red;}
If you need to select a word from a list of words in a property value, you need to use a wave number (~).

6. String Matching attribute Selector

It said ~ (Wave selection), a friend will confuse him and *=, for example, the following example:

<p haorooms= "Importanthaorooms" >this paragraph is a very important
We can use [haorooms * = "haoroom"] to choose, this and ~ is the difference is included, ~ is a few attributes directly have spaces, one of the spaces. *= has no spaces, but contains a character. In addition, there are opening and ending choices, similar to jquery:

[haorooms^= "Haorooms"] selects all elements whose Haorooms property value begins with "Haorooms"
[haorooms$= "Haorooms"] selects all elements with Haorooms property value ending with "haorooms"

7. Specific attribute selection type

Take a look at the following example:

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

The above rule chooses the lang attribute to be equal to EN or all elements beginning with en-. Therefore, the first three elements in the following example tag will be selected without selecting the last two elements:

<p lang= "en" >Hello!</p>
<p lang= "en-US" >Greetings!</p>
<p lang= "En-au" >g ' day!</p>
<p lang= "FR" >Bonjour!</p>
<p lang= "Cy-en" >Jrooana!</p>

Basic selector for CSS

1. Element Selector

This is the most basic CSS selector, and the element in the HTML document itself is a selector:

p {line-height:1.5em; margin-bottom:1em;}

2. Relationship Selector

E F: Descendant selector, which locates all elements F in the descendants of element e:

UL li {margin-bottom:0.5em;}

E > F: A child selector that locates all element F in the immediate child element of element E, which ignores any further nesting:

ul > li {list-style:none;}//Only the direct child element of UL Li, if Li inside also nested another UL structure, the innermost Li will be ignored

E + F: An adjacent sibling selector that locates an element F with the same parent element e and in the tag adjacent to E:

Li + li {border-top:1px solid #ddd;//Locate all li except the first Li in UL with the same parent element

E ~ F: General brother Selector, which locates all elements F with the same parent element E and after E in the tag:

H1 ~ P {color: #f00;}//Position all P tags after h1 tag with the same parent element

3. Property Selector

E[ATTR]: The selector locates any element e that has a property attr:

Input[required] {border:1px solid #f00;}//Locate all input with required attributes "required" in the page

E[attr=val]: The selector locates any element e that has a property attr and a property value of Val:

Input[type=password] {border:1px solid #aaa;}//Location page password input box

E[ATTR|=AVL]: The selector locates any element e that has a property attr and whose property value is Val or starts with val-:

P[class|=a] {color: #333;}//Locate the class attribute in all p paragraphs in the page with the attribute value of a or a A, such as class= "a" and class= "A-b"

E[attr~=val]: The selector locates any element e that has a property attr and whose property value is the full word val:

Div[title~=english] {color: #f88;}//Locate all div containers with attribute title in the page with the full word English in the attribute value, such as title= "中文版" and title= "a Chinese"

E[attr^=val]: The selector locates any element e that has a property attr and the property value begins with Val:

Div[class^=a] {color: #666;}//Locate a div container with attribute class in the page with a property value beginning with a, such as class= "a" and class= "AB"

E[attr$=val]: The selector is exactly the opposite of E[attr^=val], locating any element e that has a property attr and whose property value ends with Val:

Div[class$=a] {color: #f00;}//Locate a div window with attribute class in the page with a property value ending with a, such as class= "NBA" and class= "CBA"

E[attr*=val]: The selector is similar to E[attr~=val], but further, locating an element that has a property attr and an attribute value anywhere containing Val E,val can be a complete word or a part of a word:

A[title*=link] {Text-decoration:underline}//Locate a link in all title with the link string

4, Pseudo-class

: Link: Links not visited;

: Visited: links that have been visited, are not recommended for use;

: hover: Mouse to move to the container, not limited to links, can be used for any element of the page;

: Active: The state when activated, not limited to links, can be used for any element with TabIndex attributes;

: Focus: The state when it is focused is not limited to links and can be used for any wireless with TabIndex properties:

Input:focus {border:1px solid #333;}//The style when the input box gets focus

: Enable: Enabled interface elements:

input:enabled {border:1px solid #899;}

:d isabled: interface elements that are disabled:

input:disabled {background: #eee;}

: target: This selector locates the target element of the anchor in the currently active page:

#info: Target {font-size:24px}////When the URL URLs visited are 123.html#info, id= "info" will load this font style

:d Efault: Applies to one or more UI elements that are the default elements in a set of similar elements;

: valid: Apply to valid elements:

Input:valid {border:1px Solid #6a6}//Load this border style when the input box is validated as valid, based on type or pattern property

: invalid: Applied to empty required elements and elements that could not match the requirements defined by the type or pattern attribute:

Input:invalid {border:1px solid #f00; Load this border style when the input box is empty and required, or if it is filled out but the validation is invalid

: In-range: Applies to elements with a range limit, where the value is within the limit, such as number and range input boxes with the Min and Max attributes;

: o Ut-of-range: In contrast to: In-range selection, where the value is outside the bounds;
: Required: Applies to form controls with required attributes required;

: O Ptional: Applies to all form controls that do not have required attribute required
: read-only: Applies to elements whose contents are not available for user modification;

: Read-write: An element that is applied to the contents of the user, such as an input box;

: root: Element, always refers to HTML element;

e f:nth-child (n): The selector locates the element F of the nth child element of element e:

Div.class P:nth-child (3) {color: #f00}//class= the 3rd element p in the div container of "class", this style will fail if the 3rd child element is not p

e f:nth-last-child (n): The selector locates element F of the reciprocal nth child element of element E;

E:nth-of-type (n): The selector locates the nth specified type of element e;

E:nth-lash-of-type (n): The selector locates the derivative of element E, the nth specified type of child element:

The difference between class P:nth-child (2) and. Class P:nth-of-type (2) is that if the 2nd child element in the. Class is not a P element, the style of. Class P:nth-child (2) will be invalid, and. Class P: The Nth-of-type (2) will be positioned at the 2nd P element in the. Class

Nth-child (n), Nth-last-child (n), Nth-of-type (n), Nth-last-of-type (n), where n can use numeric statics, such as. Nth-child (2n+1) will match 1th, 3, 5.. elements

E:first-child: The first child element of the parent element, E, is the same as: Nth-child (1);

E:last-child: The penultimate first child element of the parent element e;

E:first-of-type: Same as: Nth-of-type (1);

E:last-of-type: Same as: Nth-last-of-type (1);

E:only-child: The only child element in the parent element e;

E:only-of-type: The only element e in the parent element that has that type;

E:empty: Elements with No child elements, no child elements including text nodes;

E:lang (en): an element with a language expressed in two-letter abbreviations (en);

E:not (Exception): This selector will select elements that do not match the selector in parentheses:

P:not (. info) {font-size:12px}//Match P element with all class values not info

5, pseudo Element

A pseudo element can be used to locate text contained in a document, to differentiate it from a pseudo class, with a double colon:: Defined, but a single colon: can also be recognized.

:: first-line: Matching the first line of text;

:: first-letter: Matching the first letter of the text;

:: Before and:: After: Use the Contnet property to generate additional content and insert it in the tag:

A[href^=http]::after {content: "link"}//Insert text link after a link in page

:: Selection: Matching highlighted text:

:: Selection {background: #444; color: #fff;}//define selected text color and background color

Of course, if you want to facilitate the use of these powerful CSS selectors, using Chrome, Firefox and other browsers, at the very least, you have to discard the IE9 below the IE version of the browser bar.