为一个重复出现的元素分配一个box-shadow

时间:2015-02-11 14:45:41

标签: html css wordpress

我的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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

只需将您想要投影的<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