Home > Article > Web Front-end > What is the basic selector of css

What is the basic selector of css

青灯夜游Original: 2021-11-02 18:25:229418browse

The basic selectors of css refer to: 1. Wildcard selector; 2. Tag selector; 3. Class selector; 4. Id selector; 5. Combined element selector; 6. Multi-category selection device.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Introduction to basic selectors

Basic selectors are divided into six ways of use: such as wildcard selectors, tag selectors, class selectors, Id selectors, and combined elements Selectors, multi-type selectors.
Basic selector usage instructions table.

Selector	Grammar format	Meaning	Example
Wildcard selector	*{Attribute: value;}	The universal selector can select all elements on the page and apply styles to them, using * To represent. It is not recommended to use it. IE6 does not support it and will increase the burden on large websites.	*{width: 300px;}
Tag selector	Tag name{Attribute: value;}	Tag selection Converter, matching the corresponding HTML tags.	h1{color: red;}
Class selector	.class attribute value{attribute: value;}	Class selector sets styles for elements with a specified class attribute value.	.box{color: red;}
Id selector	#id attribute value{attribute: value;}	Id selector, in an HTML document, the Id selector will be used once, and only once. Id selectors are defined with #.	#box{color: red;}
Combined element selector	Tag name.class attribute value{attribute: value}	The selector will be based on elements whose tag names contain the specified .class attribute value.	p.box {color:red;}
Multiple class selector	.class attribute value.class attribute value {attribute: value; }	By linking two class selectors together, only elements containing both of these class names can be selected (the order of the class names is not limited). Note: In versions prior to IE7, Internet Explorer on different platforms did not handle multi-type selectors correctly.	.box.box1{color:red;}

Wildcard Selector

Next let us enter the practice of universal selector. The author uses the embedded form to insert h1 in the HTML page. The font color in the tags and p tags is set to red.
Code block

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<style>
			* {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

Result graph

What is the basic selector of css

Tag Selector

Next let us enter the tag selector practice. The author uses the embedded form to insert h1 in the HTML page. The font color in the tags and p tags is set to red.
Code block

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

Result graph

What is the basic selector of css

Note: The tag selector refers to setting the style for the specified tag.

Code Block

nbsp;html>

	
		<meta>
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>

Result Picture
Now everyone should know why the p tag has not changed, because the function of the tag selector is to set the style for the specified tag. Next, the author will p The font color of the tag is set to red.
Code block

nbsp;html>

	
		<meta>
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}

			p {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>

Result graph

Class selector

Next let us enter the class selector practice. The author uses the attribute value of the class to be .box in an embedded form to complete# The font color in the h1 tag and p tag in the ##HTML page is set to red.
h1 tag in the HTML page to red.
Code block

nbsp;html>

	
		<meta>
		<title>类选择器</title>
		<style>
			.box {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>

Result graph
Note: As long as the value of the
class attribute is .box, no matter what label it is, the font color will be set to red, and the remaining CSS styles It's also consistent.
Now we set the font color of the second
h1 tag and p tag to red.
Code block

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
    <style>
        .box{
            color:red;
        }
    </style>
</head>

<body>
    <h1 class="box">成功不是击败别人，而是改变自己。</h1>
	<h1 class="box">PHP中文网</h1>
	<p class="box">PHP中文网</p>
</body>
</html>

Result graph

Id selector

id selector practice. The author uses the id attribute value as # in embedded form. box, set the font color in the h1 tag in the HTML page to red.
Code block

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			#box {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1 id="box">成功不是击败别人，而是改变自己。</h1>
	</body>
</html>

Result graph
Note: Using the
id selector is to set the style with the specified id attribute value, but please note that in a HTML page The attribute value of id must be unique.

Combined element selector

Next let’s get into the practice of combining element selectors. The author uses
in an embedded form. The h2 tagclass attribute value is the font color of the .box element, which is set to red.
Code block

nbsp;html>

	
		<meta>
		<title>结合元素选择器</title>
		<style>
			h2.box {
				color: red;
			}
		</style>
	

	
		<h2>成功不是击败别人，而是改变自己。</h2>
		<span>成功不是击败别人，而是改变自己。</span>

Result graph
Note: The execution principle of the element selector is explained as follows: First, find the
h2 tag, and then go to the h2 tag to find the class attribute value. .box, if the class attribute value is found to be .box, set the style for it. Now everyone should know the reason why the class attribute value under the span tag is .box is not rendered.

Multi-category selector

Next let us enter the practice of multi-category selector. The author will use the embedded form to The
class attribute value contains the font color of .box and .box1 elements set to red.
Code Block

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多类选择器</title>
		<style>
			.box.box1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h2 class="box1 box">成功不是击败别人，而是改变自己。</h2>
		<span class="box box1">成功不是击败别人，而是改变自己。</span>
		<h2 class="box1 ">PHP中文网</h2>
		<span class="box">PHP中文网</span>
	</body>
</html>

What is the basic selector of css

Note: The implementation principle of the multi-class selector is explained as follows: First, the class attribute value can be set to multiple values separated by spaces. For example: If a class attribute value contains .box and .box1 set their styles. By linking the two class selectors together, only elements containing both of these class names can be selected (the order of the class names is not limited). ). If a multi-class selector contains a class name that is not in the class name list, the match will fail. Now you should know that the individual class attribute values are .box and .box1 are not rendered.

(Learning video sharing: css video tutorial)

The above is the detailed content of What is the basic selector of css. 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

Previous article：What is the Chinese meaning of htmlNext article：What is the Chinese meaning of html

See more

What is the basic selector of css

Introduction to basic selectors

Wildcard Selector

Tag Selector

Class selector

Related articles