Pseudo-class selector
Pseudo-class selectors and pseudo-element selectors can specify styles for non-specific results in a document, or styles for the status of certain elements (including the document itself). It applies styles based on certain conditions rather than document structure.
The use of pseudo-class selectors is as follows:
HTML标记 伪类名{伪类名：属性值；属性名：属性值；.....}
Common pseudo-classes are shown in the following table:
| Pseudo-class name | description |
|---|---|
| :link | The mouse did not put on the previous style |
| :visited | Styles of hyperlinks visited |
| :focus | When the element is called the focus, it is often used for form elements |
| :hover | Used when the mouse is over an element and it has not been triggered or clicked, for example, the mouse pointer may stay on a hyperlink, and: hover will indicate the hyperlink |
Use of pseudo-class selectors
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN董小宇伪类的使用</title>
<style>
a:link{/*超链接初始颜色为blue*/
color: blue;
}
a:visited{/*超链接点击一次之后，颜色变为darkslategrey;*/
color: darkslategrey;
}
a:hover{/*鼠标在超链接上时，超链接颜色为yellow*/
color: yellow;
}
a{
font-size: 32px;
}
</style>
</head>
<body>
<div>
<a href="https://blog.csdn.net/lolly1023">CSDN：董小宇</a>
</div>
</body>
</html>
The effect is as follows:
blue is the initial setting color, and yellow is the color where the mouse is stuck on the connection.
Instructions for the use of pseudo-classes:
a The order of pseudo-classes should be LVHA (: link: visited: focus: hover) In the CSS definition, a: hover must be placed after a: link and a: vistied to be valid Yes, in the CSS definition, a: active must be placed after a: hover to be effective.
Pseudo-element selector
The method of using the pseudo-element selector is as follows:
HTML tags: pseudo-elements (attribute name: attribute value; attribute name: attribute value; ...)
Common pseudo-elements are shown in the following table:
| Pseudo-element name | description |
|---|---|
| :first-letter | Add special styles to the first letter in the text, associated with block-level elements |
| :first-line | Add a special style to the first flight in the text |
| :before | Add content before the element, the default pseudo-element is the inline element |
| :after | Add content after the element |
Use of pseudo-elements
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN董小宇伪元素的使用</title>
<style>
/*第一行的首字母发生变化*/
div::first-letter{/*设置第一段开头第一个字大小为64px*/
font-size: 64px;
}
/*第一行全部修改*/
div::first-line{/*设置第一行的背景色为red*/
background-color: red;
}
/*在文本前面添加内容*/
div::before{/*在开头添加内容，需要使用content才能添加*/
/*添加文本内容*/
content: 'CSDN';
font-style: italic;
}
/*在文本后面添加内容*/
div::after{/*在开头添加内容，需要使用content才能添加*/
content: '董小宇';
color: blue;
}
</style>
</head>
<body>
<div>
伪元素的实例
</div>
</body>
</html>
The effect is as follows:
Intersection selector
- The intersection selector is composed of two selectors, and the result is to select the intersection of the two grid element ranges.
- Requirements: The first selector in the intersection must be a tag selector, and the second must be a class selector, or an id selector.
- There must be no spaces between the two selectors, and they must be written continuously.
Use of intersection selector
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN董小宇交集选择器的使用</title>
<style>
p.p1{/**使用交集选择器，选中了p标签与类选择器为p1的内容，然后进行修改/
font-size: 32px;
}
</style>
</head>
<body>
<div>
<p class="p1">我使用了交集选择器</p>
<p>我没有使用交集选择器</p>
</div>
</body>
</html>
The effect is as follows:
I am also a beginner in programming. If there is something wrong with understanding, I hope you can comment out the error after reading it. Thank you.
