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

This article mainly introduces how many kinds of css selectors, the article is very detailed, has a certain reference value, interested friends must read it!

1. Element selector

The most common css selector is the element selector, which usually refers to some kind of HTML element in HTML documents, such as: PMagneh3, Magi, p3, and even html.

The usage is very simple, for example:

Html {background-color: black;} p {font-size: 30px; backgroud-color: gray;} h3 {background-color: red;}

The above css code adds a black background to the entire document; sets the font size of all p elements to 30 pixels and adds a gray background; and adds a red background to all h3 elements in the document.

From the above example, you can also see the basic rule structure of css: it consists of selectors and declaration blocks. Each declaration block contains one or more declarations. The format of each declaration is: attribute name: attribute value. As shown in the following figure:

Each declaration ends with a semicolon ";" If an incorrect property value is used in a declaration, or an incorrect attribute is used, the declaration is ignored. Also, please be careful not to forget the semicolon after each declaration.

Let's give an incorrect example:

P {background-color: red font-family: boldface; wordsize: 20px; float: left;}

The semicolon is omitted from the first declaration in the above example, and the above declaration block will be parsed as:

P {background-color: red font-family: boldface; wordsize: 20px; float: left;}

Red font-family: the whole boldface will be parsed to the property value of background-color, which is certainly not a legal property value, and this declaration will be ignored. In addition, the second declaration uses the incorrect attribute name wordsize, which will also be ignored, and only the third declaration will be handled correctly, which is equivalent to:

P {float: left;}

In addition, we can declare multiple html elements at the same time:

H2, h3, h4, h5, h6, h7, p {font-family: boldface;}

This sets all h2~h7 and p element fonts in the document to "boldface".

If we want to select all the elements in one pot, we can use the wildcard "*":

* {font-size: 20px;}

In this way, all elements will be selected, although the font-size attribute is not valid for some elements, it will be ignored.

2. Class selector (1) single class selector

The simple element selector seems too rough, for example, we want to highlight something important in bold in the document, such as the due date of the manuscript. The problem is that we are not sure in which element the deadline of the manuscript will appear, or it may appear in many different elements. At this point, we can consider using a class selector (class selector).

To use the class selector, we need to first add a class attribute to the file element, such as the due date might appear in the following element:

...

...

This allows us to use the class selector in the following ways:

P.deadline {color: red;} h3.deadline {color: red;}

Dot "." Add the class name to form a class selector. The above two selectors select all p and h3 elements that contain the "deadline" class. The remaining elements that contain the attribute are not selected.

If we omit the element name before .outline, then all elements that contain the class will be selected:

.deadline {color: red;}

In general, we use a combination of the above two to get a more interesting style:

.deadline {color: red;} span.deadline {font-style: italic;}

The above code first sets the font to red for all elements that contain deadline, and adds additional italics to the text in the span element. This way, if you want the text somewhere to have an extra italic effect, just put it in.

(2) Multi-class selector

In practice, the calss attribute of an element may contain not only one word, but a string of words separated by spaces.

For example, some elements contain a "warning" class, some elements contain a "important" class, and some elements also contain a "warning important" class. The order in which attribute names appear does not matter:

Class = "warning important" class = "important warning"

The above two are equivalent.

We want the element that contains the warning class to have an eye-catching red font, the element that contains the important attribute to have a bold font display, and the element that also contains the attributes in the above 2 to have an additional blue background (whether or not you can see the text clearly). We can use the following css code:

.warning {color: red;}. Important {font-weight: bold;}. Warning.important {background: blue;}

Of course, you can also write the third rule as:

.important.warning {background: blue;}

It has nothing to do with word order.

To be clear, .attributes matches all elements that contain warning attributes, no matter how many other attributes the element contains. The same goes for the same thing. While .important.attributes matches all elements that contain both attributes, no matter how many other classes the element contains, or the order in which they appear in the class list, as long as they contain these two attributes, they will be selected!

Similarly, more than a multi-class selector, preceded by an element name, matches the specified element that contains the specified class name, for example:

P.warning.important {}

P elements that contain both warning and important attributes will be matched, while other elements that also contain the above two categories will not be selected.

3. ID selector

The ID selector is somewhat similar to the class selector, but the difference is significant.

First of all, an element cannot have multiple classes like a class attribute, and an element can only have a unique ID attribute. The second ID value can only appear once in an HTML document, that is, an ID can only uniquely identify an element (not a class of elements, but an element).

Similar to class attributes, you first add an ID attribute to the element before using the ID selector, for example:

...

...

The method of using the ID selector is the pound sign "#" followed by the id value. Now we use the id selector to select the above two p elements as follows:

# top-para {} # foot-para {}

In this way, we can do the necessary operations on the above two paragraphs. It is precisely because of the uniqueness of the ID selector that its use becomes relatively simple.

4. Attribute selector

The attribute selector is introduced in css2 to enable us to select elements based on their attributes and attribute values. The following are explained separately:

(1) simple attribute selector

A simple attribute selector allows us to make choices based on whether an element contains an attribute. The method of use is:

Element name [attribute name] or * [attribute name]

For example, we want to select all img elements with the alt attribute:

Img [alt] {...}

Select all elements with the title attribute:

* [title] {...}

