Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "what are the selection symbols in CSS3?", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what are the selection symbols in CSS3" article.

First, take a quick look at the new selectors in css3:

Overview of CSS3 selector syntax:

Selector type

Expression.

Description

Attribute selector for substring matching

E [att^ = "val"]

Matches an E element that has an att attribute and whose value begins with val

Attribute selector for substring matching

E [att$= "val"]

Matches an E element that has an att attribute and whose value ends in val

Attribute selector for substring matching

E [att*= "val"]

Matches an E element with an att attribute and a value that contains val

Structural pseudo-class

E:root

Matches the root element of the document. In HTML, the root element is always HTML

Structural pseudo-class

E:nth-child (n)

Match the nth child element E in the parent element

Structural pseudo-class

E:nth-last-child (n)

Match the penultimate structural child element E in the parent element

Structural pseudo-class

E:nth-of-type (n)

Match the nth sibling element E of the same type

Structural pseudo-class

E:nth-last-of-type (n)

Match the penultimate sibling element E of the same type

Structural pseudo-class

E:last-child

Matches the last E element in the parent element

Structural pseudo-class

E:first-of-type

Match the first E element in the sibling element

Structural pseudo-class

E:only-child

Matches the E that belongs to the only child element in the parent element

Structural pseudo-class

E:only-of-type

Match the E that belongs to the only sibling element of the same type

Structural pseudo-class

E:empty

Matches element E that does not have any child elements (including text nodes)

Target pseudo class

E:target

Match the E element pointed to by the relevant URL

UI element status pseudo-class

E:enabled

Match all available E elements in the user interface (form form)

UI element status pseudo-class

E:disabled

Match all E elements in the unavailable state in the user interface (form form)

UI element status pseudo-class

E:checked

Matches all element E selected in the user interface (form form)

UI element status pseudo-class

E::selection

Matches the part of the E element that is selected or highlighted by the user

Negative pseudo-class

E:not (s)

Match all elements E that do not match the simple selector s

Universal sibling element selector

E ~ F

F element after matching E element

If the above description is not very clear, please do not worry. The following sections of this article will explain them in more detail and provide examples to demonstrate how they are used.

Attribute selector for substring matching

This set of selectors are added, which allows developers to match substrings in attributes.

Suppose the HTML document contains the following code structure:

Specific combinations of these structures in the document can be found by using property selectors that match substrings.

The following rule sets the background color for the div element that id begins with "nav":

