结构性伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<title>结构性伪类选择器</title>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1">
<style>
a:hover {
color:
red;
}
/* first-line伪元素选择器：用于某个元素的第一行文字使用样式 */
.p1::first-line {
color:
blue;
}
/* first-letter:用于为某个元素的文字的首字母 或第一个字使用的样式 */
.p2::first-letter {
color:
red;
}
/* before after */
/* before在元素的开头插入内容 */
.p1::before {
content:
'gaozhen'
}
/* before在元素的结尾插入内容 */
.p1::after {
content:
'gaozhen'
}
/* not选择器，排除选择的元素 */
/* body *:not(a) {
color: red;
} */
:target {
background-color:
gray;
}
/* nth-child nth-last-child */
/* nth-child()从元素的开头数第几个元素的样式 */
ul li:nth-child(3) {
color:
blue;
}
ul li:nth-last-child(2) {
color:
brown;
}
/* nth-child()设置奇数和偶数样式时，是针对所有的子元素 */
/* 奇数样式 */
.s-ul li:nth-child(odd) {
background-color:
aqua;
}
/* 偶数行样式 */
.s-ul li:nth-child(even) {
background-color:
aquamarine;
}
/* 使用nth-of-type() 和 nth-last-of-type() */
.s-div h4:nth-of-type(odd) {
background-color:
blueviolet;
}
.s-div h4:nth-of-type(even) {
background-color:
brown;
}
/* nth-child()使用循环样式 */
.t-ul li:nth-child(3n+1) {
color:
gray;
}
.t-ul li:nth-child(3n+2) {
color:
red;
}
.t-ul li:nth-child(3n+3) {
color:
blue;
}
/* only-child() 某个父元素只有一个子元素才使用的选择器*/
li:only-child {
color:
aqua;
}
</style>
</head>
<body>
<!-- <p>伪类选择器是css中定义好的选择器</p> -->
<p
class="p1">11111111<br/>222222</p>
<p
class="p2">hello world</p>
<p>3</p>
<p>4</p>
<p>5</p>
<a>hover</a>
<hr/>
<p
id="menu">
<a
href="#text1">1</a>
<a
href="#text2">2</a>
<a
href="#text3">3</a>
<a
href="#text4">4</a>
<a
href="#text5">5</a>
</p>
<div
id="text1">text1</div>
<div
id="text2">text3</div>
<div
id="text3">text3</div>
<div
id="text4">text3</div>
<div
id="text4">text5</div>
<hr/>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
<hr/>
<ul
class="s-ul">
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
</ul>
<hr/>
<div
class="s-div">
<h4>1</h4>
<p>1</p>
<h4>2</h4>
<p>2</p>
<h4>3</h4>
<p>3</p>
<h4>4</h4>
<p>4</p>
<h4>5</h4>
<p>6</p>
</div>
<hr/>
<h3>nth-child()循环样式</h3>
<ul
class="t-ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<ul>
<li>111111</li>
</ul>
<!-- UI元素状态伪类选择器 -->
</body>
</html>
web前端开发
