Question

我正在尝试在列表上的父li标签上使用Cufon，而在子级别项目上使用常规文本。问题是cufon正在将它的风格应用于所有

项目。有没有办法从Cufon中排除子级别的项目？

我试过.parent li a：not（.parent li ul li a）但它似乎无法正常工作

Answer 1

使用直接后代css选择器>。这将仅针对该元素的直接子女。

jQuery
$('.parent > ul > a')

css
.parent > ul > a {}

html
<ul class="parent">
    <li>
        <a>Cufon Here</a>
        <ul>
            <li><a>No Cufon Here</a></li>
        </ul>
    </li>
</ul>

有关http://www.w3.org/TR/CSS2/selector.html#child-selectors

的儿童选择器的更多信息

Answer 2

找到这个解决方案，它似乎正在起作用：

ul.parent＆gt; li>一个

通过http://groups.google.com/group/cufon/browse_thread/thread/06d09135431f6703

Answer 3

这将转到脚本标记中的<head>。确保在替换方法之前存在并添加了Cufon lib和字体文件。

<script src="assets/js/plugins/cufon-yui.js" type="text/javascript"></script>
<script src="assets/font/Futura_400.font.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/scripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    Cufon.replace('#mainnav > li > a, #sectionnav > li > a, h1',{fontFamily: 'Futura', hover: {color: '#58AD55'}});
</script>

此选项只会选择的孩子，这是 #mainnav 的孩子。只有第一级将由cufon取代。悬停方法允许您定义替换链接将具有哪种悬停颜色。

上面的示例将使用以下Html：

    <ul id="mainnav">
    <li><a href="#">Replaced by cufon</a>
        <ul>    
            <li><a href="#">Plain Text</a></li>
            <li><a href="#">Plain Text</a></li>
            <li><a href="#">Plain Text</a></li>
        </ul>    
    </li>
    <li><a href="#">Replaced by cufon</a>
        <ul>    
            <li><a href="#">Plain Text</a></li>
            <li><a href="#">Plain Text</a></li>
            <li><a href="#">Plain Text</a></li>
        </ul>    
    </li>
</ul>

使用Cufon的列表中的子元素

3 个答案: