当前位置：首页 > news >正文

常见 CSS 选择器用法

news 2024/12/26 20:59:37

"Be Your Own Hero"

CSS选择器是一种模式，用于选择需要应用CSS样式的HTML元素。以下是一些基本的CSS选择器类型：

1.标签选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><style>p{font-size: 30px;color: aqua;}</style>
</head>
<body><p>hello world</p><p style="color: bisque; font-size: 10px;">passion</p><p>what's more</p>
</body>
</html>

在head标签里面进行操作，先写上style标签后，我们对p标签进行相应的操作，字体大小为30px，颜色为蓝色。那么我们在下面运用到p标签时，那么展示出来的效果就是如此了！当然第二个p标签除外，第二个p标签有自己的想法，在HTML中呢是采用“就近原则”进行展示的！

2.类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.hello{/* 居中 */text-align: center;color: blueviolet;}</style>
</head>
<body><h1>吃饭了吗</h1><h1 class = "hello">还没有呢</h1>
</body>
</html>

定义类选择器的时候，首先是一个 . 然后加上类名。使用的时候，我们在想要使用的标签上加上class = “类名”,此时这个标签就可以展示出相应的效果。

3.ID选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#name{font-family: 'Times New Roman', Times, serif;font-size: 30px;display: block;color: chartreuse;}</style>
</head>
<body><span>洗洗睡了吧</span><br><span id = "name">别玩手机了</span>
</body>
</html>

定义ID选择器的时候，首先是一个 # 然后加上类名。使用的时候，我们在想要使用的标签上加上id = “类名”,此时这个标签就可以展示出相应的效果。

4.复合选择器

1.空格表示后代

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div span{color: blueviolet;font-size: 30px;}</style>
</head>
<body><span>Composite selector</span><div><span>free from arrogance and impetuosity</span></div><ul><li>hello</li><span>world</span></ul>
</body>
</html>

span标签是写在div标签后面的，且中间有一个空格，那么此时表示的意思只要是div标签的后代且是span标签就可以展示出对应的效果。第一个span标签不是div标签的后代，就不会展示出相应的效果，那么第三个标签也是如此。

2.没空格表示交集（表示同时具备）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p.green{font-size: 30px;color: green;}</style>
</head>
<body><p>慎思笃行</p><p class="green">博学致新</p>
</body>
</html>

p标签之后紧接着是一个 .green ，可以从页面展示的效果中看出第一个p标签毫无变化，因为它不同时满足p标签和 .green 这两个条件，那么就展示不了相应的效果！

3.逗号表示并集

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.size , .color{color: coral;text-align: center;font-size: 30px;}</style>
</head>
<body><p class="size">心怀荣耀</p><p class="color">战至终章</p><p>不清楚</p>
</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>Document</title><style>ul > span{color: blueviolet;font-size: 30px;font-family: 'Times New Roman', Times, serif;}</style>
</head>
<body><ul><li><span>hello</span></li><span>CSS</span><li>看看怎么个事</li><span>不知道啊</span></ul>
</body>
</html>

ul标签和span标签中间有一个 > ,则表示想要展示相应的效果，必须满足是ul标签的“儿子”，不能是孙子。我们可以看出第一个span标签是ul的“孙子”，那么对应的内容是没有任何变化的！

5.通配符选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{color: blueviolet;font-size: 20px;text-align: center;}</style>
</head>
<body><span>hello</span><div>html</div><h1>hello</h1><h2>CSS</h2>
</body>
</html>

可以看出所有标签展示出来的效果都是一样的，它可以选择文档中的所有元素！

这里只是讲了一些简单的选择器，感兴趣的话可以去深入了解哦，通过学习各种 CSS 选择器，我们可以更精确地控制网页的样式，为用户提供更好的体验。记住，选择器不仅仅是选择元素的工具，它们还是构建和维护高效、可维护 CSS 代码的关键。希望你在之后的工作中，不断实践和优化你对 CSS 选择器的理解，创造出美丽、功能丰富的网页！

好的本期的内容就到这里了，期望下一期早一点再见吧，哈哈！！！

查看全文

http://www.mrgr.cn/news/64215.html