前言:

本文内容:结构伪类选择器、属性选择器

推荐免费CSS3基础讲解视频:【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

结构伪类选择器

伪类:用于定义元素的特殊状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 结构伪类选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: pink;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: rebeccapurple;
}
/*选中p1 定位到父元素,选择二当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个
*/
p:nth-child(2){
background: aqua;
}
/*选中父元素下的p元素的第二个,类型*/
p:nth-of-type(2){
background: darkred;
}
a:hover{
background: #000000;
}

</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<a href="" >被你看到了</a>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>

</ul>
</body>
</html>

属性选择器★

ID+Class结合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 15px;
background: pink;
text-align: center;
text-decoration: none;
color: black;
margin-right: 5px;
line-height: 50px;
}

/*选择存在id属性的元素 例如:a[属性名=属性值]{}*/
a[id=first]{
background: #63b86c;
}
/*选择class里有links的元素 例如:a[class*=links]{} */
a[class*=links]:hover{
background: #69b1ba;
}
/*选中href中以https开头的 例如:a[href^=https]{}*/
a[href^=https]:hover{
color: #ffffff;
}
/*选中href中以pp结尾的 例如:a[href$=pp]{}*/
a[href$=pp]:hover{
color: #ff0000;
font-size: 50px;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://jokerdig.com" class="blog links" id="first">博客</a>
<a href="https://bing.com" class="search links">bing</a>
<a href="https://baidu.com" class="search links">3</a>
<a href="https://taobao.com" class="it links">4</a>
<a href="https://jd.com"class="it links" >5</a>
<a href="pp"class="it links">6</a>
<a href="pp"class="it links">7</a>
</p>
</body>
</html>

202202061406783

格式:

  • 属性名: 属性名=属性值(正则):

  • = 绝对等于

  • *= 包含这个元素

  • ^= 以这个值开头

  • $= 以这个值结尾