Introduction to CSS Selectors

We can select HTML5 elements in "certain ways" and then modify their styles; these "certain ways" are known as selectors.
The types of selectors include: element selector, ID selector, class selector, and descendant selector.

Various Types of CSS Selectors

Element Selector

An element selector selects identical elements and applies the same CSS style to them. The syntax for an element selector is simply the name of the HTML5 element itself.
::: normal-demo Element Selector Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        div{color:red;}
    </style>
</head>
<body>
    <div>www.supremepole.com</div>
    <p>www.supremepole.com</p>
    <span>www.supremepole.com</span>
    <div>www.supremepole.com</div>
</body>
</html>

:::

ID Selector

To set an id attribute on a specific element and then define CSS styles for elements with that id, you are using the ID selector.
The syntax for a class (note: here referring to ID selection logic in context, though technically IDs use #) is actually composed of "#" (hash symbol) + id name; for example, #box represents an element selector targeting an element named "box". Correction based on standard CSS terminology: The prompt text says "#(井号键)+class名称" which describes ID selectors using the hash. Let's translate accurately to reflect that IDs use # and Class uses .
The syntax for an ID selector is composed of "#" (hash symbol) + id name; for example, #box represents a selector targeting an element named "box".
::: normal-demo ID Selector Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #red {color:red;}
    </style>
</head>
<body>
    <div>www.supremepole.com</div>
    <div id="red">www.supremepole.com</div>
    <div>www.supremepole.com</div>
</body>
</html>

:::

Class Selector

A class selector defines a class attribute on an element and then performs CSS styling operations on elements that share the same class.
The syntax for a Class selector is composed of "." (period) + class name; for example, .box represents a selector targeting an element named "box".
::: normal-demo Class Selector Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .sp{color:red;}
    </style>
</head>
<body>
    <div>www.supremepole.com</div>
    <p class="sp">www.supremepole.com</p>
    <span class="sp">www.supremepole.com</span>
    <div>www.supremepole.com</div>
</body>
</html>

:::

Descendant Selector

A descendant selector selects all elements of a specific type located inside another element, including both direct child elements and other descendants (such as "grandchild" elements).
::: normal-demo Descendant Selector Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #red div {color:red;}
        #blue span{color:blue;}
    </style>
</head>
<body>
    <div id="red">
        <div>www.supremepole.com</div>
        <div>www.supremepole.com</div>
    </div>
    <div id="blue">
        <p>www.supremepole.com</p>
        <p>www.supremepole.com</p>
        <span>www.supremepole.com</span>
    </div>
</body>
</html>

:::