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

Editor to share with you how to write the code for the selected function in HTML, I believe most people don't know much about it, so share this article for your reference. I hope you can learn a lot after reading this article, so let's learn about it!

What is a selector?

Each css style declaration (definition) consists of two parts in the following form:

Selector {

Style

}

The part before {} is the "selector", which indicates the object of the "style" in {}, that is, which elements of the page are affected by the "style". For example, the "body" in line 7 of the code editor on the right is the selector.

Tag selector

Tag selectors are actually tags in html code. As in the code editor on the right,

、

、 . For example, the following code:

P {font-size:12px;line-height:1.6em;}

The css style code above is used to set the 12px font size for the p tag and the line spacing to style the 1.6em.

Class selector

Class selectors are most commonly used in css-style coding, such as the code in the code editor on the right: it can be implemented as "timid" and the "courage" font is set to red.

Syntax:

. Sorter name {css style code;}

Note:

1. The beginning of English dot

2. The name of the selector can be named freely (but not in Chinese)

How to use it:

Step 1: tag the content to be embellished with the appropriate tag, as follows:

As timid as a hare

Step 2: use class= "Class Selector name" to set a class for the tag, as follows:

Step 3: set the css style of the selector as follows:

.stress {color:red;}

ID selector

In many ways, ID selectors are similar to class selectors, but there are some important differences:

1. Set the id= "ID name" for the label instead of the class= "class name".

2. The ID selector is preceded by a pound sign (#) instead of an English dot (.).

The difference between class and ID selector

After learning about class selector and ID selector, we will find that there are a lot of similarities between them. Is it possible to use both of them? Let's not rush to sum up their similarities and differences:

Similarities: can be applied to any element

Differences:

1. The ID selector can only be used once in the document. Unlike the class selector, the ID selector can only be used once and only once in an HTML document. The class selector can be used multiple times.

The following code is correct:

In the third grade, when I was a little girl, I never dared to answer the teacher's questions in class for fear that the teacher would criticize me if I gave the wrong answer. There has been no such answer to the teacher's question.

And the following code is wrong:

When I was in the third grade, I was a timid little girl. I never dared to answer the teacher's questions in class for fear that the teacher would criticize me if I gave the wrong answer. I never had the courage to answer the teacher's questions.

2. You can use the class selector word list method to set multiple styles for an element at the same time. We can set multiple styles for an element at the same time, but only with the method of class selector, ID selector is not allowed (you can't use ID word list).

The following code is correct (for the complete code, see the code editor on the right)

.stress {

Color:red

}

.bigsize {

Font-size:25px

}

By next semester, our class had an open class.

The purpose of the above code is to set the text color to red and the font size to 25px for the "third grade" text.

The following code is incorrect (for the complete code, see the code editor on the right)

# stressid {

Color:red

}

# bigsizeid {

Font-size:25px

}

In the second semester of the third grade, our class had an open class.

The above code cannot achieve the function of setting the text color to red and the font size to 25px for the "third grade" text.

Subselector

There is also a more useful selector sub-selector, the greater than symbol (>), which is used to select the first generation of child elements of the specified tag element. Such as the code in the code editor on the right:

.food > li {border:1px solid red;}

This line of code adds a solid red border to the child element li (fruits, vegetables) under class named food.

Include (descendant) selector

Contains a selector, that is, adding a space to select descendant elements under the specified tag element. Such as the code in the code editor on the right:

.first span {color:red;}

This line of code turns the "timid as mouse" font color in the first paragraph to red.

Note the difference between this child selector and the sub-selector. The sub-selector refers only to its direct descendants, or you can understand it as the first generation of descendants acting on the child elements. The descendant selector acts on all descendant elements. The descendant selector selects through spaces, while the child selector selects through ">".

Summary: > acts on the first generation of the element, and spaces on all the offspring of the element.

Universal selector

The universal selector is the most powerful selector, specified with a (*) sign, and its function is to match all tag elements in html. Use the following code to set the font color of any tag element in html to red:

* {color:red;}

Pseudo class selector

More interesting is the pseudo-class selector, why it is called pseudo-class selector, which allows you to style tags (some state of the tag) that do not exist in html, for example, we set the font color to the mouse-over state of a tag element in html:

A:hover {color:red;}

The above line of code is to set the font color to red for the state over which the a tag is rolled over. This will make the "timid as mouse" text in the first paragraph become a red special effect by adding the mouse over the font color.

About false selections:

With regard to pseudo-class selectors, so far, the "pseudo-class selectors" that are compatible with all browsers are used on the a tag: hover (in fact, there are many pseudo-class selectors, especially in css3, but because they are not compatible with all browsers, this tutorial only covers the most commonly used). In fact: hover can be placed on any tag, such as p:hover, but their compatibility is also very poor, so now the more commonly used combination of a:hover.

Grouping selector

When you want to set the same style for multiple tag elements in html, you can use the grouping selector (,). The following code sets the font color to red for the H2 and span tags in the code editor on the right:

H2,span {color:red;}

It is equivalent to the following two lines of code:

H2 {color:red;}

Span {color:red;}

The above is all the contents of the article "how to write the code for selecting functions in HTML". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.