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

In this issue, the editor will bring you about how to understand the type selector, ID selector and class selector in CSS. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Type Selector

The type selector takes the html element type as the selection condition.

Web page elements: in CSS tutorials, for example,

These are no longer called tags, but are uniformly called web elements.

In the web page elements, can be distinguished by type, its type can be used as the CSS selector, such as "", etc., the corresponding selector is "a", "ul", "div".

Example:

CSS Code copies content to the clipboard

A {

Text-decoration: none

}

This example shows that all hyperlinks on the page are ununderlined.

ID selector

The CSS ID selector allows you to select the ID of a page element for stylesheet application.

The ID selector is identified by "#", followed by the name of the html element id.

The html code is as follows:

XML/HTML Code copies content to the clipboard

Home page

Blog

Message Board

In the html code, such as, there is a DIV page element of id= "nav". Use the ID selector to apply a style sheet to the element:

CSS Code copies content to the clipboard

# nav {

Font-size: 14px

Width: 500px

}

The CSS style represents a web page element in which id is nav, with a width of 500px and a text size of 14px.

Class (class) selector

The CSS class selector allows you to select classes of web page elements for stylesheet application.

Class selector with. Symbolic identification, followed by the class name.

An example of a class selector:

CSS Code copies content to the clipboard

.catlist {

Color: # d51300

}

The CSS style represents the page element of class= "catlist" in the web page, and its text color is # d51300.

Application of Class Selector in html

To apply a class style to your html code, simply use the class attribute within the tag, taking the value as the class name.

Example of html code:

XML/HTML Code copies content to the clipboard

Article classification

Emotional world

Technical article

Network abstracts

Other

In the html code, as in, the text colors included are rendered as # d51300 colors. Of course, you can also define additional styles for one or some of these elements separately.

Prompt

As shown in the example above, as long as the web page element class is named catlist, it will be affected by the stylesheet, regardless of the specific type of web page element.

The class selector acts on all web page elements with the same class name, which has a reuse effect, which is different from the ID selector.

The first character of the class name cannot use a number, and it does not work in Mozilla or Firefox browsers.

The above is the editor for you to share how to understand the type selector and ID selector and class selector in CSS, if you happen to have similar doubts, please refer to the above analysis. If you want to know more about it, you are 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.