Web Front-endCSS TutorialWhat is a css selector? 5 common basic selectors in css3 (code examples)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.
<!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!
Draggin' and Droppin' in ReactApr 17, 2025 am 11:52 AMThe React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd,
Fast SoftwareApr 17, 2025 am 11:49 AMThere have been some wonderfully interconnected things about fast software lately.
Nested Gradients with background-clipApr 17, 2025 am 11:47 AMI can't say I use background-clip all that often. I'd wager it's hardly ever used in day-to-day CSS work. But I was reminded of it in a post by Stefan Judis,
Using requestAnimationFrame with React HooksApr 17, 2025 am 11:46 AMAnimating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things
Need to scroll to the top of the page?Apr 17, 2025 am 11:45 AMPerhaps the easiest way to offer that to the user is a link that targets an ID on the element. So like...
The Best (GraphQL) API is One You WriteApr 17, 2025 am 11:36 AMListen, I am no GraphQL expert but I do enjoy working with it. The way it exposes data to me as a front-end developer is pretty cool. It's like a menu of
Weekly Platform News: Text Spacing Bookmarklet, Top-Level Await, New AMP Loading IndicatorApr 17, 2025 am 11:26 AMIn this week's roundup, a handy bookmarklet for inspecting typography, using await to tinker with how JavaScript modules import one another, plus Facebook's
Various Methods for Expanding a Box While Preserving the Border RadiusApr 17, 2025 am 11:19 AMI've recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there's a rectangle with rounded corners expanding in the back.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
Zend Studio 13.0.1
Powerful PHP integrated development environment
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
