Strongly recommended: very good style sheet CSS tutorial (2)

Attribute of an element can also be used for selector. The following lists several modes:
Attribute Selector Patterns
Mode
Description
E [attr]
Attribute selector: specifies an Attribute selector that matches any eelement containing this Attribute. You do not need to consider the size of its value.
E [attr = "value"]
Attribute selector. The Attribute selector matches any element E with this Attribute. The condition is that the Attribute value must be equal to the set value.
E [attr ~ = "Value"]
Attribute selector. Some element attributes may contain several values (separated by spaces ). This pattern matches any element E that has an attribute attr and contains a specific value (the value may be in the form of a list).
E. value
Class selector, "Class" selector, only valid for HTML. Matches any element E with the CLASS attribute ~ = "Value"] equivalent.
E # value
The ID selectorID selector matches any element with the ID attribute. E. For HTML, it is equivalent
E [id = "value"]
The preceding selector setting mode can be flexibly used in the marked style rules, for example :*. highlight {background-color: # ffff00} * # mainTitle {font-size: 150%; font-weight: bold ;}
*. Highlight matches the "any" element of class = "highlight. The second rule matches any element of id = "mainTitle. In most cases, the asterisk "*" can be omitted, as shown below .. Highlight {background-color: # ffff00} # mainTitle {font-size: 150%; font-weight: bold ;}
Which of the following methods is more practical and useful? Through the two examples above, we will discuss a very interesting question: the confrontation between the class vs id class and the ID
● Class vs ID
The ID attribute of the HTML tag sets a unique identifier for the tag, and the class attribute allows users to set styles for HTML elements.
Strictly speaking, in the same document (webpage), no two elements have the same ID. Whenever you set an ID for a tag, you must ensure that the ID value cannot conflict with the ID of other elements, even if they have different tag names. Therefore, if you use ID to set the style, each ID can only be applied to one element in the page. (One-to-one relationship)
Why not use inline style instead of ID selector? In practice, you will find that defining all styles together is much easier than defining inline styles that are everywhere in the document. If it is an external style sheet, it can also be shared by other documents.
The class selector can match several elements (one-to-multiple relationships) on the page, even if the elements use different tag names. The same tag can use several "classes" to define styles (specify the names of class classes separated by spaces in a column ). Example: h3.warning {color: red }. highlight {background-color: yellow }...

1st 2 pages