Home >Web Front-end >CSS Tutorial >What is a css selector? 5 common basic selectors in css3 (code examples)
In this chapter we will explain to you what is a css selector? 5 common basic selectors in css3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1: What is a css selector?
CSS is a language used to render html, xml, etc. on the screen. CSS mainly applies styles to corresponding elements to render relatively applied elements. So in this way we It is very important to select the corresponding element. How to select the corresponding element requires what we call a selector. In CSS, a selector is a pattern used to select elements that need to be styled. Selectors are mainly used to determine DOM element nodes in the tree structure of html.
2: 5 common basic selectors in css3
There are many types of selectors in css3. The following are 5 common basic selectors: Wildcard selectors, class selectors, element selectors, ID selectors and group selectors.
1. Wildcard selector (supported by all browsers)
The universal selector is represented by * and is used to select all elements. It can also select all elements under a certain element. ;
*{marigin: 0;
padding: 0;
font-size: 14px;
}You must have seen the above code in the reset style file a lot. What it means is that the margin and padding of all elements are set to 0, and the font size is set to 14px. The other one is Select all elements under a certain element:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style>
.demo * {
width: 50px;
height: 50px;
border:1px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="demo">
<div>1</div>
<p>2</p>
<span>3</span>
</div>
</body>
</html>Rendering:
We can see the three sub-elements div, p, in the demo element. The spans are not set with CSS styles respectively, but as long as we set a unified style for all elements under the demo element, the three sub-elements div, p, and span in the demo element will have styles.
2. Class selector (All browsers support class selectors, but multi-class selectors (.className1.className2) are not supported by ie6.)
The class selector selects based on the class name, preceded by ".", which specifies the style in a way that is independent of the document element. Before using the class selector, you need to define the class name on the html element. In other words, you need to ensure that the class The name exists in the html tag.
 "153654702728376What is a css selector? 5 common basic selectors in css3 (code examples)")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #2DC4CB;
}
</style>
</head>
<body>
<div class="demo">类选择器</div>
</body>
</html>Rendering:
3. Element selector (supported by all browsers)
Element selection (tag name selector) is the most common and basic selector among CSS3 selectors. The element selector is actually the element of the document, such as html, body, p, div, etc. In the following example, the span element is selected and the font color is set to red.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
}
span{
color: red;
}
</style>
</head>
<body>
<div class="demo">
<p>这里使用<span>元素选择器</span>改变了样式</p>
</div>
</body>
</html>Rendering:
4.ID selector (supported by all browsers)
The ID selector is very similar to the class selector mentioned above. Before using the ID selector, you also need to add the ID name to the html document, so that the corresponding element can be found in the style selector. Different The ID selector is the only value in a page. When we use the class, we add a "." sign (.className) before the corresponding class name. The id selector uses "#" before the name, such as (# demo).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
</style>
</head>
<body>
<div id="demo">ID选择器</div>
</body>
</html>Rendering:
There are several places where the ID selector needs special attention:
First: one id in a document The selector is only allowed to be used once, because the id is unique in the page;
Second, id selectors cannot be combined and used like class selectors, and an element can only be named with one id name;
Third, you can use the same id name in different documents. For example, you can define "#important" for h1 in "test.html", or you can define p for "test1.html". The id is "#important", but the premise is that only one id called "#important" is allowed in test.html or test1.html.
5. Group selector (supported by all browsers)
When several elements have the same style attributes, they can call a statement together, and use Comma separated. Group selectors group elements with the same style together. Each selector is separated by a comma ",". This comma tells the browser that the rule contains multiple different selectors. If there is no comma, , then the meaning expressed is completely different. Omitting the comma becomes the descendant selector we mentioned earlier. You must be careful about this when using it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
p,li{
color: blue;
}
.demo1,.demo2{
color: #fff;
}
</style>
</head>
<body>
<div class="demo">
<p>这里是一个段落!</p>
<ul><li>列表</li></ul>
<a href="#" class="demo1">链接一</a><br>
<span class="demo2">文字文字！</span>
</div>
</body>
</html>Rendering:
The above is the detailed content of What is a css selector? 5 common basic selectors in css3 (code examples). For more information, please follow other related articles on the PHP Chinese website!