Child elements in a list using Cufon_问答_开发者

开发者 https://www.devze.com 2023-01-04 19:48 出处：网络

I\'m trying to use Cufon on the parent li tags on a list and just regular text on the sub level items. The problem is cufon is applying it\'s styl开发者_C百科e to allitems. Is there a way to exclude s

I'm trying to use Cufon on the parent li tags on a list and just regular text on the sub level items. The problem is cufon is applying it's styl开发者_C百科e to all

items. Is there a way to exclude sub level items from Cufon?

I've tried .parent li a:not(.parent li ul li a) but it dosn't seem to work

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

Found this solution and it seems to be working:

ul.parent > li > a

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

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>