时间戳

首页 > 解决方案 > 对于 CSS，我如何定位此 Div 中的特定 P

html - 对于 CSS，我如何定位此 Div 中的特定 P

问题描述

我正在尝试在以下代码中定位 ap 。我想编写一个类来将文本阴影添加到该 p 的文本中。

我只是不知道要定位哪个类，以及正确的语法是什么。我以为是 .mainbg p { xxxxxx } 但这不起作用。

<section aria-label="home" class="mainbg" id="home">
  <!-- intro -->
  <div class="container">
    <div class="row">
      <div class="overlay-main v-align">
        <div class="col-md-10 col-xs-11">
          <h1 class="onStep" data-animation="animbouncefall" data-time="300">LOUIS WALLACE CONSTRUCTION</h1>
          <div
            class="onStep"
            data-animation="fadeInUp"
            data-time="600"
            id="slidertext"
            style=" text-shadow: 2px 1px 4px black;"
          >
            <h3 class="main-text">Oroville General Contractor</h3>
            <h3 class="main-text">Over A Decade Of Experience</h3>
            <h3 class="main-text">All Phases Of Construction</h3>
          </div>
          <p
            class="onStep"
            data-animation="animbouncefall"
            data-time="900"
            style="font-weight:500"
            style="text-shadow:20px 20px 20px black;"
          >
            No matter how large or small the project, we ensure that your project is completed with precision and
            professionalism. We take pride in our quality craftsmanship, our attention to detail, and our open line of
            communication with each and every customer. With each project, we understand that our role is about more
            than simply putting up walls — it’s about ensuring that your vision is turned into a reality.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

标签： htmlcss

解决方案

首先，css你的标签上有两个内联样式p，所以只有第一个会生效：

<p class="onStep" ... style="font-weight:500" style="text-shadow:20px 20px 20px black;">...</p>

它应该是：

<p class="onStep" ... style="font-weight:500; text-shadow:20px 20px 20px black;">...</p>

选择.mainbg p器应该可以正常工作，请记住，如果您有内联css，它将覆盖您的.mainbg p选择器。

在这种情况下尽量不要使用内联 css。

.mainbg p {
  font-weight:500;
  text-shadow:20px 20px 20px black;
}
<section aria-label="home" class="mainbg" id="home">

    <!-- intro -->
    <div class="container">
    <div class="row">
    <div class="overlay-main v-align">
      <div class="col-md-10 col-xs-11">

        <h1 class="onStep" data-animation="animbouncefall" data-time="300">LOUIS WALLACE CONSTRUCTION</h1>
        <div class="onStep" data-animation="fadeInUp" data-time="600" id="slidertext" style=" text-shadow: 2px 1px 4px black;">
          <h3 class="main-text">Oroville General Contractor</h3>
          <h3 class="main-text">Over A Decade Of Experience</h3>
          <h3 class="main-text">All Phases Of Construction</h3>
        </div>
        <p class="onStep" data-animation="animbouncefall" data-time="900">No matter how large or small the project, we ensure that your project is completed with precision and professionalism. We take pride in our quality craftsmanship, our attention to detail, and our open line of communication with each and every customer. With each project, we understand that our role is about more than simply putting up walls — it’s about ensuring that your vision is turned into a reality.
     </div>
    </div>
    </div>
 </div>

推荐阅读