CSS basic selector-1-weird coffee

Source: Internet
Author: User
CSS basic selector-1-weird coffee 1. Basic selector syntax

2. browser compatibility: the browser uses a green light for the basic selector.

3. wildcard selector: select all elements or all elements under an element.

(1) select all elements: * {margin: 0; padding: 0 ;}

(2) All elements under an element:. demo * {background: purple ;}

4. ID Selector

(1) Before using the ID selector (# id), you must set the id attribute and value for the corresponding element in the HTML document to find the corresponding element.


HTML Structure

(2) The ID selector is unique and can have only one id on a page.
(3) to use the id selector in CSS Styles, you must add the [#] sign before the id attribute name.

Eg: # demo {color: purple ;}

5. class selector

(1) define the class attribute for the required element in HTML and set the attribute value for it.
(2) A class selector can have multiple identical class names on a page, and the ID value of the class selector is unique throughout the page (simple usage of the class selector)
Eg:. demo {color: purple ;}

(3) multi-class selector of a class selector: combines two or more class selectors to define the effect of elements different from a class name.

Eg:. demo1.demo2 {color: purple;} (there is no space between the two selectors and they should be closely connected)

Note: if one of the class names in a multi-class selector does not exist, the selector cannot find the matching element.

Note: The IE6 selector does not support multiple class selectors. The class name at the end prevails.

(4) multi-class selector Extension

[3] indicates two types of selectors. Think: the element selector, ID selector, and class name selector are all selectors, which means they can be combined with each other.

Eg: p # demo {margin: 0 ;}

P. demo {margin: 0 ;}

. Demo # demo {margin: 0 ;}

You will also learn a variety of selectors in the future, which can be used in combination, but we do not recommend too many combinations. First, it is too complicated and difficult to control; second, it is completely unnecessary. It is better to directly use a new element without compatibility issues (not supported by IE6)

6. Group Selector

(1) The selector1 (selectorN) group elements with the same style. Each selector is separated by commas (,).

(2) selector1, selector2, selector3,..., selectorN

(3) The comma (,) tells the browser that the rule contains multiple different selectors. When the comma is omitted, it becomes a descendant selector (separated by spaces) or multiple class selectors (not separated)

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.