Shulou(Shulou.com)06/03 Report--

This article mainly explains "what is the knowledge of the basic usage and selector of CSS". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the basic usage and selector knowledge of CSS".

First, how to use CSS

There are three ways to use Css to add beauty to Html:

1)。 Defined in the header file

The Css attribute of the tag

2)。 Import CSS Fil

# create a Css file, write styles in it, and then import

3)。 Define directly in the tag

Css comment

Note: unlike Html, it is annotated by: / * Css statement * /

2. Selector of CSS

Why do we talk about selectors in the first place? because if we want to accurately modify the attributes of an element in Html, we must use a selector, which can navigate to an element and change the style of the element.

1) .id and class selector

The id selector must now be defined in the tag and then indicated by "#" in the style tag of the header tag:

Css applies # dv {background: red to change the background color of div to red} fd defines a div with id as dv

Class selector is similar to id selector, except that class selector uses "." To express:

Css App .dv {background: red} fd

2)。 Element selector

It means to declare the tag signature as a selector directly, and then change the style.

Css App div {background: red} fd

Or declare all tag signatures as selectors

Css App Html,head,body,div {background: red} fd

You can also use the element plus selector to locate the element more accurately

Css App div#er {background: red} fd

Fhsjak

Re

3)。 Descendant selector

Access other elements within an element, which can be any element within an element

Css App div span {background: red}

Erzi sunzi

4)。 Child element selector

Css App div > p {background: red}

Erzi sunzi

5)。 Brother selector

Located in the next element of the element, not within the element

Css App div+big {background: red}

Erzi sunzi

Borther

6)。 Pseudo class selector

Pseudo-class selectors can be divided into three categories.

1). Anchor pseudo class, which is used to detect the hovering state of the mouse.

Css App a:link {/ * unvisited links * / background: red} a:visited {/ * visited links * / background: green} a:hover {/ * move the mouse over the links * / background: blue} a:active {/ * selected links * / Background: yellow} Baidu Note: a:hover must be placed after a:link and a:visited That's what works. A:active must be placed after a:hover to be valid.

2). : first-child pseudo-class

Match the first matched tag

Css App p:first-child {match first p tag background: red} div:first-child {match first div tag background: blue} fdaf grerg

Fsdjkfhkj baidu

3). : lang pseudo-class

Css applies q:lang (hw) short references using pseudo classes {quotes: "^" ^ "}

Hw wayward post-90s boy

Short references must be used

7)。 Universal selector

Apply a style to all elements

* {background:red} Thank you for your reading. The above is the content of "what is the basic usage and selector knowledge of CSS". After the study of this article, I believe you have a deeper understanding of the basic usage and selector knowledge of CSS, and the specific usage needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.