Как выбрать простой HTML-текст в CSS? - PullRequest
4 голосов
/ 15 февраля 2012

Кто-нибудь из вас знает, как выбрать простой HTML-текст в CSS?

У меня есть следующая структура:

       <div id="A">
       <p class="caption"> caption1 </p>

        <div class="tabs">
             <div class='moving_bg'></div>

             <p class="text tab_item"> content</p>
             <p class="text tab_item"> content</p>
             <p class="text tab_item"> content</p>
             <p class="text tab_item"> content</p>
             <p class="text tab_item"> content</p>
             <p class="text tab_item"> content</p>

             caption2

             <p class="standardtext tab_item">content</p>
             <p class="standardtext tab_item"> content</p>
             <p class="standardtext tab_item"> content</p>


        </div>

Как выбрать caption2 в CSS?

Как только я назначаю ему класс или p-тэг, это нарушает структуру используемого мной плагина-вкладки.

Edit: Я использовал этот плагин и немного изменил его на:

var TabbedContent = {
init: function() {  
    $(".tab_item").mouseover(function() {

        var background = $(this).parent().find(".moving_bg");

        $(background).stop().animate({
            top: $(this).position()['top']
        }, {
            duration: 300
        });

        TabbedContent.slideContent($(this));

    });
},

slideContent: function(obj) {

    var margin =      $(obj).parent().parent().parent().parent().find(".slide_content").width();
    margin = margin * ($(obj).prevAll().size() - 1);
    margin = margin * -1;

        $(obj).parent().parent().parent().parent().find(".tabslider").stop().animate({
        marginLeft: margin + "px"
    }, {
        duration: 300
    });
}
}

$(document).ready(function() {
TabbedContent.init();
});

Ответы [ 4 ]

7 голосов
/ 15 февраля 2012

Вы не можете. Вы можете выбрать только элементы и псевдоэлементы / классы .

Возможно, вам удастся сойти с стиля .tabs, а затем переопределить стили на .tabs > *.

Как только я назначаю ему класс или p-тэг, это нарушает структуру используемого мной плагина-вкладки.

Затем отредактируйте плагин.

2 голосов
/ 08 февраля 2013

Вы можете использовать селектор * в верхней части вашего CSS.Сначала он будет стилизовать все элементы на вашей странице, даже простой текст, а затем применит правила для остальных ваших селекторов.

ПРИМЕЧАНИЕ : этот селектор известен как медленный, и выпридется переопределить любые проблемные правила в нем.(Отметьте CSS Lint )

* {
    font-size: 13px;
    color:red
}
(...)
0 голосов
/ 15 февраля 2012
.tabs { foo:bar; jim:jam }
.tabs > * { foo:original; jim:original } /* Every child element of tabs */

Это требует, чтобы вы знали, какие унаследованные / исходные значения, вероятно, переопределяют стили, уже объявленные, но это будет работать.

Если это слишком много стилей, вы можете изменить свои правила, например:

#a, #a .tabs > * { ...many styles applying generally ... }
.tabs { ...specific styles for just this element... }

Правила специфичности CSS приведут к тому, что правила, заданные вами специально для дочерних элементов, будут иметь приоритет над правилами, указанными в родительском элементе.

0 голосов
/ 15 февраля 2012

Вы должны выбрать его как часть <div class="tabs">, поэтому

div.tabs{
    /* whatever */
}

как оно существует в этом div.

Вам может потребоваться перезаписать некоторые стили в p.tab_item

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...