wordpress上的Css

Question

我会试着解释我的问题。我正在建立一个以Avada为主题的Wordpress博客，在主页上它将是flexslider幻灯片放映帖子。问题是我想要更改bullet的导航样式，并且当我将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;
}

它还改变了其他类型的博客帖子(网格，时间线，大)。我需要的是只有这个配置的挠性滑块和其他正常。

如果你想看一看网页是http://www.electroriver.pt

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

非常感谢

我一直在解决同样的问题！我想我没有正确地解释我的问题。我有一个挠性滑块后滑块，在幻灯片的末尾，我想放一个背景图像，就像我在菜单中的配置一样。在这张图片里面应该有子弹。问题是，当我使用css来改变它时，我在第一条消息中发布的代码，所有其他类型的帖子中的特色图片都采用了相同的配置。

我传递了所有的html的文章内容，我已经从页面http://wwww.electroriver.pt的css，这样你就可以看到什么是原始版本的滑块。

谢谢。

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

在这种情况下，您需要为此滑块添加特定的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;
}

Answer 2

如果您只想设置第一组滑块项目符号的样式，则需要向选择器添加更多项目符号。所以如果你只想定位第一个滑块，你可以这样做：

.post-content .fusion-flexslider:first-child .flex-control-nav{
    /* Styles Go Here */
}

它使用:first子选择器只选择父元素内的第一个实例。

http://www.w3schools.com/cssref/sel_firstchild.asp

Answer 3

你的代码：

`.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;
}   `

在它之前和之后都有一个‘。去掉它，你的样式(网格和其他所有东西)应该又没问题了。

编辑:这似乎是发问者的一个错误。不管如何，你的目标是整个导航(而不是点)，而你提供的图像只是一个大的黑盒。如果您正在尝试专门针对这些点，请使用以下命令：.flex-control-paging li a

此外，如果您希望仅针对主页，则可以在body标记中使用类home。您可以使用.home .flex-control-paging li a在滑块中定位主页上的项目符号。