CSS选择器：通用、元素、id、CLASS

2023-08-1109:50:45网页制作Comments767 views字数 1022阅读模式

选择所有元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

*{
}

元素选择器，就是“选中”相同的元素，然后对相同的元素定义同一个CSS样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

<p>Lorem</p>
<p>Lorem</p>
<div>Lorem</div>

p {
    color: red;
}

上述p元素选择器样式只会修改p元素的样式，不会修改div元素的样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”定义相同的class属性，对属于相同class的元素设置统一的样式。在CSS中使用"."来选择元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

<p class="g1">Lorem</p>
<p class="g1">Lorem</p>
<div class="g1">Lorem</div>

.g1 {
    background-color: gray;
}

注意：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

p.g1/*只有class="g1"的p元素会使用该样式*/

<p class="center large">这个段落使用两个样式。</p>

我们可以为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器，在CSS中使用"#" 来选择元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

<p class="g1" id="one">Lorem</p>
<p class="g1" id="two">Lorem</p>
<div class="g1" id="three">Lorem</div>

#one {
    background-color: red;
}

#two {
    background-color: yellow;
}

#three {
    background-color: green;
}

对多个元素使用同一样式，减少代码量（和类选择器相似，但是不用在每个元素上写class="xxxx"了）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

h1, h2, p {
  text-align: center;
  color: red;
}

后代选择器，就是选择元素内部中所有的某一种元素，包括子元素和其他后代元素（如“孙元素”）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

h1em {color:red;}

注意：两个元素之间的层次间隔可以是无限的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53550.html

3 种方式实现 CSS 弧形卡片