Как переопределить стили из вкладок пользовательского интерфейса JQuery?

Я использую JQuery 1.12 с JQuery UI (1.12). Я хочу, чтобы переопределить отступы, который вставляется в каждой вкладке, но только на некоторых небольших мобильных браузеров, поэтому я определил это в моем CSSКак переопределить стили из вкладок пользовательского интерфейса JQuery?

@media only screen and (max-width: 400px) { 
    .ui-tabs .ui-tabs-nav { 
     margin: 0px; 
    } 
    .ui-tabs .ui-tabs-nav .ui-tabs-anchor { 
     padding: .5em .5em; 
    } 
}

Однако, когда я загрузить мою страницу на мобильном браузере эмулятора Mac Хрома (в основном Mac Chrome), хотя я вижу, что мои стили включены в Teh insepctor классы по умолчанию принимают приоритет над моими классами ...

.ui-tabs .ui-tabs-nav .ui-tabs-anchor { 
float: left; 
padding: .5em 1em; 
text-decoration: none; 
} 

@media only screen and (max-width: 400px) 
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { 
    padding: .5em .5em; 
}

Я не могу понять, как скопировать его должным образом в SO, но есть удар по линии над «пропиской: .5em .5em;» в разделе мультимедиа, указав, что оно было отменено. Как сделать вкладку CSS в определении пользовательского интерфейса приоритетом?

источник

2017-01-21 Anonymous

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity и, в крайнем случае, вы всегда можете добавить '! Important' к своим правилам, чтобы вызвать определенность. –

Я, может быть, путаю свою терминологию, но по «специфичности» вы имеете в виду, что вещь с «специфичностью» уважается над тем, чего нет? –

Специфика относится к силе CSS-селектора. Как и для '

',' # foo' имеет более высокую специфичность, чем '.whatever'. Поэтому, если вы определяете как '# foo', так и' .whatever', '# foo' будет иметь приоритет, независимо от того, где он определен, потому что он имеет более высокую специфичность. –

Использование !imporant является highly discouraged. Правильный способ усилить специфичность в этом случае было бы вдоль линий:

@media only screen and (max-width: 400px) { 
    .ui-tabs ul.ui-tabs-nav { 
     margin: 0px; 
    } 
    .ui-tabs ul.ui-tabs-nav a.ui-tabs-anchor { 
     padding: .5em .5em; 
    } 
}

Я усиливая специфичность с ul и a селекторов. Другие связаны с официальной документацией, но я хочу повторить, что существует множество способов сделать это. Я мог бы так же легко сделать что-то общее, например, добавить селектор html или body в начало каждого правила.

@media only screen and (max-width: 400px) { 
    body .ui-tabs .ui-tabs-nav { 
     margin: 0px; 
    } 
    body .ui-tabs .ui-tabs-nav .ui-tabs-anchor { 
     padding: .5em .5em; 
    } 
}

источник

2017-01-24 16:19:39

Спасибо, что сработал. Я не даю мне награду за другой день, поэтому я вернусь тогда. –

Это будет делать это:

@media only screen and (max-width: 400px) { 
    .ui-tabs .ui-tabs-nav { 
    margin: 0px !important; 
    } 
    .ui-tabs .ui-tabs-nav .ui-tabs-anchor { 
    padding: .5em .5em !important; 
    } 
}

http://www.standardista.com/css3/css-specificity/ объясняет специфику более подробно, но приведенный выше код будет работать, потому что важное заявление будет вне указать стандартные стили!.

источник

2017-01-24 16:18:17 mayersdesign

Использование !important очень уродливая и плохая идея! Try STH так:

@media only screen and (max-width: 400px) { 
    .ui-tabs.ui-tabs ul.ui-tabs-nav { 
     margin: 0px; 
    } 
    .ui-tabs.ui-tabs ul.ui-tabs-nav a.ui-tabs-anchor { 
     padding: .5em .5em; 
    } 
}

Это увеличит приоритет синтаксиса CSS.

источник

2017-01-24 19:05:01 Darex1991

Как переопределить стили из вкладок пользовательского интерфейса JQuery?

ответ

Смежные вопросы