欢迎来到尧图网

客户服务 关于我们

您的位置：首页 > 新闻 > 资讯 > CSS(二)——选择器

CSS(二)——选择器

2025/1/31 14:17:30 来源：https://blog.csdn.net/weixin_41446512/article/details/145222474  浏览:  次   关键词：CSS(二)——选择器

1.基础选择器

（1）类选择器：用点（.）来查找，可以有多个属性值，用空格分开即可
注意：多个属性值是指定义class名字的时候可以定义多个属性值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>.zs{color: brown;font-size: 25px;}.zs1{color: aqua;font-size: 25px;}</style>
</head>
<body><p class="zs">周深的歌</p><ol><li class="zs zs1">《大鱼》</li><li>《我的答案》</li><li>《好风起》</li></ol>
</body>
</html>

在这里插入图片描述
（2）唯一选择器（id选择器）：用#来查找

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>.zs{background-color: brown;font-size: 25px;}.zs1{color: aqua;font-size: 25px;}#answer{color: red;font-size: 25px;}</style>
</head>
<body><p class="zs">周深的歌</p><ol><li class="zs zs1">《大鱼》</li><li id="answer">《我的答案》</li><li>《好风起》</li></ol>
</body>
</html>在这里插入代码片

在这里插入图片描述
（3）通配符选择器（*）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>*{background-color: pink;color: blue;font-size: 45px;}</style>
</head>
<body><p class="zs">周深的歌</p><ol><li class="zs zs1">《大鱼》</li><li id="answer">《我的答案》</li><li>《好风起》</li></ol>
</body>
</html>

在这里插入图片描述
（4）tagName标签选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>p{color: red;font-size: 40px;}li{color: aqua;font-size: 40px;}</style>
</head>
<body><p class="zs">周深的歌</p><ol><li class="zs zs1">《大鱼》</li><li id="answer">《我的答案》</li><li>《好风起》</li></ol>
</body>
</html>

在这里插入图片描述

2.层级选择器

（1）组合选择器：多个选择器之间用逗号相隔，例如：选择器1，选择器2（如：ol,p）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>p,li{color: red;font-size: 50px;}</style>
</head>
<body><p>周深的歌</p><ol><li>《大鱼》</li><li>《我的答案》</li><li>《好风起》</li></ol>
</body>
</html>

在这里插入图片描述
（2）包含选择器：选择器1 选择器2（选择器2被选择器1包含）用空格相隔

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>div p{color: red;font-size: 40px;}ol li{color:aquamarine;font-size: 40px;}</style>
</head>
<body><div><p class="zs">周深的歌</p></div><ol><li>《大鱼》</li><li>《我的答案》</li><li>《好风起》</li></ol>
</body>
</html>

在这里插入图片描述
（3）子选择器：子选择器1>子选择器2（1是2的父亲），只有父子关系才可以

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>div>p{color: red;font-size: 40px;}/* li相当于div孙子，所以不起作用；把div改为ol即可   */div>li{color:aquamarine;font-size: 40px;}</style>
</head>
<body><div><p class="zs">周深的歌</p></div><p>周深参加的综艺</p><div><ol><li>《大鱼》</li><li>《我的答案》</li><li>《好风起》</li></ol></div></body>
</html>

在这里插入图片描述
（4）相邻选择器：选择器1+选择器2（两选择器要紧挨着）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>div+p{color: red;font-size: 40px;}div+li{color:aquamarine;font-size: 40px;}</style>
</head>
<body><div><span>周深的歌</span></div><p>周深参加的综艺</p><div><ol><li>《大鱼》</li><li>《我的答案》</li><li>《好风起》</li></ol></div></body>
</html>

在这里插入图片描述
（5）兄弟选择器：选择器1~选择器2（选择器1后面所有的兄弟选择器2，选择器之间是并列关系）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>div~p{color: red;font-size: 40px;}ol~li{color:aquamarine;font-size: 40px;}</style>
</head>
<body><div><p>周深的歌</p><!-- <span>周深</span> --></div><p>周深巡回演唱会</p><div>---------------</div><p>周深参加的综艺</p><div><ol><li class="zs zs1">《大鱼》</li><li id="answer">《我的答案》</li><li>《好风起》</li></ol></div></body>
</html>

在这里插入图片描述

