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

This article introduces what are the CSS knowledge points in the front end of web, the content is very detailed, interested friends can refer to, hope to be helpful to you.

CSS selector, where tag selector, id selector, class selector, association selector, combination selector and attribute selector are used respectively.

① tag selector

Sample code:

Running result:

② id selector

The id selector starts with #, and the ID of the selector cannot be repeated, that is, one selector is called at a time, but not multiple times in a html.

Sample code:

The running results are as follows:

③ class selector (or class selector)

Start with a dot (.) and command .c1, .c2, .net, etc.

Sample code:

Effect of the output:

④ associated tags. If you want to set a common attribute for the same tags in a html page, you can use the associated tags.

Display effect:

The associated tag can refer to a defined style on the outer tag of the preset tag, and then realize the style setting of the target tag by specifying which tags use the style, where the outer tag is div, the target tag is li, the predefined style is .container, and li is the style to be used, that is, all li tags under .container use the "background-color: red;" style.

Usually, the most commonly used of the four selectors are class selector and association selector, so the tag selector and id selector are relatively less used, focusing on the latter two selectors.

⑤ combination selector

⑥ property Selector

When a tag of the same type has multiple types in a html file. For example, there are several input tags below, but only a certain style is used for input tags of type text. You can specify specific type tags through the property selector.

Sample code:

Display effect:

About the web front end of the CSS knowledge points shared here, I hope that the above content can be of some help to 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.