Usage of css class selectors _ CSS/HTML

Source: Internet
Author: User
In css, the class selector adds a dot before the class name. If a class is not followed by multiple dots. important. urgent. Next I will introduce the usage of CSS class selectors and multi-class selectors.
In CSS, the class selector is displayed with a dot:

The Code is as follows:


. Center {text-align: center}


In the preceding example, all HTML elements with the center class are centered.
In the following HTML code, both h1 and p elements have center classes. This means both of them will comply with the rules in the ". center" selector.

The Code is as follows:



This heading will be center-aligned



This paragraph will also be center-aligned.



Note: the first character of the class name cannot contain numbers! It does not work in Mozilla or Firefox.
Like id, class can also be used as a derivative selector:

The Code is as follows:


. Fancy td {
Color: # f60;
Background: #666;
}


In the above example, the table cells inside the larger element of the class named fancy will display orange text with a gray background. (The bigger element named fancy may be a table or a p)
Elements can also be selected based on their classes:

The Code is as follows:


Td. fancy {
Color: # f60;
Background: #666;
}


In the above example, the table unit named fancy will be orange with a gray background.

The Code is as follows:



Multi-class selector

1. In HTML, a class value may contain a word list, separated by spaces. For example, if you want to mark a specific element as important and warning at the same time, you can write (the order of these two words does not matter, but can also be written as warning important):

The Code is as follows:



This paragraph is a very important warning.



Let's assume that all the elements whose class is important are in bold, while all the elements whose class is warning are in italic. All the elements whose class contains both important and warning have a silver background. You can write:

The Code is as follows:


. Important {font-weight: bold ;}
. Warning {font-weight: italic ;}
. Important. warning {background: silver ;}


2. By linking two class selectors, you can only select the elements that contain these class names at the same time (the order of class names is not limited ).
If a multi-class selector contains a class name that is not in the class name table, the matching fails. See the following rules:

The Code is as follows:


. Important. urgent {background: silver ;}


As expected, this selector will only match the p element containing the word important and urgent in the class attribute. Therefore, if the class attribute of a p element contains only the words important and warning, it will not match. However, it can match the following elements:

The Code is as follows:



This paragraph is a very important and urgent warning.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.