Question

我正在尝试在以下代码中定位p。我想编写一个类以将text-shadow添加到该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>

Answer 1

首先，您在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>

Answer 2

向div添加ID并仅定位<p>标签：

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

    <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.
 </div>
</div>
</div>

#divwithp p{
//properties here
}

您也可以仅使用<p>来定位class标签：

.onStep{
//properties here
}

Answer 3

定位特定

标记的最佳方法是给它一个id

<p id="myPTag"></p>

Themn，您可以像这样从CSS中引用它：

#myPTag {

    // Code here...
}

如果您对所有p标签都感兴趣，则可以从CSS中进行以下操作：

div p {
    // Code here...
}

或者您可以执行以下操作：

#home p {
    // Code here...
}

P.S。正如Caiovisk指出的那样，.mainbug p {也应该起作用。

如何针对CSS在此Div中定位特定的P

3 个答案: