CSS Basics +css Selector (element selector, relationship selector)

First I'll show you how to use the imported CSS style in an HTML page.

1. Inline style: <p style= "color:red" > inline style using css</p>

2. In-page style: set in the head tag

<span style= "FONT-SIZE:18PX;" >
3, External link method: First you have to prepare a good CSS style sheet outside
<span style= "FONT-SIZE:18PX;" >
Next I'm going to introduce CSS cascading styles like everyone
Element selector: class selector, ID selector, class selector, wildcard selector
Type selector: Select with the class label of the element
<span style= "FONT-SIZE:18PX;" ><style>        h1{        color:blue;        } </style></span>

ID selector:
<span style= "FONT-SIZE:18PX;" >


Class selector:
<span style= "FONT-SIZE:18PX;" >

Wildcard selector:
<span style= "FONT-SIZE:18PX;" >

The selection of the wildcard selector type is more abstract, use with caution!
Here we go. Introduction to relationship selectors: include selectors, sub-selectors, adjacent selectors, sibling selectors
Include selectors:
<span style= "FONT-SIZE:18PX;" >ul li{color:red;} </span>
All Li tags below the ul tag are styled

Sub-selectors:
<span style= "FONT-SIZE:18PX;" >
the sub-level element below the OL is selected

Adjacent selectors:
<span style= "FONT-SIZE:18PX;" >
Select the sibling-level Li element next to the LI tag

Sibling selector:
<span style= "FONT-SIZE:18PX;" >
Select all sibling level elements behind the LI tag

That's what I'm going to introduce.
Additional points to add:
First line indent: Text-indent:4em;
Center display: teext-align:center;
About the priority level:
Inline css> in-page css> external CSS
#id >.class
If you repeat the previous style, the style you set earlier is overwritten.
For example:

Specific to cover the abstract
For example, if you set the wildcard selection to match the element selector, the part that uses the element selector will not be overwritten with the wildcard selector.
CSS Basics +css Selector (element selector, relationship selector)