3.属性选择器

  • 根据属性名或者属性值来查找某个元素
  • E（element 元素标签） ATT（attribute 属性） VAL（value值）
    （1）标签[属性]
    ① E[ATT]匹配所有具有ATT属性的元素，不考虑属性值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>[title]{color:aqua;font-size: 55px;}</style>
</head>
<body><span>周深好歌分享：</span><p title="This is me">《小美满》</p><p title="This is sunshine">《光亮》</p><p title="Floating light">《浮光》</p>
</body>
</html>

在这里插入图片描述
（2）E[ATT = VAL]匹配所有ATT属性等于VAL的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>p[title = "Floating light"]{color:aqua;font-size: 55px;}</style>
</head>
<body><span>周深好歌分享：</span><p title="This is me">《小美满》</p><p title="This is sunshine">《光亮》</p><p title="Floating light">《浮光》</p>
</body>
</html>

在这里插入图片描述
（3）E[ATT ~= VAL ]匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>p[title ~= "This"]{color:aqua;font-size: 55px;}</style>
</head>
<body><span>周深好歌分享：</span><p title="This is me">《小美满》</p><p title="This is sunshine">《光亮》</p><p title="Floating light">《浮光》</p>
</body>
</html>

在这里插入图片描述
（4）E[ATT |= VAL]匹配所有的ATT属性具有多个连接分隔符的值，其中一个值以val-开头的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>p[title |= "great"]{color:aqua;font-size: 55px;}</style>
</head>
<body><span>周深好歌分享：</span><p title="This is me">《小美满》</p><p title="This is sunshine">《光亮》</p><p title="Floating light">《浮光》</p><p title="great-life-mod">《好好生活就是美好生活》</p><p title="great">《化身孤岛的鲸》</p>
</body>
</html>

在这里插入图片描述

（5）E[ATT ^= VAL]属性ATT的值以VAL开头的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>p[title ^= "This"]{color:aqua;font-size: 55px;}</style>
</head>
<body><span>周深好歌分享：</span><p title="This is me">《小美满》</p><p title="This is sunshine">《光亮》</p><p title="Floating light">《浮光》</p><p title="great-life-mod">《好好生活就是美好生活》</p><p title="great">《化身孤岛的鲸》</p>
</body>
</html>

在这里插入图片描述
（6）E[ATT $= VAL]属性ATT的值以val结尾的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>p[title $= "t"]{color:aqua;font-size: 55px;}</style>
</head>
<body><span>周深好歌分享：</span><p title="This is me">《小美满》</p><p title="This is sunshine">《光亮》</p><p title="Floating light">《浮光》</p><p title="great-life-mod">《好好生活就是美好生活》</p><p title="great">《化身孤岛的鲸》</p>
</body>
</html>

在这里插入图片描述
（7）E[ATT *= VAL]属性ATT的值中有val存在的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>p[title *= "i"]{color:aqua;font-size: 55px;}</style>
</head>
<body><span>周深好歌分享：</span><p title="This is me">《小美满》</p><p title="This is sunshine">《光亮》</p><p title="Floating light">《浮光》</p><p title="great-life-mod">《好好生活就是美好生活》</p><p title="great">《化身孤岛的鲸》</p>
</body>
</html>

在这里插入图片描述

4.结构性伪类选择器

（1）伪元素选择器（不是对真正的元素选择）
① E：first-line（作用于元素的第一行）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>/*  作用于p标签的第一行，尽管有多行  */p:first-line{color: red;font-size: 35px;}</style>
</head>
<body><div><p>《白月梵星》主演：<br>白鹿<br>敖瑞鹏</p><span>《白月梵星》主演：</span><span>白鹿</span><span>敖瑞鹏</span></div></body>
</html>

在这里插入图片描述
② E:first-letter(E的第一个字母)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>/*  作用于p标签的第一个字  */p:first-letter{color: red;font-size: 35px;}</style>
</head>
<body><div><p>《白月梵星》主演：<br>白鹿<br>敖瑞鹏</p><span>《白月梵星》主演：</span><span>白鹿</span><span>敖瑞鹏</span></div></body>
</html>

在这里插入图片描述
③ E:before(该标签之前内容，需要配合content使用)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>/*  作用于p标签之前定义的内容  */p:before{content: "好看的电视剧：";color: green;font-size: 50px;}</style>
</head>
<body><div><p>《白月梵星》主演：<br>白鹿<br>敖瑞鹏</p></div></body>
</html>

