Как получить доступ к свойствам стиля псевдоэлементов с помощью jQuery?

Для контекста это продолжение предыдущего вопроса. Вместо того, чтобы копаться в cssRules, я хотел бы основывать логику на селекторах jQuery, которые ищут эффекты этих правил.

Учитывая свойства по умолчанию

.commentarea .author:before {
    background-image: url(http://...);
    background-position: -9999px -9999px;
    /* ... */
}

которые выборочно модифицируются, как в

.author[href$="gbacon"]:before /* ... */ {
  content: "";
  background-position: 0 -140px
}

как я могу выбрать псевдоэлементы, соответствующие позиции фона которых имеют значения по умолчанию? Копирование селектора как в

GM_log("size = " + $(".commentarea .author:before").size());

ничего не соответствует. Попытка .siblings() с

$(".commentarea .author")
  .map(function(i) {
         GM_log($(this)
                  .siblings()
                  .map(function (i) { return $(this).css("background-image") })
                  .get()
                  .join(", "))
       });

производит только none значений.

Для получения полной информации см. страницу в реальном времени. Это возможно?


person Greg Bacon    schedule 18.09.2010    source источник
comment
Итак, в основном вы хотите выбрать .class1 .class2, если фоновое изображение и положение элементов являются значениями по умолчанию (на основе правила CSS)?   -  person Chris Laplante    schedule 19.09.2010
comment
Не могли бы вы опубликовать фрагмент HTML-кода, с которым работаете?   -  person Chris Laplante    schedule 19.09.2010
comment
@SimpleCoder Я хочу выбрать .class1 .class2, если по умолчанию используется фоновое положение соседнего псевдоэлемента.   -  person Greg Bacon    schedule 19.09.2010
comment
@ Грег Бэкон; псевдоэлементы :before и :after обычно используются для вставки содержимого (w3schools.com/CSS/pr_pseudo_before. asp). Селектор CSS работает? Я никогда не видел, чтобы его использовали таким образом.   -  person Chris Laplante    schedule 19.09.2010
comment
@ Грег Бэкон: Однако я все еще могу предложить решение. Под соседством вы имеете в виду в любом направлении?   -  person Chris Laplante    schedule 19.09.2010
comment
@SimpleCoder См. Обновленный вопрос.   -  person Greg Bacon    schedule 19.09.2010
comment
Вы правильно отрисовываете CSS?   -  person Joberror    schedule 19.09.2010
comment
@joberror См. страницу в реальном времени.   -  person Greg Bacon    schedule 19.09.2010


Ответы (1)


Вы не можете использовать такие псевдоэлементы :before и :after. Их цель - вставить контент до и после (соответственно) указанного вами селектора.

Пример использования:

HTML:

<span class='a'>
    Outer
    <span class='b'>
        Inner
    </span>
</span>

CSS:

.a .b:before {
    content: "|Inserted using :before|";
}

.a {
    color: blue;
}

.b {
    color: red;
}

Результат:

http://jsfiddle.net/mzcp6/

Произошло то, что текст |Inserted using :before| был вставлен перед (ну, действительно, перед ним) внутренним диапазоном, потому что это был класс b и потомок элемента класса a. Обычно :before и :after не выбираются; они видоизменяются.

Пример:

Это не работает должным образом:

HTML:

<span class='a'>
    <p>More text</p>
    <span class='b'>
        <p>More text</p>
        Inner
    </span>
</span>

CSS:

.a .b:before {
    text-size: 100px;
}

Ничего не произошло:

http://jsfiddle.net/bQ2ty/

РЕДАКТИРОВАТЬ:

:before не является допустимым селектором jQuery: http://api.jquery.com/category/selectors/

Я думаю, вам нужно будет использовать что-то другое, кроме :before, или попытаться извлечь исходное правило с помощью плагина jQuery: http://flesler.blogspot.com/2007/11/jqueryrule.html

person Chris Laplante    schedule 18.09.2010
comment
Я думаю, также будет хорошо отметить, что контент, созданный :before и :after, на самом деле не отображается в DOM (потому что они чисто презентационные), поэтому действительно нет способа выбрать их с помощью jQuery. - person Yi Jiang; 19.09.2010
comment
@Yi Jiang - Именно так; Я тоже это заметил, но не упомянул. Спасибо. - person Chris Laplante; 19.09.2010