Does css have a hypertext tag selector?

There is no "hypertext tag selector" in css; the selectors included in css are: id selector, class selector, label selector, descendant selector, child selector, pseudo-class selector, pseudo- Element selector, universal selector "*", attribute selector, group selector, adjacent sibling selector.

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

#css selector introduction:

1. Category (class) selector

The class selector is based on the class name Select, 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>

(Learning video sharing: css video tutorial)

6. Pseudo-class selector

Sometimes you need to use other conditions other than the document to apply the style of the element, such as the 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.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of Does css have a hypertext tag selector?. For more information, please follow other related articles on the PHP Chinese website!