Вопрос по css, php, css-selectors – Упорядочить по специфике CSS

8

Моя главная цель - попытаться изменить порядок стилей CSS в зависимости от специфики. Я ранее помог отТАК и мне удалось произвести эту функцию.See gist.

Вот пример:

function specificity($selector){
// https://gist.github.com/2774085
}

$compare = function($a, $b) use ($specificity) {
    return $specificity($a) - $specificity($b)
};

$array = css_array();

uksort($array, $compare);

Вышеописанное работало отлично, пока я не наткнулся на этот CSS:

html, body, body div{
    background: transparent;
}
body {
    background-color: #D96F02;
}

Это переупорядочено в это:

body { // 1 point
    background-color: #D96F02;
}
html, body, body div{ // 4 points
    background: transparent;
}

Однако это не то, как браузер применяет CSS.

Я думаю, что моей функции специфичности может не хватать важности порядка CSS, а не порядка, основанного на специфичности селектора? Это правда?

Update

Я думаю, что я должен сделать, это в моей функции сравнения, я всегда должен добавить дополнительные точки, скажем10 потому что специфичность не просто основана на селекторах, она также основана на порядке селектора. Так что-то вроде этого:

 $compare = function($a, $b) use ($specificity) {
        return ($specificity($a) + 10) - $specificity($b)
    };

Как это выглядит и как определить количество баллов, которое нужно дать в этом случае !?

не является ли фоновое сокращение по умолчанию более избирательным? Вы пробовали это с background-color: прозрачным? albert
Я не согласен, что ваши расчеты специфичности верны. Что вы показываете как4 points на самом деле следует рассчитывать три отдельных рейтинга специфичности 1, 1 и 2. Запятые делают его тремя различными css-селекторами в одной строке, а не комбинирующим селектором, какhtml > body > div или что-то подобное. ScottS
@albert, вы говорите, что я должен делать заказы даже на уровне свойств CSS? Я думаю, что браузеры упорядочивают только по селектору, а затем применяют свойства CSS, верно? Abs
Хммм интересная проблема :) Расширение Firefox У Firebug это решено, но только для одного элемента (функция проверки). Попробуйте выяснить, как они это сделали. Начальная точка, может бытьcode.google.com/p/fbug/source/browse/branches/firebug1.10/… MatejB
Вы & APOS; повторноnever собираюсь сделать пуленепробиваемый & quot; CSS inliner & quot; если только ты неcompletely понять, как CSS и браузеры справляются с этим. Если угадаешь (+10 к специфичности ?!) она не будет надежной. Спецификация:w3.org/TR/CSS2/cascade.html. thirtydot

Ваш Ответ

1   ответ
4

html, body, body div{ 
    background: transparent; 
} 

как отдельные правила, как если бы они были написаны следующим образом:

html{ 
    background: transparent; 
} 
body{ 
    background: transparent; 
} 
body div{ 
    background: transparent; 
} 

Семантика немного сбивает с толку, но в основном вы судите всю декларацию на основе независимых селекторов, которые были объединены в один и тот же набор правил.

Re ваше обновление:специфичность не зависит от порядка выборато есть приведенные ниже правила имеют одинаковую специфику. Последнее правило будет иметь приоритетрендеринг в синем, если вы не измените правиларендеринг в красном:

<style>
    #container span {color:red;}
    div #content {color:blue;}
</style>

<div id="container"><span id="content">Hello world!</span></div>
Error: User Rate Limit Exceededa>bError: User Rate Limit Exceededa bError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Abs
Error: User Rate Limit Exceeded

Похожие вопросы