Дочерние элементы в списке с использованием Cufon - PullRequest
Новая
       46

Дочерние элементы в списке с использованием Cufon

0 голосов
/ 28 июня 2010

Я пытаюсь использовать Cufon для родительских тегов li в списке и просто обычный текст для элементов подуровня.Проблема в том, что cufon применяет свой стиль ко всем

элементам.Есть ли способ исключить элементы подуровня из Cufon?

Я пробовал .parent li a: нет (.parent li ul li a), но, похоже, не работает

Ответы [ 3 ]

1 голос
/ 28 июня 2010

Использовать прямой потомок 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

0 голосов
/ 04 февраля 2011

Это относится к вашему <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 .Только первый уровень будет заменен на куфон.Метод наведения позволяет вам определить, какой цвет наведения будет иметь ваша замененная ссылка.

Пример выше будет работать со следующим 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 голосов
/ 28 июня 2010

Нашли это решение и похоже оно работает:

ul.parent> li> a

через http://groups.google.com/group/cufon/browse_thread/thread/06d09135431f6703

...