当前位置：文江博客话题详情

使用 Cufon 的列表中的子元素

发布于 2024-09-07 12:10:58 字数 170 浏览 4 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

总以为 2024-09-14 12:10:58

使用直接后代 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

Use the direct descendant css selector >. This will target only that element's direct children.

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>

More info about child selectors at http://www.w3.org/TR/CSS2/selector.html#child-selectors

回复收藏 0 原文

千寻… 2024-09-14 12:10:58

找到了这个解决方案，它似乎有效：

ul.parent >力>通过

http://groups.google.com/group/cufon/browse_thread/线程/06d09135431f6703

回复收藏 0 原文

无尽的现实 2024-09-14 12:10:58

这将转到脚本标记内的。确保您的 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 的子级，而 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>

This goes to your <head> within a script tag. Make sure that your Cufon lib and the font file is present and added before your replace method.

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

This one will only select a which are child of li which are child of #mainnav.
Only the first level will be replaced by cufon. The Hover Method let you define which hover color your replaced links will have.

Example above will work with following 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>

回复收藏 0 原文

~没有更多了~