What selectors are there in css?

CSS selectors include: 1. Category selector; 2. Tag selector; 3. ID selector; 4. Descendant selector; 5. Sub-selector; 6. Pseudo-class selector; 7 , Universal selector; 8. Group selector; 9. Adjacent sibling selector; 10. Attribute selector; 11. Pseudo element selector.

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

css selector introduction:

1. Category selector

The class selector selects based on the class name, preceded by "." .

Example:

.demoDiv{
color:#FF0000;
}

2. Tag selector

A complete HTML page is composed of many different tags, and the tag selector determines which tags are used Corresponding CSS styles.

The declaration of the p tag style in the style.css file is as follows:

p{
font-size:12px;
background:#900;
color:090;
}

3. ID selector

The ID selector can be an HTML element marked with a specific ID Specify a specific style. Select elements based on element ID, which is unique, which means that the same ID can only appear once in the same document page.

is preceded by a "#" sign and can be defined in the style as follows:

#demoDiv{
color:#FF0000;
}

4. Descendant selector

Descendant selector is also called inclusion The selector is used to select the descendants of a specific element or element group. The selection of the parent element is placed in front and the selection of child elements is placed in the back, separated by a space in the middle.

<style>
.father.child{
color:#0000CC;
}
</style>
<p class="father">
黑色
<label class="child">蓝色
<b>也是蓝色</b>
</label>
</p>

5. Child selector

Please note the difference between this selector and the descendant selector. The child selector only refers to its direct descendants, or your It can be understood as acting on the first descendant of the child element. The descendant selector acts on all child descendant elements. Descendant selectors select with spaces, while child selectors select with ">".

Let’s look at the following code:

Example Source Code

CSS：

#links a {color:red;}
#links > a {color:blue;}

HTML：

<p id="links">
<a href="#">HTML中文网</a>>
<span><a href="#">CSS布局实例</a></span>
<span><a href="#">CSS教程</a></span>
</p>

6. Pseudo-class selection The handler

Sometimes you need to use other conditions outside the document to apply the style of the element, such as mouse hover, etc. At this time we need to use pseudo classes. The following is the pseudo-class definition for the linked application.

a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/* IE不支持，用Firefox浏览可以看到效果 */
input:focus{
background:# E0F1F5;
}

7. Universal selector

The universal selector is represented by *. For example:

*{
font-size: 12px;
}

means that the font size of all elements is 12px; at the same time, the universal selector can also be combined with descendant selectors.

8. Group selector

When several elements have the same style attributes, they can call a statement together and separate the elements with commas. For example:

p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
.#main p span {
color:#f60;
}
.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}

Using the group selector will greatly simplify the CSS code. Elements with multiple identical attributes can be merged into groups for selection, and the same CSS attributes can be defined, which greatly improves coding. efficiency, and also reduces the size of CSS files.

9. Adjacent sibling selector

In addition to the above child selector and descendant selector, we may also want to find one of the two brothers, such as a title h1 The element is followed by two paragraph p elements. We want to locate the first paragraph p element and apply styles to it. We can use the adjacent sibling selector.

10. Attribute selector

You can define css by judging whether a certain attribute of the html tag exists.

Attribute selector is matched based on the attributes of the element. Its attributes can be standard attributes or custom attributes

11. Pseudo-element selector

All pseudo-element selectors must be placed at the end of the selector in which the pseudo-element appears, which means that the pseudo-element selector cannot be followed by any derived selector.

Recommended learning: css video tutorial

The above is the detailed content of What selectors are there in css?. For more information, please follow other related articles on the PHP Chinese website!