使用 Cufon 的列表中的子元素答案

【问题标题】：Child elements in a list using Cufon使用 Cufon 的列表中的子元素
【发布时间】：2010-06-28 15:23:24
【问题描述】：

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

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

我试过 .parent li a:not(.parent li ul li a) 但它似乎不起作用

【问题讨论】：

【解决方案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

【讨论】：

【解决方案2】：

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

ul.parent > li > a

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

【讨论】：

【解决方案3】：

这会在脚本标签中发送到您的<head>。确保您的 Cufon 库和字体文件存在并在您的替换方法之前添加。

<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>

这个只会选择 a，它们是 li 的子级，它们是 #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>

【讨论】：