CSS Selector Knowledge Grooming

< >CSS selector structure logic diagram

Warm tip: You small partners, you can download the logical diagram to enlarge, see the comparison clear, you can also give me a message, I share the original Baidu brain map to the small partners.

< two > Next, the function and usage of each selector are explained in detail according to the structure logic diagram.

* * Basic selector ( common )

The basic selector has the following 5 main categories:

1. *: A wildcard selector that matches all HTML elements in the HTML;

2. E: element selector; Select a certain type of HTML element specified in HTML, such as H1 will select all the "H1" elements;

3. #id: ID selector; Select all elements in HTML that have the id attribute as a specific value;

4. .class: class selector; Select all elements of the HTML class attribute for a specific value;

5. s1,s2,s3: group selector; combining multiple selectors and defining the same CSS style, the definition of the group selector is mainly to reduce the redundancy of the Code;

* * Hierarchy Selector (relative selector)

The hierarchy selector selects elements through a hierarchical relationship between the DOM elements of the HTML; I also like to refer to the hierarchy selector as the relative selector, which is to find an HTML element as a benchmark, looking for its descendants, children, brothers and other elements;

1. E F: descendant selector; Select all the descendant elements of type F contained in the E container;

2. E>F: Sub-selector; Select all child elements of type F in all e containers;

   Note: "E's child element F" means that the parent element of F is E, and "E's descendant element" means that the parent element of F may be e, or the parent element of F's parent element is E, or the parent element of the parent element of F is e, ... ; therefore, "child" is a subset of "descendants";

3. E+F: Adjacent brother selector; read a lot of textbooks are said that this is the adjacent Brother selector, but, it can only choose close to the E, after the F element, and close to E, before the F element is not selected, so, stealing thought adjacent brother selector more appropriate, although not too academic;

4. E~F: sibling selector; the academic term is "universal selector", which can only select all elements that have the same parent element as E, after e, that conform to the F condition, and "sibling" means the same parent element as E, and "brother" means after E;

   Only the element color of ID P3, P4, P6 becomes red;

* * Pseudo class selector ( common )

When the pseudo-class selector syntax is written, it differs from other CSS selectors in the form of:

E:pseudo-class{property:value;}

where e is the HTML element, Pseudo-class is the pseudo-class selector name of the CSS, that is, the pseudo-class must be attached to a specific element; pseudo-classes can be divided into the following 6 classes:

Dynamic Pseudo class Selector

Dynamic pseudo-class embodies the interaction state between the user and the website, and the dynamic pseudo-class is divided into two categories:

1. Link pseudo-Class

Because only a (anchor) element has a pseudo-class, it is also called the anchor-point pseudo-class;

a:link: Defines the style when the link is not accessed;

a:visited: Defines the style after which the link is accessed;

How does the browser determine if anchor A has been accessed?

A: After testing on chrome, if a page of two a point to the same URL, then if you click on one of the A, the other a will also become visited state, indicating that the browser through the detection of the cache to uniformly set a color;

Are "A#id:link" and "a:link#id equivalent"?

A: equivalent, there is no special requirement for the placement order of selectors, but the element selector must be placed first;

Why sometimes the style of setting A:link is invalid

A: The state setting of a must follow the principle of love and hate, that is, the style definition of the 4 states of the anchor needs to define the A:link first, then define the a:visited, then define the A:hover, and then define the a:active in the order of the love,hate, otherwise the style may not take effect;

2. User behavior Pseudo-class

The pseudo-class of these states is not classified into the anchor pseudo-class, because these pseudo-classes are not only for a element;

E:hover :When the mouse moves over an element, the style displayed by the element applies to all elements;

E:active :When an element is activated, the displayed style is usually represented as a element or when the button element is clicked;

E:focus :The style that is displayed when an element has the focus, applies to all elements;

Target Pseudo class Selector

E:target :Selects all elements that match E, and the matching element is pointed to by the relevant URL;

To understand the target pseudo class selector, first understand the composition of the URL:

