08-CSS3选择器
程序员文章站
2024-02-01 08:55:46
...
5.1 兄弟选择器
5.1.1 相邻兄弟选择器
给指定选择器后面紧跟的那个选择器选中的标签设置属性
基本格式
选择器1+选择器2{
属性:值;
}
注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
h3 + p{
color: green;
}
</style>
</head>
<body>
<h3>java高并发</h3>
<a href="#">python人工智能</a>
<p>html网页架构</p>
<h3>java最牛B</h3>
<p>javaSE基础</p>
<p>javaWEB搭建网站</p>
</body>
</html>
执行结果
5.1.2 通用兄弟选择器
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
基本格式
选择器1~选择器2{
属性:值;
}
注意:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟选择器</title>
<style type="text/css">
h3~p{
color: red;
}
</style>
</head>
<body>
<h3>NBA巨星</h3>
<a href="#">kobe是总决赛MVP</a>
<p>James最佳防守运动员</p>
<a href="#">Curry总决赛MVP</a>
<p>Rondo最佳5号位</p>
<h3>NBA巨星</h3>
<p>McGrady投篮最销魂</p>
</body>
</html>
执行结果
5.2 伪类选择器
链接的4中状态
**状态，已访问状态，未访问状态，和鼠标悬停状态。
| 伪类 | 说明 |
|---|---|
| link | 未访问的链接 |
| visited | 已访问的链接 |
| hover | 鼠标悬停状态 |
| active | **的链接 |
伪类:hover和:active
- :hover用于访问的鼠标经过某个元素时
- :active用于一个元素被**时（即按下鼠标之后放开鼠标之前的时间）
-
链接伪类的顺序
- Link > :Visited > :Hover > :Active
注意：
- a:hover 必须置于 a:link 和 a:visited 之后，才有效。
- a:active 必须置于 a:hover 之后，才有效。
- 伪类名称对大小写不敏感。
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
p a:link{color:blue;}
p a:visited{color:green;}
p a:hover{color:red;}
p a:active{color:gray;}
div a:link{color:green;}
div a:visited{color:blue;}
div a:hover{color:gray;}
div a:active{color:red;}
</style>
</head>
<body>
<p><a href="http://www.baidu.com" target="_blank">伪类选择器</a></p>
<br/>
<div><a href="http://www.zhihu.com" target="_blank">伪类选择器</a></div><br/>
<p>度娘</p>
</body>
</html>
5.3 序选择器
作用: 选中指定的任意标签然后设置属性。
同一级别属性（ 不区分类型）
- :first-child 同级别中的第一个标签
- :last-child 同级别中的最后一个标签
- :nth-child(n) 同级别中的第n个标签
- :nth-last-child(n) 同级别中的倒数第n个标签
- :only-child 父元素中唯一的标签
- :nth-child(odd) 选中同级别中的所有奇数
- :nth-child(even) 选中同级别中的所有偶数
- *:nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增
同一类型的属性
- :first-of-type 同级别中同类型的第一个标签
- :last-of-type 同级别中同类型的最后一个标签
- :nth-of-type(n) 同级别中同类型的第n个标签
- :nth-last-of-type(n) 同级别中同类型的倒数第n个标签
- :only-of-type 父元素中唯一类型的某个标签
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序选择器</title>
<style type="text/css">
/*1.1 first-child 选中同级别中的第一个标签*/
/*p:first-child{
color: red;
}*/
/*1.2 first-of-type 选中同级别中同类型的第一个标签*/
/*p:first-of-type{
color: blue;
}*/
/*2.1 选中同级别中的第n个标签*/
/*p:nth-child(3){
color: red;
}*/
/*2.2 选中同级别中同类型的第n个标签*/
/* p:nth-of-type(3){
color: blue;
}*/
/*3.1 only-child 选中父元素中唯一的标签*/
/* p:only-of-type {
color: red;
}*/
/*:only-of-type 选中父元素中唯一类型的某个标签*/
.st1:only-of-type {
color: red;
}
</style>
</head>
<body>
<!--<h3>程序设计语言</h3>
<p>java最牛B</p>
<p>Python人工智能</p>
<p>C语言最底层</p>
<h5>C++最掉头发</h5>
<div>
<p>Vue好香</p>
<p>javaScript神经病一样</p>
<p>CSS好看。</p>
<p class="st1">php,无需解释</p>
</div>-->
<p class="st1">kobe是MVP</p>
<div>
<p class="st2">我是curry</p>
<p>James牛逼！！！</p>
<h3>~~~~~</h3>
</div>
</body>
</html>
5.4 属性选择器
根据指定的属性名称找到对应的标签, 然后设置属性
基本格式
[attribute]
作用:根据指定的属性名称找到对应的标签, 然后设置属性
[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性最常见的应用场景, 就是用于区分input属性
代码格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
p[id]{
color: green;
}
p[class=st3]{
color: red;
}
</style>
</head>
<body>
<p id="st1">java最牛逼的语言!!!</p>
<p id="st2" class="p1">php,还需要别的引论么</p>
<p class="st3">html网站基本架构</p>
<p id="st4" class="p2">javaScript最*</p>
<p>c++最废头发</p>
</body>
</html>
执行结果
上一篇： 前端总结之HTML 02
下一篇： CSS基础知识总结