Element id and class
In HTML pages, elements have two basic attributes: ID and class, which are used to select elements for CSS or JS operations.
- The ID attribute is unique in that an ID can only appear once on the same page.
- The class attribute is not unique. It can appear multiple times on the same page to indicate a class. The same class has the same style.
- An ID can be likened to an ID number, where each person can only have one ID number. The analogy of a class is a class. A class can have many people, and these people have some common characteristics, namely the style of a class.
What is a selector
Selectors, in plain English, are a way to select the elements you want, and you can only add CSS styles to those elements if they are selected.
In CSS, there are many ways to select the element you want. These are different selectors. The selectors differ in how they are selected, but the purpose is the same.
Common CSS selectors
1. Element selector
The element selector selects the corresponding element and defines the same CSS style for the same element, as shown in the following example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
div{
color: aquamarine;
font-size: large;
}
</style>
</head>
<body>
<div>Like_Frost</div>
<p>Like_Frost</p>
<div>Like_Frost</div>
</body>
</html>
Copy the code
In the browser it looks like this (only div is styled) :
2. Id selector
You can add an ID attribute to an element and style it with CSS, which is called an ID selector. Ids are unique within a page. For id selectors, the id name is preceded by #, as shown in the following example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
#frost{
color: aquamarine;
font-size: large;
}
</style>
</head>
<body>
<div id="frost">Like_Frost</div>
<div>Like_Frost</div>
</body>
</html>
Copy the code
To display the effect in the browser (the element with id frost has CSS styles) :
Class selector
A class selector is a class selector that can define the same class attributes for the same or different elements. Classes are not unique. For class selectors, the class name is preceded by a. (dot), with the following code:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
.frost{
color: aquamarine;
font-size: large;
}
</style>
</head>
<body>
<div class="frost">Like_Frost</div>
<div>Like_Frost</div>
<p class="frost">Like_Frost</p>
</body>
</html>
Copy the code
As you can see, whenever the class attribute of a div tag or p tag is frost, the font color and size attributes are added:
4. Descendant selector
A descendant selector selects all elements within an element, including child elements and other descendant elements. Parent elements and descendant elements must be separated by a space, as shown in the following example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
#frost div{
color: aquamarine;
font-size: large;
}
</style>
</head>
<body>
<div id="frost">
<div>Like_Frost</div>
<div>Like_Frost</div>
<p>Like_Frost</p>
</div>
</body>
</html>
Copy the code
Thus, the div element whose ID is inside Frost is colored, and the other elements are not affected:
In descendant selectors, the parent and child elements can be any two of an element selector, an ID selector, or a class selector.
5. Group selector
Group selectors perform the same operation on several selectors at the same time, separated by commas (,). Similarly, selectors can be any of the elements, ID, or class selectors, as shown in the following example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
div.p{
color: aquamarine;
font-size: large;
}
</style>
</head>
<body>
<div>Like_Frost</div>
<div>Like_Frost</div>
<p>Like_Frost</p>
</body>
</html>
Copy the code
It looks like this in the browser: