In 022 we put the CSS Inheritance mechanism, played around a bit.
This time, in 021 , the "selector" of the famous picture is done
Very simple, he represents the part of the style {} before!
In the CSS league, there are three basic selectors:
label selector, class selector, id selector
Still taking the DOM structure (page structure) as an example, let’s take a closer look at how these three selectors work.
Similar to the block in 15, the code is as follows:
<!doctype html>
<html>
<meta charset='utf-8'>
<head>
<title>Selector</title>
<style type='text/css'></style>
</head>
<body>
<header>
<h1 class='red' id='title'>FishC</h1>
</header>
<section>
<h1 class='blue' id='m-title'>Fishc</h1>
<article>
<h1 class='red' id='s-title'>fishC</h1>
</article>
</section>
<aside>
<h1 class='blue' id='a-title'>fishc</h1>
</aside>
</body>
</html>
Renderings:
Tag selector, used to select a corresponding HTML element in the document.
For example, if you want to set the font size of the h1 element in the body to 33px, use this:
<!doctype html>
<html>
<meta charset='utf-8'>
<head>
<title>Selector</title>
<style type='text/css'>
h1{
font-size:33px;
}
</style>
</head>
<body>
<header>
<h1 class='red' id='title'>FishC</h1>
</header>
<section>
<h1 class='blue' id='m-title'>Fishc</h1>
<article>
<h1 class='red' id='s-title'>fishC</h1>
</article>
</section>
<aside>
<h1 class='blue' id='a-title'>fishc</h1>
</aside>
</body>
</html>
Renderings:
Sure enough, the text of the 4 h1 elements has become larger, and it is 33px.
id selector, selects the HTML element with id in the document.
The flag is # + ID name
For example, we set the font size gradient, 66, 55, 44, 33px
#title{
font-size: 66px;
}
#m-title{
font-size: 55px;
}
#s-title{
font-size: 44px;
}
#a-title{
font-size: 33px;
}
Renderings:
A class selector, used to select HTML elements with a certain class in the document.
The flag is just . + class name
For example, although the color is red now, it has no effect if it is not set through the class selector!
We set .red to be red; .blue to be blue
code show as below:
.red{
color: #F00;
}
.blue{
color: #06F;
}
Renderings:
Combining 3 selectors
Could it be that the three selectors can only be used alone?
how can that be possible? !
They can be used in combination, which is economical and environmentally friendly, and most importantly, it looks B high!
For example, h1, h2, hn, the same size and color, can be written like this:
h1，h2， ..., hn {
font-size:33px;
color:#66F;
}
If you want more precise settings, you can specify the parent element of the selector, and the parent element and the child element should be separated by a space!
',' doesn't work~ This is the descendant selector
If you want to only change the size of the h1 element under the section element, just write:
section h1{
font-size:33px;
}
It can also be more precise, specifying grandchildren (of course, there is no grandchildren element in H5~)
For example, to only change the size of the h1 element of article under section, just write:
section article h1{
font-size: 33px
}
Not only can this kind of parent-child limitation, but also any combination, label + class selector:
section .red{
color:F#66F;
font-size:33px;
}
There are many additional selectors in CSS
The usage is almost the same, if you use it specifically, let’s talk~
If you like this series of HTML posts
Welcome to Yuc Forum Subscribe Album☟
HTML5 - Paodingjieniu
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/HTML5%20%200%202%203%20%20Selector%20Mystery.html
支付宝扫一扫 
评论列表（196条）
测试