Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how many kinds of css compound selectors". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

There are 7 kinds of compound selector: 1, union selector, multiple selectors are connected by commas, which are used to define the same CSS style for multiple elements; 2, descendant selector, syntax "E > F", you can choose elements as child elements of an element; 4, pseudo-class selector, etc.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Css provides seven kinds of composite selectors: intersection selector, union selector, descendant selector, child element selector, neighbor sibling selector, pseudo-class selector, pseudo-element selector.

CSS compound selector

Composite selectors are composed of two or more base selectors combined in different ways in order to select more accurate and finer target element tags.

Intersection selector

The intersection selector consists of two selectors, the first of which is a tag selector and the second is a class selector (or id selector). There can be no spaces between the two selectors, such as h4.special.

Memory skills:

Intersection selector is and means. That is,... Again... The meaning of

For example:

P.one chose the paragraph tag with the class name .one.

Relatively little is used, and it is not recommended.

Union selector

Union selector (CSS selector grouping) is a comma connection between selectors. Any kind of selector (including tag selector, class selector, id selector, etc.) can be used as a part of union selector. If some selectors define exactly the same style, or partially the same, you can use the union selector to define the same CSS style for them.

Memory skills:

The meaning of union selector and, as long as comma separated, all selectors will implement the following style.

such as

.one, p, # test {color: # F00;}

Indicates that the three selectors, .one and p and # test, all execute with a color of red. It is usually used for collective declaration.

Descendant selector

The descendant selector, also known as the inclusion selector, is used to select the descendants of an element or group of elements by writing the outer label at the front, the inner label at the back, and separated by a space in the middle. When the tags are nested, the inner tags become the descendants of the outer tags.

This is the choice for future generations. In other words, it can choose any tag included.

Child element selector

The child element selector can only select an element that is a child of an element. The way to write it is to write the parent tag in front, the child tag in the back, and a > in the middle. Note that there is a space on the left and right sides of the symbol.

Vernacular: the term "son" here refers to a real son, excluding grandchildren and great-grandchildren.

For example:

.demo > h4 {color: red;}

Description: H4 must be the real son of demo; the demo element contains h4.

Neighboring sibling selector

You can select an element immediately after another element, and both have the same parent element

Select the paragraph that appears immediately after the H2 element, where H2 and p elements have a common parent element:

H2 + p {margin-top:50px;}

Pseudo class selector

Pseudo-class selectors are used to add special effects to some selectors. For example, you can choose the first and nth element.

Class .one class selector is a dot

Pseudo class: link uses 2 dots as colons

Link pseudo-class selector

: link / * unvisited links * /

: visited / * visited links * /

: hover / * move the mouse over the link * /

: active / * selected links * /

Note that when writing, try not to reverse their order in lvha order.

Structure (location) pseudo-class selector (CSS3)

First-child selects the specified selector of the first child element that belongs to its parent element

Last-child selects the specified selector of the last child element that belongs to its parent element

: nth-child (n) matches the Nth child element that belongs to its parent element, regardless of element type

The nth-last-child (n) selector matches each element of the Nth child element of its element, regardless of the type of element, counting from the last child element.

N can be a number, keyword, or formula

Target pseudo Class Selector (CSS3)

Target can be used to select the target element of the current activity

: target {color: red; font-size: 30px;}

Pseudo element selector (CSS3)

The first word or word of E::first-letter text

The first line of E::first-line text

E::selection can change the style of selected text

E::before and E::after

Create an element at the start and end positions within the E element, which is an inline element and must be used in conjunction with the content attribute.

Div::befor {content: "start";} div::after {content: "end";}

E:after and E:before are pseudo-elements in the old version. In the CSS3 specification, ":" is used to represent pseudo-classes, "::" is used to represent pseudo-elements, but in high-version browsers, E:after and E:before are automatically recognized as E::after and E::before. The purpose of doing this is to do compatibility processing.

The reason is called pseudo-elements, because they are not real page elements, html has no corresponding elements, but all its usage and performance behavior is the same as the real page elements, you can use the same css style as page elements, on the surface, it appears to be some elements of the page to show, but it is actually the behavior of css style, so it is called pseudo-elements.

Be careful

Pseudo elements: the content added by before and: after is the inline element by default; the content attribute of these two pseudo elements represents the contents of the pseudo element, and the content attribute must be set when setting: before and: after, otherwise the pseudo element will not work.

The difference between first-child and: first-of-type

: first-child matches the first child of its parent element, which can be said to be the first child element in structure.

: first-of-type matches the first element of this type of element in all the child elements of its parent element

The first p element in the structure

Welcome to My Homepage

This paragraph is not the first child of its parent.

The first p element of the parent div

The second one.

Note: first-child works on IE8 and earlier browsers, DOCTYPE must have been declared.

P:first-child / / matches the first child element of its parent element. It can be said that the structure of the first child element h2:first-child / / does not match. The first child element of H2 parent element is p, not h2div:first-child / / mismatch. The first child element of div parent element is p. The first element of all p elements that are not divp:first-of-type / matches its parent element h2:first-of-type / / matches the first element of all H2 elements of its parent element div:first-of-type / / matches the first element of all div elements of its parent element

The difference between pseudo-classes and pseudo-elements

Syntax function the number of pseudo-classes available for the same element: select different states of the elements on the DOM tree (: visited: link)

Elements on DOM that cannot be selected with a simple selector (: first-child) can use multiple pseudo-class pseudo-elements at the same time:: to create a virtual container that is not in the DOM tree and add styles can only use one pseudo-element, and can only appear at the end of the "css compound selector has several kinds of content" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.