search

Home >Web Front-end >HTML Tutorial >CSS class selector (4)_html/css_WEB-ITnose

CSS class selector (4)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:46:301536browse

1. Class selector

Class selection is marked with "." (English dot), followed by the class name

For example: 

.red{color:red;}

Class styles can be applied to multiple elements in the document, which reflects the reusability of CSS code and helps users simplify page control.

2. Class selector and label selector

Both class selector and label selector have one-to-many characteristics, that is, one style can control the display effect of multiple element objects.

Notes:

  • Compared to tag selectors, class selectors have better adaptability and flexibility because the style of the class can be specified Applied element object range
  • Compared with class selectors, tag selectors have the advantages of simple operation and convenient definition, because there is no need to define the same class attribute for each element. Before using the class selector, you need to define the class attribute in the HTML document for the element to which the class style is to be applied. This will cause heavy display and is more troublesome.
  • The tag selector is suitable for defining global display attributes for elements, while the class selector is more suitable for defining class styles. After defining the style of the tag selector, it will definitely affect the same content on the page. Elements are affected, and the styles defined by the class selector will not be applied, giving greater flexibility. 

    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>伪类和伪对象选择器</title><link type="text/css" rel="stylesheet" href="css/demo4.css"/></head><body><div></div><div class="red"></div></body></html>

    css

    @charset "utf-8";/* CSS Document */div{    width:400px;    height:200px;    background-color:blue;    }.red{background-color:red;}

    Result:

    3. Class selector and ID selector

    In addition to different application scopes, class selectors and ID selectors also have different priorities. Under the same conditions, ID selectors have greater priority than class selectors. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>伪类和伪对象选择器</title><link type="text/css" rel="stylesheet" href="css/demo4.css"/></head><body><div id="text" class="red"></div></body></html>

    CSS

    @charset "utf-8";/* CSS Document */div{    width:400px;    height:200px;    }#text{    background-color:blue;    }.red{background-color:red;}

    div will appear blue

    General In terms of:

    ID selector: The application is used to reflect the structure and position of the document, such as #header, #footer, #left, etc.,

    Class selector: the class attribute should reflect the name. The style is descriptive, so that you can understand the style to be defined by looking at the class name, such as .red, defining a red class, .underline defining an underlined class, etc.

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：The difference between display:none; and visibility:hidden;_html/css_WEB-ITnoseNext article：The difference between display:none; and visibility:hidden;_html/css_WEB-ITnose

    Related articles

    See more