WordPress 上的 CSS

Question

我会尽力解释我的问题。我正在 Wordpress 中建立一个主题为 Avada 的博客，在主页中它将是 flexslider 幻灯片帖子。问题是我想更改元素符号导航的样式，当我将 css 更改为:

.fusion-flexslider .flex-control-nav {
    position: static;
    background-image:url(http://electroriver.pt/wp-content/uploads/2013/05/sharp-corner13px-000000.png);
    background-position: left bottom;
    position:relative;
    left: auto;
    height:30px;
}

它还改变了其他类型的博客文章(网格、时间线、大)。我需要的是只有具有此配置的 flexslider，其他配置正常。

如果您想查看网页是 http://www.electroriver.pt

希望你能帮我解决这个问题。

非常感谢

我一直有同样的问题!我想我没有正确解释我的问题。我有一个 flexslider post slider，在幻灯片的末尾，我想放置一个背景图像，就像我在菜单中的配置一样。那个图像里面应该有子弹。问题是当我使用我在第一条消息中发布的代码更改 CSS 时，所有其他类型帖子中的特色图片都采用相同的配置。

我把帖子内容的所有html都传过去了，我已经把页面取出来了http://wwww.electroriver.pt css 这样你就可以看到 slider 的原始版本是什么了。~

谢谢。

HTML 代码:

<div class="post-content">
				<div class="fusion-flexslider flexslider flexslider-posts"><ul class="slides"><li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;"><a href="http://electroriver.pt/proin-sodales-quam-nec-ante-sollicits/"><img src="http://electroriver.pt/wp-content/uploads/2012/07/Untitled-1.png" alt="Proin Sodales Quam Nec Sollicit" draggable="false"></a><div class="slide-excerpt"><h2><a href="http://electroriver.pt/proin-sodales-quam-nec-ante-sollicits/">Proin Sodales Quam Nec Sollicit</a></h2></div></li><li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" class=""><a href="http://electroriver.pt/nunc-tincidunt-elit-non-cursus/"><img src="http://electroriver.pt/wp-content/uploads/revslider/captions_tall/portfolio_1-e1414781863983.jpg" alt="Nunc Tincidunt Elit Cursus" draggable="false"></a><div class="slide-excerpt"><h2><a href="http://electroriver.pt/nunc-tincidunt-elit-non-cursus/">Nunc Tincidunt Elit Cursus</a></h2></div></li></ul><ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a class="">2</a></li></ol><ul class="flex-direction-nav"><li><a class="flex-prev" href="#"></a></li><li><a class="flex-next" href="#"></a></li></ul></div><div class="fusion-sep-clear"></div><div class="fusion-separator fusion-full-width-sep sep-none" style="border-color:#e0dede;margin-top:30px;"></div><div class="fusion-blog-shortcode fusion-blog-grid fusion-blog-infinite"><div class="fusion-posts-container posts-container-infinite grid-layout grid-layout-2 isotope" style="position: relative; height: 569px;"><div id="post-209" class="post-209 post type-post status-publish format-standard has-post-thumbnail hentry category-design blog-grid col-lg-6 col-md-6 col-sm-6" style="width: 378px; position: absolute; left: 0px; top: 0px;">
<div class="post-content-wrapper">						
			
			
			
									<div class="fusion-flexslider flexslider post-slideshow">
										<ul class="slides">
																									<li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
						<div class="image" aria-haspopup="true">
																<img width="800" height="481" src="http://electroriver.pt/wp-content/uploads/2012/07/Untitled-1.png" class="attachment-full wp-post-image" alt="Untitled-1" draggable="false">																<div class="image-extras">
									<div class="image-extras-content">
																				<a style="display:inline-block;" class="icon link-icon" href="http://electroriver.pt/proin-sodales-quam-nec-ante-sollicits/">Permalink</a>
																				<a style="display:inline-block;" class="icon gallery-icon" href="http://electroriver.pt/wp-content/uploads/2012/07/Untitled-1.png" rel="prettyPhoto[gallery209]" title=""><img style="display:none;" alt="" draggable="false">Gallery</a>
										<h3><a href="http://electroriver.pt/proin-sodales-quam-nec-ante-sollicits/">Proin Sodales Quam Nec Sollicit</a></h3>
										<h4><a href="http://electroriver.pt/category/design/" rel="tag">Design</a></h4>
									</div>
								</div>
						</div>
					</li>
														</ul>
			<ol class="flex-control-nav flex-control-paging"></ol><ul class="flex-direction-nav"><li><a class="flex-prev flex-disabled" href="#" tabindex="-1"></a></li><li><a class="flex-next flex-disabled" href="#" tabindex="-1"></a></li></ul></div>
			<div class="post-content-container"><h2 class="entry-title"><a href="http://electroriver.pt/proin-sodales-quam-nec-ante-sollicits/">Proin Sodales Quam Nec Sollicit</a></h2><div class="entry-meta-single vcard"><p class="entry-meta-details">By <span class="entry-author fn"><a href="http://electroriver.pt/author/joaofreitas/" rel="author">joaofreitas</a></span><span class="meta-separator">|</span><span class="entry-time"><span class="updated" style="display:none;">2014-10-31T18:50:45+00:00</span><time class="published">Julho 31st, 2012</time></span><span class="meta-separator">|</span></p></div><div class="content-sep"></div><div class="excerpt-container strip-html"><p>Quisque ligula ipsum, euismod aturesit vulputate a, ultricies et elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor […]</p>
</div><p class="entry-read-more"><a href="http://electroriver.pt/proin-sodales-quam-nec-ante-sollicits/">Read More</a></p><p class="entry-comments"><a href="http://electroriver.pt/proin-sodales-quam-nec-ante-sollicits/#respond" title="Comentário em Proin Sodales Quam Nec Sollicit"><i class="fusionicon-bubbles"></i>&nbsp;0</a></p><div class="fusion-clearfix"></div></div><div class="fusion-clearfix"></div></div>
</div><div id="post-207" class="post-207 post type-post status-publish format-standard has-post-thumbnail hentry category-design blog-grid col-lg-6 col-md-6 col-sm-6" style="width: 378px; position: absolute; left: 418px; top: 0px;">
<div class="post-content-wrapper">						
			
			
			
									<div class="fusion-flexslider flexslider post-slideshow">
										<ul class="slides">
																									<li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
						<div class="image" aria-haspopup="true">
																<img width="700" height="400" src="http://electroriver.pt/wp-content/uploads/revslider/captions_tall/portfolio_1-e1414781863983.jpg" class="attachment-full wp-post-image" alt="portfolio_1.jpg" draggable="false">																<div class="image-extras">
									<div class="image-extras-content">
																				<a style="display:inline-block;" class="icon link-icon" href="http://electroriver.pt/nunc-tincidunt-elit-non-cursus/">Permalink</a>
																				<a style="display:inline-block;" class="icon gallery-icon" href="http://electroriver.pt/wp-content/uploads/revslider/captions_tall/portfolio_1-e1414781863983.jpg" rel="prettyPhoto[gallery207]" title=""><img style="display:none;" alt="" draggable="false">Gallery</a>
										<h3><a href="http://electroriver.pt/nunc-tincidunt-elit-non-cursus/">Nunc Tincidunt Elit Cursus</a></h3>
										<h4><a href="http://electroriver.pt/category/design/" rel="tag">Design</a></h4>
									</div>
								</div>
						</div>
					</li>
														</ul>
			<ol class="flex-control-nav flex-control-paging"></ol><ul class="flex-direction-nav"><li><a class="flex-prev flex-disabled" href="#" tabindex="-1"></a></li><li><a class="flex-next flex-disabled" href="#" tabindex="-1"></a></li></ul></div>
			<div class="post-content-container"><h2 class="entry-title"><a href="http://electroriver.pt/nunc-tincidunt-elit-non-cursus/">Nunc Tincidunt Elit Cursus</a></h2><div class="entry-meta-single vcard"><p class="entry-meta-details">By <span class="entry-author fn"><a href="http://electroriver.pt/author/joaofreitas/" rel="author">joaofreitas</a></span><span class="meta-separator">|</span><span class="entry-time"><span class="updated" style="display:none;">2014-10-31T18:55:07+00:00</span><time class="published">Julho 31st, 2012</time></span><span class="meta-separator">|</span></p></div><div class="content-sep"></div><div class="excerpt-container strip-html"><p>Quisque ligula ipsum, euismod a vulputate a, ultricies et elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor […]</p>
</div><p class="entry-read-more"><a href="http://electroriver.pt/nunc-tincidunt-elit-non-cursus/">Read More</a></p><p class="entry-comments"><a href="http://electroriver.pt/nunc-tincidunt-elit-non-cursus/#respond" title="Comentário em Nunc Tincidunt Elit Cursus"><i class="fusionicon-bubbles"></i>&nbsp;0</a></p><div class="fusion-clearfix"></div></div><div class="fusion-clearfix"></div></div>
</div><div class="fusion-clearfix"></div></div></div><div class="fusion-sep-clear"></div><div class="fusion-separator fusion-full-width-sep sep-none" style="border-color:#e0dede;margin-top:40px;margin-bottom:40px;"></div>
							</div>

Answer 1

在这种情况下，您需要为此 slider 添加一个特定的 ID(或类)，因此不会影响任何其他元素。

#specific-id.fusion-flexslider .flex-control-nav {
  background-image: url(http://electroriver.pt/wp-content/uploads/2013/05/sharp-corner13px-000000.png);
  background-position: left bottom;
  position: relative;
  left: auto;
  height: 30px;
}