我已经设置了我的页面,以便在第一段内容上创建一个大的下限字母.这可以按预期工作,但是当我在受影响的元素之前有另一个具有指定类的div时,它会使得drop cap消失. 见例子……正确显示：htt
... . . 我已经设置了我的页面,以便在第一段内容上创建一个大的下限字母.这可以按预期工作,但是当我在受影响的元素之前有另一个具有指定类的div时,它会使得drop cap消失.
见例子……
正确显示：http://jsfiddle.net/KPqgQ/
显示不正确：http://jsfiddle.net/d73u9/
我的页面中有以下代码：
<section id="review"> <div class="content_right"></div> <div class="content_left"> <p>text</p> <p>text</p> </div> <div class="content_left"> <p>text</p> <p>text</p> </div></section>
使用以下CSS：
#review .content_left:first-of-type p:first-of-type{ padding-top:10px; } #review .content_left:first-of-type p:first-of-type:first-letter{ float: left; line-height:90%; padding-right: 15px; padding-bottom: 10px; font-family: "Georgia",_serif; font-weight: bold; font-size: 60px; color:black; } 创建一个大号首字母.
当我删除“content_right”div时,此代码有效,但在那里,CSS无效.我以为我有关于声明的正确顺序,但我必须遗漏一些东西.
有谁知道为什么这不按预期工作？
.解决方法
. 这是按预期的方式工作：第一个类型的选择器实际上选择特定类型的元素(section,div,span等)中的第一个,并且实际上不选择类的第一个类型.
备择方案
‘〜’修复
代字号’〜’变通方法提到了here.
/* Targets all paragraphs */p { display: block; clear: both;}/* Targets all paragraphs within divs in #review */#review div p{ padding-top:10px;}/* Targets the first letter within each paragraph */#review div p:first-letter{ float: left; line-height:90%; padding-right: 15px; padding-bottom: 10px; font-family: "Georgia",_serif; font-weight: bold; font-size: 60px; color:black;} /* Removes the padding from all except the first paragraphs */#review > div ~ div > p ~ p,#review > .content_left ~ .content_left p:first-of-type { padding-top: 0px; }/* Removes the first letter stylings of the non-first paragraphs within .content_left classes */#review > .content_left ~ .content_left p:first-of-type:first-letter,#review > div ~ div > p ~ p:first-letter { float: none; line-height:90%; padding-right: 0px; padding-bottom: 0px; font-family: "Georgia",_serif; font-weight: normal; font-size: 12px; } Example using ‘~’ Method
(感谢BoltClock,帮助我解决这个问题,这是他的方法.)
切换div命令
将.content_right div移到.content_left部分后面,因为它们是浮动的,你仍然可以保持相同的布局.
码：
<section id="review"> <div class="content_left"> <p>text</p> <p>text</p> </div> <div class="content_left"> <p>text</p> <p>text</p> </div> <div class="content_right"></div></section>
Example of switching order：
使用：nth-of-type选择器
使用：nth-of-type选择器选择合适的div.
码：
#review .content_left:nth-of-type(2) :first-child{ padding-top:10px;}#review .content_left:nth-of-type(2) :first-child:first-letter{ float: left; line-height:90%; padding-right: 15px; padding-bottom: 10px; font-family: "Georgia",_serif; font-weight: bold; font-size: 60px; color:black;} Example using :nth-of-type
. . .. ...