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

This article is about how to use selector in CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The following tips are for consideration:

1. How to choose whether to use the id selector or the class selector: when you are sure that the id selector is unique on the page, you can use the id selector.

two。 The universal selector sets the style on all elements, not just the inherited default values.

Eg:

Note: using a universal selector, the content in the tag is displayed in green instead of the blue of the tag, which does not inherit the style of the H2 tag.

Change the code:

At this point, em inherits the H2 style.

3. Notice the difference between descendant selector and subselector. (another summary)

4. Simple pseudo-class:

(1): active activated elements (such as active links).

(2): the first child of the first-child element.

(3): focus elements that have focus (such as form fields that receive input).

(4): the element that hover points to (for example, through the mouse).

(5): lang () the style of a specific language.

(6): links not tracked by link.

(7): links that visited has visited before.

Note:

(1) when using pseudo-classes with other classes and pseudo-classes, do not leave spaces in the middle, only. And: indicator.

Eg a.offsite:link {color:green;}

(2) link pseudo-class and visited pseudo-class are often used together, using link pseudo-class to set the style when the link is not accessed, and visited to set the style after link access.

(3): the first-child pseudo class is used to select an element, which is the first child of another element. If the first child matches the basic type of the selector. (: the part in front of the first-child pseudo class), then apply the rule to the element.

Eg:

The number in the table represents the first browser version number that supports the property.

Note: first-child must be declared in IE8 and earlier versions of IE

Previous browsers of ie7.0 did not support first-child selectors, so use class to style specific elements.

(4): lang () pseudo class

Indicates that rules are applied to elements that match a language

Eg:

Pseudo elements in 5.CSS

Before the content before inserting the element

: after content after inserting an element

The first letter of the first-letter block element

The first line of the first-line block element

(1): the first-line pseudo element is a virtual pseudo element that adds only the first line of the special style indication element applied to the first line.

Eg:

Note: when the size of the font in the browser window changes, the set css style is also applicable. So tags cannot copy first-line. Because when it is displayed in the user's browser, the web author does not know where the first line ends.

(2): first-letter pseudo-elements can add specific styles to the first letter of a block element.

Thank you for reading! This is the end of the article on "how to use the selector in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.