Similar to similar selectors, we can also choose based on multiple attribute information, such as an element that has both href and title:

A [href] [title] {...}

The combined use of class selectors makes our choices more flexible.

(2) specific attribute value selector

If we want to select elements more accurately based on attribute values, we can specify the value of the attribute in a simple attribute selector. In the simplest case, we want to find the anchor element with the value of the href attribute http://www.baidu.com:

A [href= "http://www.baidu.com"] {font-weight: bold;}

In particular, it is important to note that the specific value matching here is essentially a string match, so here the order of entries is relevant for the class attribute!

P [class= "warning important"] {...}

Will not match to

And it won't match, here's a blunt string match.

In addition, it is possible to match the values of multiple attributes at the same time:

P [class= "warning"] [title= "para"] {.}

Will match to a p element whose class is warning (warning only) and the title attribute is para.

(3) partial attribute value selector

Matching elements based on attribute values is undoubtedly more refined than simple attribute matching, but it seems a little too refined, and the exact matching of strings is too blunt. For example, if we want to select an element with a keyword in a string of attribute values, we might as well take the class attribute as an example again. We want to select all p elements that contain the warning class. Attribute value matching will not be possible. Fortunately, there is a way. We can use the following partial value matching selector:

P [class~= "warning"] {...}

The selector adds a tilde ~ before the equal sign "=", which means to include the matching of the following strings. The above code will select the p element that contains "warning" in all the class attributes. To illustrate the problem more clearly, it is equivalent to the following selector:

P.warning {...}

Of course, ~ = is not just used on the class attribute, it's just an example.

For example, our document contains a series of p elements for character introductions:

...

...

...

We can select all profiles p in the following ways:

P [title~= "intro"] {...}

Unfortunately, it will also be selected, which is something we need to pay special attention to.

The partial value selector also has its limitations. It matches words separated by spaces. If we write the p above as follows, the match will fail:

...

...

...

In this case, we can use the substring matching property selector. The rules are as follows:

P [title ^ = "intro"] {...} / title p element p [title $= "intro"] {.} / / title p element p [title * = "intro"] {...} / / title contains the p element of the "intro" substring

For example:

A [href*= "google."] {.}

Will include "google." in all links. The an element of.

P [title$= "y"] {...}

Will contain all of the following p elements:

...

...

...

You can see that the function of the partial value attribute selector is very powerful.

5. Derived selector

Derived selector, whose name is unknown at first glance, is also known as context selector, which uses the document DOM structure to make css selection. The DOM structure is not going to go into detail here, but to illustrate the problem more clearly, we give a DOM tree here as a reference:

(1) descendant selector (descendant selector)

As shown in the figure above, if you want to select all the sub-elements of the body element, the method is as follows:

Body li {...}

Here all the descendants of li, that is, all the li under the body in the figure, will be selected, regardless of the number of algebra separated between them.

Similarly, if you want to select span under the H2 element, you can use the following code:

H2 span {...}

If we want to select li descendants that have elements of the warning class, we can use the following method:

.warning li {...}

Of course, if you want to select only li descendants with p elements of the warning class, you can write:

P.warning li {...}

From the above example, it is not difficult to see that the rule of descendant selectors is to connect two or more selectors with spaces. The meaning of the space is:... The descendants of. The situation for multiple selectors is as follows:

Ul li li {...}

In this way, all the li elements contained under the li element under all ul will be selected, which sounds like a mouthful. Referring to our DOM tree, we will select the last row of li elements in the document tree.

(2) Child element selector (child selector)

The child element selector is different from the descendant selector. It can only select the direct descendants of an element, not across generations. The usage is as follows:

Ul > li {...}

Connect the two child elements with a greater than sign >. The above code selects the direct li child elements of all ul elements. Corresponding to the DOM tree, all li elements are selected because all li elements in the diagram are child elements of ul.

However, the following code will not select any elements:

H2 > span {...}

Because span is the "grandchild element" of H2, H2 does not have a direct sp child element, so the above code will not select any results. Other aspects are similar to descendant elements, except that child element selectors cannot be selected from generation to generation.

(3) neighboring sibling selector (Adjacent sibling selector)

The neighboring sibling selector, hence the name thought, will select the neighboring sibling elements of an element, notice that it selects adjacent sibling elements rather than all sibling elements, and actually selects the sibling elements that follow.

The neighbor sibling selector has a good application in practice, for example, you want to apply some unique style to the paragraph after an h3 heading, or you want to add an extra margin to some kind of table where the p paragraph lags behind, and so on.

Its usage is as follows:

Li + li {...}

The above code will select all the li elements as adjacent li elements, which sounds like a bit of a mouthful. Referring to the DOM tree, it will select the other four li elements except the first li element, because the two li elements in the first place do not have a sibling element to select it.

Another example is:

H2 + p {.}

All p sibling elements immediately following H2 are selected.

H2.warning + p {...}

The p sibling element immediately following the H2 element of all useful warning classes is selected.

(4) the combined use of several derived selectors

In fact, several of the derived selectors described above can be used in combination, as shown in the following example:

Html > body li.warning + li {...}

The above selector means that among the html child elements of the li element, all the neighboring siblings of the Boy element that have the warning class.

The above is all the contents of the article "how many css selectors are there?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow 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.