在这里插入图片描述
④ E:after(与上面before用法类似)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>/*  作用于p标签之后定义的内容  */p:before{content: "这是一部好看的电视剧！";color: green;font-size: 20px;}</style>
</head>
<body><div><p>《白月梵星》主演：<br>白鹿<br>敖瑞鹏<br></p></div></body>
</html>

在这里插入图片描述

（2）4个基本的伪类选择器
① :root（将样式绑定到页面的根元素）针对一些变量去使用，可以直接在定义的地方进行修改

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>:root{//定义变量--fontColor:red;}p{color:var(--fontColor)   //使用变量}</style>
</head>
<body><p>选择器</p>
</body>
</html>

在这里插入图片描述

② E:not() (除去这个元素之外的)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>li:not(.three){color:aqua;font-size:35px;}</style>
</head>
<body><ol><li class="one">床前明月光</li><li class="two">疑是地上霜</li><li class="three">举头望明月</li><li class="four">低头思故乡</li></ol>
</body>
</html>

在这里插入图片描述

③ E:empty（匹配所有为空的元素）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>li:empty{background-color: pink;}</style>
</head>
<body><ol><li class="one">床前明月光</li><li></li><li class="two">疑是地上霜</li><li></li><li class="three">举头望明月</li><li></li><li class="four">低头思故乡</li></ol>
</body>
</html>

在这里插入图片描述
④ :target （代表链接到目标）针对a标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>a:target{font-weight: bold;color: green;font-size: 50px;}</style>
</head>
<body><a href="#fish">周深的歌</a><a href="#play">周深的综艺</a><a id="fish">《大鱼》</a><a id="play">《奔跑吧》</a>
</body>
</html>

在这里插入图片描述

5.其他结构伪类选择器

（1）E:first/last child（对一个父元素中的第一个/最后一个子元素E设置样式）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>li:first-child{color:red;font-size:40px;}li:last-child{color:pink;font-size: 40px;}</style>
</head>
<body><ol><li class="one">床前明月光</li><li class="two">疑是地上霜</li><li class="three">举头望明月</li><li class="four">低头思故乡</li></ol></body>
</html>

在这里插入图片描述

（2）E:nth-child()/E:nth-last-child() 对指定元素进行设置样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>li:nth-child(1){color:red;font-size:40px;}li:nth-last-child(2){color:pink;font-size: 50px;}</style>
</head>
<body><ol><li class="one">床前明月光</li><li class="two">疑是地上霜</li><li class="three">举头望明月</li><li class="four">低头思故乡</li></ol></body>
</html>

在这里插入图片描述

（3）E:nth-of-child()与E:nth-child()作用类似，但仅匹配使用的同种标签
E:nth-last-of-type()与E:nth-last-child()作用类似，但仅匹配使用的同种标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>li:nth-child(1){color:red;font-size:40px;}/*匹配同标签，则第二行的p标签样式不会改变*/li:nth-of-type(2){color:blue;font-size:40px;}li:nth-last-child(2){color:pink;font-size: 40px;}li:nth-last-of-type(1){color:purple;font-size: 40px;}</style>
</head>
<body><li class="one">床前明月光</li><p>《静夜思》</p><li class="two">疑是地上霜</li><span>李白</span><li class="three">举头望明月</li><li class="four">低头思故乡</li></ol></body>
</html>

在这里插入图片描述
（4）E:nth-child(an+b)
a:表示每次循环中间隔几个改变样式
b:表示指定循环中开始的位置
E:nth-of-type(an+b)类似

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>li:nth-child(2n+1){color:red;font-size:40px;}li:nth-of-type(2n+2){color:purple;font-size: 45px;}</style>
</head>
<body><ol><li class="one">床前明月光</li><li class="two">疑是地上霜</li><li class="three">举头望明月</li><li class="four">低头思故乡</li></ol></body>
</html>

在这里插入图片描述
(5)E:only-child 父亲只有一个孩子的，并且该孩子是E元素
E:only-of-type类似

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>p:only-child{color:red;}</style>
</head>
<body><div><p>床前明月光</p></div><div><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></div></body>
</html>

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

相关资讯

热文排行

最新新闻

推荐新闻

热搜词

《从因果关系的角度学习失真不变表示以用于图像恢复》学习笔记 【Docker】Docker入门了解 关于事件捕获和事件冒泡的理解 企业信息化5：免费开源的后勤管理系统 ray.rllib 入门实践-7： 加载训练好的模型 Java数据结构 (链表反转（LinkedList----Leetcode206))