Introduction to CSS selector types and usage

Commonly used ones include tag selectors, class selectors, ID selectors, etc. In fact, there are many more. In the following article, we will introduce the types of these selectors and their uses in detail

First, let’s talk about the main selectors
1. Tag selector (such as: body, p, p, ul, li)
2. Class selector (such as: class="head", class=" head_logo")
3.ID selector (such as: id="name",id="name_txt")
4. Global selector (such as: * number)
5. Combination selector (such as ：.head .head_logo, note that the two selectors are separated by the space bar)
6. Inherit the selector (such as: p p, note that the two selectors are separated by the space bar)
7. Pseudo-class selector (for example: it is the link style , pseudo-class of a element, 4 different states: link, visited, active, hover.)
8. Attribute selectors for string matching (^ $ * three types, corresponding to start, end, and inclusion respectively)
The way of writing style=" "in the tag should be a way of introducing CSS, not a selector, because the selector is not used at all.
Let’s look at these selectors separately:
1: Tag name selector
There are many tags in an XHTML document, such as p tags, h1 tags, etc. To make all p tags in the document use the same CSS style, you should use the tag selector.

p {color:red;border:1px blue solid;} 
p {color:#000;}

2: Class selector
Use the tag selector to specify the same CSS style for the same tag in the entire XHTML document. But in actual application, the same tag in the XHTML document will be used repeatedly. If you want to assign different CSS styles to the same tag, you should use class selectors.

<p class="test">测试代码</p> 
.test {color:red;border:1px blue solid;}

In the html document, we add class="xxx" to the opening tag of the tag to control the style (non-paired tags such as input are placed directly in the tag), and in the corresponding css file of the page , you can use .xxx to point to this tag to control this tag. We call this way of finding tags by defining classes: class selectors.

This way of defining class is the most commonly used selector in front-end development. It has several outstanding features: you can set the same class for different tags, thereby using one CSS command to control several tags, reducing a lot of The code is that the page is simple to modify, easy to maintain, and easy to revise; secondly, the background staff will not use the relevant settings of the class, and there is no need to interact with the background staff; furthermore, the label can be dynamically changed through js, etc. Classname, thereby changing the style of the entire label, making it easier to implement front-end dynamic effects.
3: ID selector
ID selector is similar to class selector. The difference is that ID selector cannot be reused. In an XHTML document, an ID selector can only assign its CSS style to one tag.

<p id="test">测试代码</p> 
#test {color:red;border:1px blue solid;}

HTML elements with IDs can be manipulated by JavaScript. IDs are also commonly used by backend developers, so front-end developers should use them as little as possible.
4. Global selector
The global selector is an asterisk. It works on all elements in the XHTML document.

*{margin:0; padding:0;}

5. Combination selector
Label selector, class selector and ID selector can be used in combination. The general combination method is the combination of tag selector and class selector, and the combination of tag selector and ID selector. Since the principles and effects of these two combination methods are the same, only the combination of tag selector and class selector is introduced. The combination selector is just a form of combination and not a real selector, but it is often used in practice.
For example, .orderlist li {xxxx} or .tableset td {}
When we use it, it is usually used in some tags that appear repeatedly and have the same style, such as li td dd, etc.
For example

H1.red {color: red}
Group selector

.test1,span,test2 {border:1px blue solid;} 
p,span,img {border:1px blue solid;}

The group selector is actually a CSS A simplified way of writing, it just puts different selectors with the same definition together, saving a lot of code.
6. Inherited selector
To learn to use inherited selectors, you must first understand the inheritance of document trees and CSS. Each XHTML can be regarded as a document tree. The root of the document tree is the html tag, and the head and body tags are its child elements. The other tags in the head and body are the grandchild elements of the html tag. The entire XHTML presents a tree-like relationship between ancestors and descendants. CSS inheritance means that descendant elements inherit certain attributes of ancestor elements. The following explains these two important CSS concepts in detail through examples.
Document tree CSS inheritance inheritance selector

<p class="test"> 
<span><img src="xxx" alt="示例图片"/></span> 
</p> 
.test span img {border:1px blue solid;} 
p span img {border:1px blue solid;}

后代选择器实际上是使用：多个选择器加上中间的空格来找到具体的要控制标签；从左往右，依次细化，最后锁定要控制的标签，如上例，先找到class为test的标签，再从他的子标签里查找span标签，再从span的子标签中找到IMG标签。
7.伪类选择器
伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上的。伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。伪类包括：:first-child、:link:、:visited、:hover、:active、:focus和:lang等等。其中有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link:、:visited、:hover和:active。
a的这四个伪类，分别表示了a的四种状态，要注意的是，a可以只具有一种状态（:link），或者同时具有2种或者三种状态！比如说，任何一个有HREF属性的a标签，在未有任何操作时都已经具备了:link的条件，也就是满足了有链接属性这个条件；如果访问过的a标签，同时会具备 :link :visited 两种状态。把鼠标移到访问过的a标签上
8.字符串匹配的属性选择符--主要有三种
语法：E[att^="val"] ： {attribute}
说明：匹配具有att属性、且值以val开头的E元素。

<span style="font-size:18px;"><style type="text/css"> 
p[title^="val"] {color:#FF0000;} 
</style> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="value">匹配具有att属性、且值以val开头的E元素</p> 
</p></span>

语法:E[att$="val"] ： {attribute}
说明：匹配具有att属性、且值以val结尾的E元素

<style type="text/css"> 
p[title$="val"] {font-weight:bold;} 
</style> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="this is val">匹配具有att属性、且值以val结尾的E元素</p> 
</p> 
</body>

语法:E[att*="val"] ： {attribute}
说明：匹配具有att属性、且值中包含val的E元素。

<style type="text/css"> 
p[title*="val"] {text-decoration:underline;} 
</style> 
<title>子串匹配的属性选择符 E[att*="val"]</title> 
</head> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="have val word">匹配具有att属性、且值中含有val的E元素</p> 
</p> 
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于CSS background的使用方法

The above is the detailed content of Introduction to CSS selector types and usage. For more information, please follow other related articles on the PHP Chinese website!