1. Type Selector What is a type selector? Refers to the line character that takes the existing tag type in the web page as its name. Body is a tag type in a web page, including div, p, and span.
As follows:
body {}
div {}
p{}
span {}
2. Group selector
For XHMTL objects, the same style can be assigned to a group at the same time.
The selectors are separated by commas. The advantage of writing this way is that the same style only needs to be written once, which reduces the amount of code and improves the CSS code structure.
When using it, please note that "comma" is in half-width mode, not Chinese full-width mode.
As follows:
h1,h2,h6,p,span
{
font-size:12px;
color:#FF0000;
font-family: arial;
}
3. Contain selectors to specify styles for sub-objects in an object, so that the selection method plays a role.
It should be noted that this style setting is only valid for sub-object labels of this object. This style setting does not apply to other sub-objects that exist alone or are located outside this object.
The advantage of this is that it helps us avoid excessive id and class settings and directly define the required elements.
As follows:
h2 span
{
color:red;
}
as follows:
body h1 span strong
{
font-weight:bold;
}
4. The id selector is
a selector that appears based on the principle of the DOM document object model. For an XHTML file, each tag can be assigned a name in the form of an id="", but it should be noted that in an XHTML file The ID is unique and cannot be repeated.
In a div CSS layout web page, you can name it for different purposes, such as header for the head and footer for the bottom.
The XHTML is as follows:
<div id="content"></div>
The CSS is as follows:
#content
{
font-size:14px;
line-height:120%;
}
5. Class selector
In fact, id is an extension of XHTML tags, and class is a combination of multiple SHTML tags. The literal translation of class means class or category.
For XHTML tags use class="" for name assignment. Unlike ids, classes can be reused. Multiple elements with the same style can be directly defined as a class.
The advantages of using class are self-evident. It reflects the reusability of CSS code. Many tags can be defined using a style without writing a style code for each one.
The XHTML is as follows:
<p class="he"></p>
<span class="he"></span>
<h5 class="he"></h5>
The CSS is as follows:
.he
{
margin:10px;
background-color:red;
}
6. Tag-specific selectors
If you want to use id and class at the same time, and also want to use tag selectors at the same time, you can use the following method:
h1#content {}
/*Represents all h1 tags with id as content*/
h1.p1 {}
/*Indicates all h1 tags with class p1*/
The precision of the label-specific selector is between the label selector and the id/class selector, and it is one of the commonly used selectors.
7. Combination selectors
For all the above selectors, use them in combination. As follows:
h1 .p1 {}
/*Indicates all tags with class p1 under h1*/
#content h1 {}
Represents all h1 tags under the tag with id content
h1 .p1,#content h1 {}
/*Represents all h1 tags under h1 with class p1 and all h1 tags under the tag with id content*/
h1#content h2{}
/*h2 tag under h1 tag with id as content*/
CSS selectors are very free and flexible. You can use various selectors according to the needs of the page to structure and optimize the CSS file as much as possible.