What are the basic selectors in CSS?

CSS (Stacked Style Sheet) is a basic language for rendering HTML, XML, etc. within the page, and the selector is the most important to learn CSS, the selector can select the corresponding elements, so as to start adding the style we want, the selector can render a single element or multiple elements, with the appropriate selector can do more with less, greatly save editing time, let's specifically say the basic selector in CSS.

Five basic selectors

1. Wildcard selector

Wildcard selectors can select all the elements on the page and apply the style they want, expressed in the form of . However, it is not recommended, IE6 does not support, adding to the burden on large websites.

Syntax: .

* { color : red ; <!-- Elements On The Page Turn Red -- >
* { font-size : 30px ; <!-- FontS On The Page Become 30px-->

2. Label selector (element selector).

A complete HTML page is made up of many different tags. Label selectors can style HTML elements directly, such as h1, td, p, a, or even html itself.

Syntax: Label Name , Property: Value ,

h1 { color : blue ; All h1 labels <!-- turn blue -->

a { text-decoration : none ; All links <!-- are not underlined -->

3. ID selector

The ID selector can specify a specific style for HTML elements marked with a specific ID. Selecting an element based on the element ID is unique, which means that an ID can only appear once in a page, and the ID selector is defined as """

Syntax: #ID attribute value.............

CSS code: #demo . . . color: green; <!-- Turns The Element Font With ID Demo Green -->

HTML code: < p id "demo" > I'll turn green

4. Class selector

The class selector uses the class name to select the element, provided that you add a class property to the element in HTML code, class-class-name, and then identify it with "." in the CSS code, followed by the class name

Syntax: .class Property Values

CSS code: .text . . . color: gray; <!-- makes the element font of class text yellow-->

HTML code: <p class"""text" > I'll turn gray

5. Group Selector

When several element style properties are the same, a declaration can be called together, separated by a comma between the elements. Note that commas are intended to tell browser rules that there are several different selectors, and that without this comma meaning is completely different, it becomes a descendant selector, which is important to note.

CSS code: .demo, p .color: pink; }

HTML code: < p> I'll turn pink< div class, "demo" > I'll turn pink</div >

While learning while doing examples is the most effective, treasured for many years of efficient CSS selector video tutorial, pain to share with you:

Little White Front End: Easy to understand CSS tutorial

Front-end boutique class: Getting started with HTML-CSS

There are micro-classes, online editing effect at a glance, even can get w3cschool certificate, why not

CSS micro-class

HTML5 and CSS live

HTML and CSS advanced to the real world