CSS Selectors (1)--element Selector, class name, and ID selector

Source: Internet
Author: User

One of the main advantages of CSS is that it makes it easy to apply a set of styles to all the same types of elements. Of course it is done by selectors.

Basic rule structure:

syntax = selector + declaration block

1. Element selector--use HTML element name directly, point to document Element

Using the element selector is the best choice if you want to add indentation to all paragraphs.

p{   Text-indent:2em;  }

2. class selector and ID selector--Specifying styles independently of document elements

A) class selector:

To make some paragraph text bold, as well as some items of the list, you can use the class selector to apply the style without having to consider the specific element as you would with the element selector, as long as you add the same class name to the element that you want to assign the style to (specify the same value for the class attribute that needs to specify the style element).

Selector wording: "." Plus the class name

. target{    Font-weight:bold;}
b) Multi-class selector:

An element can have not only one class name, the class value can also contain a word list, for example: class= "First Second";

<style>    /*by linking the two class selectors together, you can select only the elements that contain the class names, and the order of the class names can be reversed*/    /*Match class has both one and the second paragraph, the third and fourth paragraphs are set to a coarse font*/P.one.two{Font-weight:Bold;    }</style><Body>        <Pclass= ' One '>One</P>        <Pclass= ' Both '>Both</P>        <Pclass= ' OneBoth '>One + one</P>        <Pclass= ' OneThird '>One + one + third</P></Body>
c) ID selector:

You may know that there will be an element with an ID value of important in a given document, but you do not know that the most important thing is a paragraph, a phrase, a list item or a section title, you only know that each document will have one of the most important content, it may appear in any element And only occurs once, the id attribute can be used in this case.

Unlike the class attribute, a value of the id attribute can be assigned to only one element, and if there is an element with an ID value of one, the ID value of other elements in the document cannot be one. (In fact, browsers do not generally check the uniqueness of the id attribute in HTML, you set multiple elements with the same id attribute and do not error)

In addition, unlike the class attribute, the ID value cannot be a word list. such as: id= ' One, ' is wrong.

Selector notation: "#" plus the ID value.

<style>#one{Font-weight:Bold;    }</style><Body>        <PID= ' One '>Use the ID selector to specify the style</P></Body>

  

CSS Selectors (1)--element Selector, class name, and ID selector

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.