[分享]css只在某个元素中生效

如何让CSS只在某个元素中生效呢？方法一： 给元素添加类名 在CSS中为该类添加样式 这是需要添加样式的元素 CSS: .box p { color: red; } 这样就只有.box中的p标签会...

如何让CSS只在某个元素中生效呢？

方法一：
给元素添加类名
在CSS中为该类添加样式

<div class="box">
  <p>这是需要添加样式的元素</p>
</div>

CSS:
.box p {
  color: red;
}
这样就只有.box中的p标签会被样式修改。

方法二：
使用伪元素
在需要样式的元素中使用::before或者::after伪元素

<p class="caption">这是标题</p>

CSS:
.caption::before {
  content: "";
  display: block;
  height: 2px;
  background-color: red;
}

这样就只有.caption元素的::before伪元素被样式修改。

方法三：
使用后代选择器
在需要样式的元素的父元素中设置后代选择器

<div class="wrapper">
  <p>这是需要添加样式的元素</p>
</div>

CSS:
.wrapper p {
  color: red;
}

这样就只有.wrapper中的p标签会被样式修改。

方法四：
使用ID选择器
给需要样式的元素添加ID，通过ID选择器为其添加样式

<p id="name">这是姓名</p>

CSS:
#name {
  color: red;
}

这样就只有ID为name的元素会被样式修改。