Web Front-end
CSS Tutorial
What 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!
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1664
14
1423
52
1319
25
1269
29
1248
24
How to implement lace borders in css3
Sep 16, 2022 pm 07:11 PM
In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".
Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3
Nov 20, 2023 am 11:20 AM
Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3. The specific code example is as follows: HTML code: <divid="container"><divclass="item"> ;First child element</div><divclass="item"&
What is the identifier of the id selector in css
Sep 22, 2022 pm 03:57 PM
In CSS, the identifier of the id selector is "#". You can specify a specific style for the HTML element marked with a specific id attribute value. The syntax structure is "#ID value {attribute: attribute value;}". The ID attribute is unique and non-repeatable in the entire page; the ID attribute value should not start with a number. IDs starting with numbers will not work in Mozilla/Firefox browsers.
What to do if the javascript selector fails
Feb 10, 2023 am 10:15 AM
The JavaScript selector fails because the code is not standardized. The solution is: 1. Remove the imported JS code and the ID selector method will be effective; 2. Just introduce the specified JS code before introducing "jquery.js".
Learn new CSS features: Directional clipping overflow:clip
Oct 11, 2022 pm 07:12 PM
This article will introduce a new feature, starting from Chrome 90, a new feature added to overflow - overflow: clip. Use it to easily control the overflow direction.
Do selectors in css include hypertext tag selectors?
Sep 01, 2022 pm 05:25 PM
Not included. CSS selectors include: 1. Tag selector, which locates specific HTML elements through the element name of the HTML page; 2. Class selector, which locates specific HTML elements through the value of the class attribute of the HTML element; 3. ID selector, which Locate specific HTML elements through the value of the id attribute of the HTML element; 4. The wildcard selector "*" can refer to all types of tag elements, including custom elements; 5. The attribute selector uses the existing attribute name of the HTML element or attribute value to locate a specific HTML element.
Learn about the selectors supported by lxml in one article
Jan 13, 2024 pm 02:08 PM
lxml is a powerful Python library for processing XML and HTML documents. As a parsing tool, it provides a variety of selectors to help users easily extract the required data from documents. This article will introduce the selectors supported by lxml in detail. lxml supports the following selectors: Tag selector (ElementTagSelector): Select elements by tag name. For example, select elements with a specific tag name by using <tagname>
Detailed explanation of using SVG to add logo to favicon
Sep 07, 2022 am 10:30 AM
How to add logo to favicon using SVG? The following article will introduce to you how to use SVG to generate favicon with logo. I hope it will be helpful to you!
