What is a css selector? 5 common basic selectors in css3 (code examples)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What is a css selector? 5 common basic selectors in css3 (code examples)

青灯夜游

Sep 10, 2018 am 11:10 AM

css3Selector

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:

What is a css selector? 5 common basic selectors in css3 (code examples)

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:

What is a css selector? 5 common basic selectors in css3 (code examples)

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:

What is a css selector? 5 common basic selectors in css3 (code examples)

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:

What is a css selector? 5 common basic selectors in css3 (code examples)

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:

What is a css selector? 5 common basic selectors in css3 (code examples)

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

See all articles