Logo

菜单

发布于 2026-01-06 0 阅读
0

CSS 选择器，简化版

CSS 选择器，简化版

我刚开始学习 CSS 的时候，只会用 class 和 id 选择器，别的什么都没用过。
后来我慢慢了解了 CSS 中其他一些选择元素的方法，接下来我会用图示来解释它们的工作原理。

那么，让我们开始吧。🎾

什么是CSS选择器？

CSS 选择器是一种用于识别、查找或调用 HTML 元素以便设置其样式的方法。
最常用的选择器是 `<select>`、`<style>`和`<style>` name of element，它们也称为 `<select> `。class selectors(.)id selectors (#)simple selectors

<html>
  <head>
     <style>
        body{
        background-color:#000;
        }
        .title{
         color:dodgerblue;
         }
        #wrapper{
        display:flex;
        justify-content: center;
        margin:0;
        padding:0;
    </style>
  </head>
       <body>
       <div id="wrapper">
       <div class="title">
       <p> This is the first text. </p>
       <p class="second-paragraph"> This is the second text. </p>
       </div>
       <p>This is the third paragraph</p>
       </div>
       </body>
</html>
Enter fullscreen mode Exit fullscreen mode

在上面的例子中，body` titleclass` 和wrapper`id` 用于引用带有它们的 `div` 元素。
我们也可以根据需要组合使用这些选择器：

p .second-paragraph{
color:red;
}
Enter fullscreen mode Exit fullscreen mode

在上面的代码中，使用了 aname和classselector 来确保只有p具有 class 的元素second-paragraph才会被选中。

还有其他选择器，本文主要关注这些选择器。
我们来看看*` <select>`、 >` <select> ~` 、`<select>` space、 `<select>`,和nth-of-type`<select>` 选择器，好吗？

*选择者

这个选择器被称为通用选择器，因为它用于选择页面中的所有元素。这意味着赋予通用选择器的任何样式都会影响该页面中的每个元素。
下面的代码片段会将页面上所有元素的文本样式设置为灰色并右对齐。

*{
color:grey;
text-align:right;
}
Enter fullscreen mode Exit fullscreen mode

选择器>和~选择器

这些选择器也称为组合器。它们用于实现不同的选择结果。`{{child}}`选择器用于选择特定元素的子元素，
而 `{{broken}} ` 选择器用于选择特定父元素的所有兄弟元素。以下 示例说明了这一点。>~

div > p{
color:blue
}
Enter fullscreen mode Exit fullscreen mode

上面的代码用于选择所有<p>作为 div 元素子元素的元素。

现在，看看这个

div~p{
color:red;
}
Here, every `<p>` element which is a sibling to a `div` element is styled red. In our previous example (the first code snippet), the paragraph which is on the same level and shares the same direct parent with any `<div>` will take up the red color.
Enter fullscreen mode Exit fullscreen mode

Space选择者

很多人会把>selector 和spaceselector 混淆。
我来解释一下。selector用于选择位于另一个元素内部的特定元素。
例如 ：space

div p{
color:green;
}
Enter fullscreen mode Exit fullscreen mode

上面的代码会选中元素<p>内部的所有标签<div>，即使它们之间有其他元素。
这与选择器的区别在于，>选择器>仅用于选择直接子元素。

所以如果我们有

div>p{
color:green;
}
Enter fullscreen mode Exit fullscreen mode

只有<p>直接属于该元素的子元素<div>才会被涂成绿色。

,选择者

这个功能也称为分组选择器，用于将具有相同样式的类或名称分组，以避免代码重复。
以下代码：

h3{
color:blue;
text-align:center;
font-weight:100;
}
p{
color:blue;
text-align:center;
font-weight:100;
}
.mid-text{
color:blue;
text-align:center;
font-weight:100;
}
Enter fullscreen mode Exit fullscreen mode

可以改写为

h3,p,.mid-text{
color:blue;
text-align:center;
font-weight:100;
}
Enter fullscreen mode Exit fullscreen mode

nth-of-type选择器

此选择器可用于选择nth特定类型父元素的子元素。n 可以是数字或关键字。
请考虑以下代码：

<html>
       <head>
              <style>
                   div:nth-of-type(1){
                    color:red;
                    }
                    div:nth-of-type(2){
                    color:blue;
                    }
                    div:nth-of-type(3){
                    color:green;
                    }
              </style>
       </head>
       <body>
             <div>
                 <p>This is the first paragraph</p>
             </div>
             <div>
                 <p>This is the first paragraph</p>
             </div>
             <div>
                 <p>This is the first paragraph</p>
             </div>
       </body>
</html>
Enter fullscreen mode Exit fullscreen mode

当然可以，欢迎在推特上联系我，感谢阅读。

文章来源：https://dev.to/amarachijohnson/css-selectors-simplified-129j
🎙️ Assembla：AI 驱...
理解 Docker：第 34 部分...