Today we will tell you about the usage and related connections and differences between Attribute Selector and PseudoClass Selector. Here is a small example.
Attribute selector:
[attr~="value"] Word Word Space Word Word must be valid
[attr|="value"] Value starts with or value - Word
Note:
It is difficult to use rules expressions to identify selected elements when selecting attributes, which is more efficient
Pseudo-class Selector:
: before
: after
:lang(val) val/val-word
:nth-child(n) nfrom Starting from 1, odd base and even even number
:nth-of-type(n) selector matches every element that is the Nth child element of a specific type of the parent element.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
--->
<div>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
</body>
</html>
Css部分：
@charset "utf-8";
/* CSS Document */
/*
p:before{
content:"ccc";
}
p:lang(en){
border:1px solid #ff0000;
}
p:nth-child(even){
background:#F00;
}
*/
p:nth-of-type(3){ /* p标记的父元素 下的 第3个p元素*/
background:#F00;
}Related Read:
How to hide content that overflows a DIV
What are the techniques for CSS layout
Font styles in CSS How to set up
The above is the detailed content of How to use attribute selectors and pseudo-class selectors. For more information, please follow other related articles on the PHP Chinese website!
Introduction to article tag attributes
There are several ways to position CSS position
How to turn off automatic updates in win10
Binance official website
What to do if postscript cannot be parsed
360sd
How to deal with garbled Chinese characters in Linux
vcruntime140.dll cannot be found and code execution cannot continue
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