<protocol>://<user>:<password>@
Protocol indicates the use of the transport protocol, such as Htttp, FTP, SMTP, etc.;
Some URLs require a user name and password to log in, such as FTP, you can directly specify User:password in the URL, if no user name and password is specified, the browser will pop up the user name-Password input dialog box;
Host can be specified by domain name or directly by an IP address;
Port indicates the port number that provides the service, such as HTTP service usually open 80 port, FTP service usually open 21 port;
Path indicates the paths of resources on the server;
Param is used to specify options for special parameters;
Query: When a form is submitted to the server in a get way, the key-value pairs of the form elements are placed in query;
Fragment: Usually the ID number of an element in HTML, when an HTML file is very long, by specifying FRAG directly, you can have the browser navigate to the element of the corresponding ID and appear in the browser viewport;
When we make page access by specifying fragment, the element corresponding to the fragment is the element selected by the target pseudo-class selector; The following code is available:
<!--the URL of the file is http://localhost/test.html-->
To http://localhost/test.html access the page, the background of the DIV2 is black, and http://localhost/test.html#div2 when the page is accessed, the page is automatically positioned on the Div2, and the div2 background turns green;
Language pseudo-Class selector
E:lang(language) :When an element specifies the lang attribute, the style that is required to be displayed, eg. ：
The background color of DIV1 is green, the background color of DIV2 is white, the background color of div3 is yellow;
UI element state pseudo class Selector
UI element State pseudo-class selector mainly acts on form elements, in order to improve the human-computer interaction, Operation logic and the overall appearance of the page, so that the form page has more personality and taste;
E:checked :Select the state pseudo-class selector, match the selected Check button (checkbox), or radio button (radio);
E:enabled :Enables the state pseudo-class selector, matching all enabled elements;
E:disabled :Disables the state pseudo-class selector; matches all disabled elements;
* * Structure pseudo class selector ( common )
:first-child ：Select the first element;
Note: E:first-child the E :first-child effect is different, refers to E:first-child e in a container is the first element, the specified style, the container here includes body, Div, etc. E :first-child , refers to the first element in container E, regardless of its type, with the specified style;
:last-child :Choose the last element; the same, E:last-child and E :last-child also different;
:root :Because in an HTML document, the root element of all elements is HTML, so the following two sentences are equivalent
<style type= "Text/css" >
E F:nth-child(n) :Select All container e, start with the first element, the number is the F element of N, and n can be a constant or a number of an+b types (where a, B is a constant, n is counted from 0), or it can be even or odd,even for even, equivalent to 2n,odd for odd numbers, equivalent to 2n+ 1. Or give me a specific chestnut bar:
The above code will make the element in the container div of type H1, the ordinal of 3n+1 is selected, so the ID is h_1, h_7 two elements are selected, h_4 because it is not H1 element is not selected, if the selector is div :nth-child(3n+1) , then H_4 will be selected;
:nth-last-child :Similar to Nth-child, just the number of elements from the back, if the above code nth-child to Nth-last-child, then the 1th, 4, 7 elements, that is, the ID h_9, h_6, h_3 elements are selected;
E F:nth-of-type(n) :Nth-of-type is very similar to Nth-child, except that only elements of type F are included in the sequencing, not all the elements of e are counted, or chestnuts, if the nth-child is changed to Nth-of-type, the ID is h_1, h_5, H_ 8 elements will be selected, as they are the 0x3+1, 1x3+1, 2x3+1 H1 elements respectively;
E F:nth-last-of-type(n) :Similar to Nth-of-type, only the e element is counted from the back forward;
E F:first-of-type :equivalent to E F:nth-of-type(1) ;
E F:last-of-type :equivalent to E F:nth-last-of-type(1) ;
E F:only-child :When the container E has only one child element F, f is selected;
E F:only-of-type :When there is no element of the same type as f in container E, the element type F is unique in container E, and F is selected;
E:empty :The style used when the E element has no content (including no spaces);
Negation pseudo-Class selector
:not() :Filter out the elements with certain attributes, and give a chestnut:
The code will be selected in the Div, the ordinal is a non-odd H1 element, then only the element with ID h_2 is selected;
* * Pseudo Element
Pseudo-elements are primarily used to locate text in documents, not HTML elements, and because they do not have corresponding elements in HTML, they are called pseudo-elements;
It should be stated that pseudo-elements are not present in CSS3, such as
: First-line,: First-letter,: Before,: After
CSS3 to distinguish between pseudo-elements and pseudo-classes, the pseudo-elements are normalized, and a single colon becomes a double colon, which is changed to
:: First-line,:: First-letter,:: Before,:: After
In addition, the pseudo-element adds one:: selection; For compatibility, if a single colon is used before a pseudo-element, it can be parsed as a pseudo-element;
::first-letter :Used to locate the first letter in an element document;
<style type= "Text/css" >
The above code will make the first character of all the H1 elements in the HTML into a gray-bottom blue word;
::first-line :Used to locate the first line in an element document;
In the above code, "Line1" and "line2" are separated by newline <br> newline, in the browser, "Line1" is the gray-bottom blue word, and "line2" is the normal display;
::before :Add content to the front of an element;
::after :Add content after an element; eg.
will appear in the page:
Before.This is paragraph.After.
View page source code is as follows:
Before/after Experiment HTML Source code
Visible, pseudo-elements ::before and ::after are added to the front and back of the internal p, and the content is the same as the contents of the set;
When you set a pseudo-element, you must set the Content property, otherwise the pseudo-element will not be valid;
The content property can have the following:

 
       

  
        
 
         
字符串: The content of the pseudo-element is added to the main element, and if there is HTML code in the string, the code is displayed as text and does not translate to true HTML content display;
 
         
attr(attr_name): The content of a pseudo-element is associated with a property of the main element;
 
         
url(): Introduction of external resources; eg.
 
        
 
       
<style>
The introduction of the picture in P is displayed at the front;

 
       

  
        
 
         
counter(): Call counter, can not use list element to implement ordinal problem;
 
        
 
       
::selection: Used to match the highlighted text, which accepts only two properties--background and Color;eg.
Select some of the text in the page with the mouse, and the text will be displayed with the yellow-bottom red character;
Property Selector
E[attr]: Select all elements containing the attribute attr, E can be omitted; attr cannot be quoted;
E[attr=val]: Selects all e elements of the attribute attr as Val; Val is not case sensitive
E[attr|=val]: Select the e element with the attribute attr as Val or starting with val-;
E[attr^=val]: Select the e element with the attribute attr as Val or starting with Val;
E[attr$=val]: Select attribute attr to Val or e element ending with Val;
E[attr*=val]: All e elements of the Val value at any location of the attr property;
E[attr~=val]: The attribute attr is separated by a space into multiple values, which have all the e elements of Val;
CSS Selector Knowledge Grooming