CSS2 selector

CSS2 selector

---

HTML selector (tag selector)：
Use the HTML tag as a selector, the HTML selector

	p{...}
	h1{...}

---

class selector:
Class selectors can be used repeatedly and precisely in HTML documents by specifying the class attribute for the target tag.

<style>
        .my-class1{color: red;}
</style>


    <HTMLtag class="my-class1">The first element of class name 1</HTMLtag><br/>
    <HTMLtag class="my-class1">The first element of class name 2</HTMLtag><br/>
    <HTMLtag class="my-class2">The first element of class name 1</HTMLtag><br/>

---

id selector:
The ID selector can be used precisely in an HTML document by specifying a unique ID attribute to the target tag(The ID is unique)

<style>
    #id_name1{color: red;}
    #id_name2{color: blue;}
    </style>


    <HTMLtag id="id_name1">id="id_name1"</HTMLtag><br/>
    <HTMLtag id="id_name2">id="id_name2"</HTMLtag>

---

Associated selector (including selector)

<style>
    div p{color: red;}
    h1 a{color: blue;}
</style>


<div><p>I'm the P ELEMENT IN DIV</p></div>
<h1><a>I'm the A Element in H1</a></h1>

---

Combination selector (selector group)

A combination selector can be any selector, such as using a label name, a class name, and an ID name.

<style>
    a,div{color: red;}
</style>


<a>a 元素</a><br/>
<div>div 元素</div>

---

Pseudo class selector

<style>
	a:link{color: blue; text-decoration: none;} /*Unvisited link*/

	a:visited{color: purple; text-decoration: none;}    /*Accessed link*/

	a:hover{color: pink; text-decoration: underline;}   /*The mouse is on the link*/

	a:active{color: red; text-decoration: underline;}   /*Activate the link*/
</style>
    <a href="https://www.baidu.cn/" target="_blank">Links</a>

When the browser has an access record for the URL address in href, : visited takes effect.

So when you click on try to run the code, the link’s color is defined in: visited, not the style defined in :link.