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.
| 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;} |
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
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
Note: The tag selector refers to setting the style for the specified tag.
Code Block
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>成功不是击败别人，而是改变自己。</h1>
<h1>PHP中文网</h1>
<p>PHP中文网</p>
</body>
</html>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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
h1 {
color: red;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>成功不是击败别人，而是改变自己。</h1>
<h1>PHP中文网</h1>
<p>PHP中文网</p>
</body>
</html>Result graph
.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. tag in the HTML page to red. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.box {
color: red;
}
</style>
</head>
<body>
<h1 class="box">成功不是击败别人，而是改变自己。</h1>
<h1>PHP中文网</h1>
<p>PHP中文网</p>
</body>
</html>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.
h1 tag and p tag to red.
<!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>
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. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#box {
color: red;
}
</style>
</head>
<body>
<h1 id="box">成功不是击败别人，而是改变自己。</h1>
</body>
</html>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.
in an embedded form. The h2 tagclass attribute value is the font color of the .box element, which is set to red.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>结合元素选择器</title>
<style>
h2.box {
color: red;
}
</style>
</head>
<body>
<h2 class="box">成功不是击败别人，而是改变自己。</h2>
<span class="box">成功不是击败别人，而是改变自己。</span>
</body>
</html>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.
class attribute value contains the font color of .box and .box1 elements set to red.
<!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>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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
