将长方体阴影分配给一个重复出现的元素

Question

我的CCS代码是

.isotope {
     box-shadow: 0px 8px 15px;
}

我也试过

#content .isotope {
     box-shadow: 0px 8px 15px;
}

和

.portfolio-wrapper .isotope {
     box-shadow: 0px 8px 15px;
}

但是这些不会显示长方体阴影。

问题是我只想把这个长方体阴影应用到一个div上。元素是一个使用短代码的项目组合，位于几个页面上。我只想在首页上的投资组合位于框阴影。我正在努力将它准确地应用到我想要的地方，它突然出现在任何地方！

我不是很擅长HTML，这可能是荒谬的帖子，我真的不知道，但以防万一它可以帮助我…

​

<div id="content" class="portfolio-four">
  <div class="portfolio-wrapper isotope" style="position: relative; overflow: hidden; height: 232px;">
    <div class="portfolio-item  isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);">
      <div class="project-feed clearfix">
        <div class="ch-item portfolio-4">
          <div class="ch-info portfolio-4">
            <div class="ch-info-front4 ">
              <img src="http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/aqua-sana-7-220x161.jpg">
            </div>
            <div class="ch-info-back4  portfolio-4" style="background-image:url(http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/aqua-sana-7-220x161.jpg);">
              <div class="info"><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=aqua-sana"><i class="icon-search"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="portfolio_details">
        <h3><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=aqua-sana">Aqua Sana</a></h3>
        <div class="tags"><i class="icon-tag"></i>
        </div>
      </div>
    </div>
    <div class="portfolio-item clients projects  isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(228px, 0px, 0px);">
      <div class="project-feed clearfix">
        <div class="ch-item portfolio-4">
          <div class="ch-info portfolio-4">
            <div class="ch-info-front4 ">
              <img src="http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/photo-1-32-220x161.jpg">
            </div>
            <div class="ch-info-back4  portfolio-4" style="background-image:url(http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/photo-1-32-220x161.jpg);">
              <div class="info"><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=center-parcs-2"><i class="icon-search"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="portfolio_details">
        <h3><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=center-parcs-2">Center Parcs</a></h3>
        <div class="tags"><i class="icon-tag"></i><a href="http://tandc.puerteaspecialists.co.uk/?portfolio_category=clients" rel="tag">clients</a>, <a href="http://tandc.puerteaspecialists.co.uk/?portfolio_category=projects" rel="tag">Projects</a>
        </div>
      </div>
    </div>
    <div class="portfolio-item bespoke  isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(456px, 0px, 0px);">
      <div class="project-feed clearfix">
        <div class="ch-item portfolio-4">
          <div class="ch-info portfolio-4">
            <div class="ch-info-front4 ">
              <img src="http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/51-220x161.jpg">
            </div>
            <div class="ch-info-back4  portfolio-4" style="background-image:url(http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/51-220x161.jpg);">
              <div class="info"><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=bespoke"><i class="icon-search"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="portfolio_details">
        <h3><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=bespoke">Bespoke</a></h3>
        <div class="tags"><i class="icon-tag"></i><a href="http://tandc.puerteaspecialists.co.uk/?portfolio_category=bespoke" rel="tag">Bespoke</a>
        </div>
      </div>
    </div>
    <div class="portfolio-item  isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(684px, 0px, 0px);">
      <div class="project-feed clearfix">
        <div class="ch-item portfolio-4">
          <div class="ch-info portfolio-4">
            <div class="ch-info-front4 ">
              <img src="http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/photo-1-26-220x161.jpg">
            </div>
            <div class="ch-info-back4  portfolio-4" style="background-image:url(http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/photo-1-26-220x161.jpg);">
              <div class="info"><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=shop-and-bar-fitting"><i class="icon-search"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="portfolio_details">
        <h3><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=shop-and-bar-fitting">Shop and Bar Fitting</a></h3>
        <div class="tags"><i class="icon-tag"></i>
        </div>
      </div>
    </div>
    <div class="portfolio-item bedrooms  isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(912px, 0px, 0px);">
      <div class="project-feed clearfix">
        <div class="ch-item portfolio-4">
          <div class="ch-info portfolio-4">
            <div class="ch-info-front4 ">
              <img src="http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/photo-1-15-220x161.jpg">
            </div>
            <div class="ch-info-back4  portfolio-4" style="background-image:url(http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/photo-1-15-220x161.jpg);">
              <div class="info"><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=bedrooms"><i class="icon-search"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="portfolio_details">
        <h3><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=bedrooms">Bedrooms</a></h3>
        <div class="tags"><i class="icon-tag"></i><a href="http://tandc.puerteaspecialists.co.uk/?portfolio_category=bedrooms" rel="tag">Bedrooms</a>
        </div>
      </div>
    </div>
  </div>
</div>

​

Answer 1

只需在唯一标识符上给出您想要的投影的<div>即可。

类的目的是提供一个标识符，以便将样式应用于多个元素。id的目的是提供唯一的标识符，以便将样式应用于特定元素。

因此，最简单的选择是为您试图设置样式的<div>提供一个惟一的id。

<div id="front-page" class="portfolio-wrapper isotope"> ....CODE....</div>

然后将以下内容添加到CSS中：

#front-page .isotope {
   box-shadow: 0px 8px 15px;
}

有关选择器的基本概述，请参阅http://www.w3schools.com/css/css_selectors.asp。