Div [id ^ = "nav"] {background:#ff0;}

In the above example, the selector matches div#nav-primary and div#nav-secondary.

To find the div element that id ends in primary, you can use the following rule:

Div [id$= "primary"] {background:#ff0;}

The selector will match div#nav-primary and div#content-primary.

The following rules will match to the div with the content substring in the id:

Div [id*= "content"] {background:#ff0;}

The elements affected are: div#content-primary, div#content-secondary, and div#tertiary-content.

Attribute selectors for substring matching are already available in the latest versions of Mozilla, Firefox, Flock, Camino, Safari, OmniWeb, and Opera, but if they are not supported in IE, we'd better not use them yet (IE was still in development at the time of this writing, and now IE7 and IE8 all support these selectors, dudo note).

Target pseudo class

A url with an identifier (an id of # followed by an anchor name or element) points to a specific element in the document. These elements that link to other target elements can be decorated with: target pseudo-class. If there is no fragment identifier in the current URL, the: target pseudo-class will not match any elements.

Taking the code structure mentioned above as an example, if the content-primary logo is included in the URL, the current rule will add a border around it:

Div#content-primary:target {outline:1px solid # 300;}

URL takes a form similar to this:

Http://www.example.com/index.html#content-primary .

Mozilla and Safari-based browsers already support: target pseudo-classes.

UI element status pseudo-class

: ENABLED pseudo class and: DISABLED pseudo class

The: enabled pseudo-class and: disable pseudo-class allow developers to specify the display style of available and unavailable elements (form elements) in the user interface, provided that browsers are allowed to change the appearance of form controls. The following rules will set different background colors depending on whether a single-line input box is available:

Input [type= "text"]: enabled {background:#ffc;}

Input [type= "text"]: disabled {background:#ddd;}

: CHECKED pseudo-class

The checked pseudo-class allows developers to set styles for checkbox and radio that are selected. Of course, this is also under the condition that the browser allows you to change the appearance of the form control. The following CSS rule will make the selected radio and checkbox elements show a green border:

Input:checked {border:1px solid # 090;}

UI element state pseudo-classes are currently available in Opera and Mozilla-based browsers.

It is important to note that many browsers have strict restrictions on how developers can change the style of form controls. More about this convenience can be found in my two articles: "styling form controls" and "styling more form controls".

Structural pseudo-class

Structural pseudo-classes allow developers to specify elements based on the structure indicated in the document tree, which cannot be done using simple selectors or mixed selectors. Structural pseudo-classes are very powerful, but unfortunately modern browsers provide only limited support.

: ROOT pseudo-class

The root pseudo-class points to the root element of the document. In HTML, the root element of the document is always HTML, which means that the two rules are actually the same (generally speaking: root is more professional than html).

: root {background:#ff0;}

Html {background:#ff0;}

: NTH-CHILD () pseudo class

The element pointed to by the pseudo class nth-child () has a certain number of sibling elements in the document tree. The parameter in parentheses can be a number, a keyword or a formula.

The number b refers to the b-th child element of. The following rule will apply to the third of all p elements under the parent element:

P:nth-child (3) {color:#f00;}

The keywords odd (odd) and even (even) can be used to match child elements with odd or even ordinal numbers. The sequence number of the first element is 1, because the following rules will match 1, 3, 5. The child element p:

P:nth-child (odd) {color:#f00;}

The following rules match 2, 4, 6. Word element p:

P:nth-child (even) {color:#f00;}

The expression an+b can be used to create more complex loop patterns. In the expression, a represents the step size, n is a counter starting at 0, and b represents the offset. Where all values must be integers (here, n starts at 0, unlike the loop in js, etc., the end depends on the number of elements, for example, there are 20 elements in the document, 3n. The 3rd, 6th, 9th, and... 18 elements are selected, respectively. N is 6 at this time, dudo note). To better understand how to use expressions, let's look at a few code examples:

The following rule will match all p elements with multiples of the ordinal number 3. In the first line, b equals 0, so you can ignore not writing (see second line):

P:nth-child (3n+0) {color:#f00;}

P:nth-child (3n) {color:#f00;}

The offset can be used to specify the element from which the loop of the style is applied. If you have a 20-row table and we want to use a different background color from the odd row after row 10, we can use the following rule:

Tr:nth-child (2n+11) {background:#ff0;}

Because n starts with a, the sequence number of the first affected tr element is 11. Then comes line 13 (2 "1" 11 "13), then line 15 (2" 2 "11" 15), and so on.

For more details, please refer to the "nth-child () pseudo class" in the CSS 3 selector.

So which browsers support such a useful selector? Unfortunately, as far as I know, none of the browsers support this selector or even the selector of the nth class. If so, please correct me (are Firefox3 and IE8 currently supported? Dudo)

: nth-of-type ()

The nth-of-type () pseudo-class is very similar to the nth-child () pseudo-class, except that it matches elements of the type specified in the rule. The following rule will match each p element that belongs to the third child element of the parent element (the p that belongs to the third child element may have many in one of them, but they are under a different parent element, dudo note):

P:nth-of-type (3) {background:#ff0;}

This method is useful when you want to determine if you have pointed to the third p element. At first you may think this is the same as using nth-child, but nth-child (3) counts all child elements, so the result may be different, unless all of p's sibling elements are also p elements.

Nth-of-type pseudo-classes are currently not supported by browsers.

: nth-last-of-type pseudo-class

The element pointed to by the nth-last-of-type pseudo-class is followed by several elements of the same type. Like the nth-last-child pseudo-class, it returns from the last child element. The following rules will match to the penultimate sibling element p (note: siblings, nodes of the same level):

P:nth-last-of-type (2) {background:#ff0;}

Nth-last-of-type () is currently not supported by browsers.

: last-child pseudo-class

The last pseudo-class points to the last child element of the parent element. It has the same effect as nth-last-child (1). The following rule matches all p that belong to the last child element of the parent element:

P:last-child {background:#ff0;}

Last-childe pseudo-classes can be used in Mozilla-based browsers Opera does not support: last-childe pseudo-class, bug exists in Safri (the above rule matches all p elements). Surprisingly, it works well in OmniWeb (beta version 5.1.1), even though the browser is Safari-based. This may be due to the return of the latest version of Apple WebKit, because OmniWeb usually uses a slightly lower WebKit than the Safari version.

The above is about the content of this article on "what are the selector in CSS3". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

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.