Most stylesheets contain more than one rule, and most rules contain more than one declaration. Multiple declarations and the use of whitespace make stylesheets easier to edit:
① Grouping of selectors. You can group selectors so that grouped selectors share the same declaration. Use commas to separate selectors that need to be grouped. In the example below, we have grouped all heading elements. All title elements are green.
According to the above rule, the body element of the site will use the Verdana font (assuming that font exists on the visitor's system).
With CSS inheritance, child elements such as p, td, ul, ol, ul, li, dl, dt, and dd will inherit the properties owned by the top-level element (in this case, body). No additional rules are needed, all child elements of the body should display the Verdana font, as well as the child elements of the child element. And in most modern browsers, this is indeed the case.
3.CSS derived selector
You can make markup more concise by defining styles based on the context of an element's location.
In the example below, only the strong element in the li element is styled in italics. There is no need to define a special class or id for the strong element, and the code is more concise.
The id selector can specify a specific style for HTML elements marked with a specific id. The id selector is defined with "#".
The following two id selectors, the first one can define the color of the element as red, and the second one can define the color of the element as green:
In modern layouts, id selectors are often used to create derived selectors.
The above style will only be applied to paragraphs that appear within elements whose id is sidebar. This element is most likely a div or table cell, although it could also be a table or other block-level element.
In the HTML code below, both h1 and p elements have the center class. This means that both will respect the rules in the ".center" selector.
<span style="color: #0000ff;"><</span><span style="color: #800000;">h1 </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This heading will be center-aligned
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This paragraph will also be center-aligned.
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
Copy after login
① Like id, class can also be used as a derived selector:
Table cells inside larger elements with class name fancy will display orange text on a gray background. (The larger element named fancy might be a table or a div)
Set styles for HTML elements with specified attributes. You can set styles for HTML elements with specified attributes, not just class and id attributes.
① Attribute selector
Set styles for all elements with a title attribute:
