как отменить каскадирование или наследование

@ninja2 · Регистрация: 26.09.2012

Author24 — интернет-сервис помощи студентам

Привет!
Создал плагин для вордпресс и вывожу таблицу через шорткод в клиентской части, к таблице применяю класс свой и ему задаю стили и эти стили не работаю их перекрывают стили самой темы.
Как сделать чтобы например было блок <div class="my"><table>....</table></div>, чтобы в блоке <div> любой html не наследувал стили от других классов.
Нада такой стиль написать чтобы отображалась таблица одинаково во всех темах, а не так что от каждой темы стили перекрывают все мои стили
Я использовал !important тогда работает свойство мое, а если в теме будут куча свойств что в моем стиле не определены, мне что нужно все стили что есть определять и ставить !important чтобы не перекрывались? Как правильно сделать и отменить каскадирование или как оно называется наследование?

Добавлено через 40 минут
от есть класс который в теме вордпресс

CSS

.entry-content th, .comment-content th {
    font-weight: 700;
    padding: 8px;
    text-transform: uppercase;
}

и от стиль который я создал

CSS

.tab th{
    /*all:unset;*/
    /*!important;*/
    border:0px;
    background: #34495E;
    color: #ecf0f1;
    padding: 20px;
    font-size:16px;
}

от это text-transform: uppercase; у меня появляется и весь текст большими буквами пишется, как сделать чтобы стили не наследовались? Щас это наследуется в одной теме, в другой еще какое то свойство наследоваться будет. Как убрать это text-transform: uppercase?

Вот консоль, мой падинг перечеркнутый, и добавился левый текст большими символами:

как отменить каскадирование или наследование

Понял как padding сделать чтобы мой применился, нужно повысить специфичность.
В моем стиле и в стиле из темы получается одинаковая специфичность по 11
Определил класс по другому table.one th и тут уже 12 и padding применился.
Как отменить text-transform: uppercase; и все другие возможные стили которые могут быть в других темах?

@boilzzz · 26.05.2016, 08:21

(Тут был урл на !importent)Упс не заметил, делай как я пиши сайты без cms. А так я думаю да придётся каждому стилю, либо постораться повысить приоретет стиля

@mrtoxas · 26.05.2016, 09:45

Сложно так сказать, не видя всей картины. text-transform: uppercase убирается стилем text-transform: none. Можно попытаться так написать:

CSS

1
2
3

.my th{
text-transform: none !important;
}

Или изменить стили в самом шаблоне.
А сайт уже в интернете?

@ninja2 · 26.05.2016, 10:00 **[ТС]**

Сообщение от mrtoxas

А сайт уже в интернете?

Нет, это просто тренируюсь стили делать.

От наследование в css похоже нельзя отменить, а для того чтобы классы без !importent применялись нужно приоритет повышать можно два класса назначить таблице и так прописать .tab.one th и приоритет уже 21 выше.
Или один класс и так table.one th, или от так по одному классу каждому table.tab th.tab-th так еще выше 22.

А как лучше приоритеты повышать по нормальному?

@mrtoxas · 26.05.2016, 10:09

Есть же табличка. По ней сидеть и играться.

* {} /* a=0 b=0 c=0 -> специфичность = 0 */
li {} /* a=0 b=0 c=1 -> специфичность = 1 */
li:first-line {} /* a=0 b=0 c=2 -> специфичность = 2 */
ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */
ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */
ul li.red {} /* a=0 b=1 c=2 -> специфичность = 12 */
li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */
#t34 {} /* a=1 b=0 c=0 -> специфичность = 100 */
#content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */

А еще можно подумать не только о том, как повысить специфичность своих стилей, а еще заодно - как понизить ее для родных

@ninja2 · 26.05.2016, 10:59 **[ТС]**

Сообщение от mrtoxas

li:first-line {} /* a=0 b=0 c=2 -> специфичность = 2 */

Сдесь не правильно, для псевдокласов специфичность 10, значит тут 11 общая

Добавлено через 15 минут
а не это псевдоэлемент за него +1

тут способ придумал как перекрыть все классы, создать див и ему два класса присвоить <div class="hight priority">
и дальше таблицу определять без всяких заморочек hight.priority table{} и hight.priority td{} и остальные вроде получается стили не замороченые и всегда наш будет перекрывать без !important

@mrtoxas · 26.05.2016, 11:11

Сообщение от ninja2

Здесь не правильно

Все здесь правильно. :first-line это псевдоэлемент, а не псевдокласс.

Добавлено через 6 минут
Можно вообще убрать из родных стилей uppercase и использовать его там, где это конкретно нужно, но почему-то мне кажется, что это будет крайне редко

@Htext · 26.05.2016, 20:00

Сообщение от ninja2

как сделать чтобы стили не наследовались?

Вроде бы, стандартный метод: присвоить свойству значение "auto". При этом значение должно сброситься.

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	26.05.2016, 08:21	2
	(Тут был урл на !importent)Упс не заметил, делай как я пиши сайты без cms. А так я думаю да придётся каждому стилю, либо постораться повысить приоретет стиля 0

@ninja2 979 / 196 / 33 Регистрация: 26.09.2012 Сообщений: 2,041
	26.05.2016, 10:00 [ТС]	4
	Сообщение от mrtoxas А сайт уже в интернете? Нет, это просто тренируюсь стили делать. От наследование в css похоже нельзя отменить, а для того чтобы классы без !importent применялись нужно приоритет повышать можно два класса назначить таблице и так прописать .tab.one th и приоритет уже 21 выше. Или один класс и так table.one th, или от так по одному классу каждому table.tab th.tab-th так еще выше 22. А как лучше приоритеты повышать по нормальному? 0

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	26.05.2016, 10:09	5
	Есть же табличка. По ней сидеть и играться. * {} /* a=0 b=0 c=0 -> специфичность = 0 / li {} / a=0 b=0 c=1 -> специфичность = 1 / li:first-line {} / a=0 b=0 c=2 -> специфичность = 2 / ul li {} / a=0 b=0 c=2 -> специфичность = 2 / ul ol+li {} / a=0 b=0 c=3 -> специфичность = 3 / ul li.red {} / a=0 b=1 c=2 -> специфичность = 12 / li.red.level {} / a=0 b=2 c=1 -> специфичность = 21 / #t34 {} / a=1 b=0 c=0 -> специфичность = 100 / #content #wrap {} / a=2 b=0 c=0 -> специфичность = 200 */ А еще можно подумать не только о том, как повысить специфичность своих стилей, а еще заодно - как понизить ее для родных 0

@ninja2 979 / 196 / 33 Регистрация: 26.09.2012 Сообщений: 2,041
	26.05.2016, 10:59 [ТС]	6
	Сообщение от mrtoxas li:first-line {} /* a=0 b=0 c=2 -> специфичность = 2 / Сдесь не правильно, для псевдокласов специфичность 10, значит тут 11 общая Добавлено через 15 минут* а не это псевдоэлемент за него +1 тут способ придумал как перекрыть все классы, создать див и ему два класса присвоить <div class="hight priority"> и дальше таблицу определять без всяких заморочек hight.priority table{} и hight.priority td{} и остальные вроде получается стили не замороченые и всегда наш будет перекрывать без !important 0

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	26.05.2016, 11:11	7
	Сообщение от ninja2 Здесь не правильно Все здесь правильно. :first-line это псевдоэлемент, а не псевдокласс. Добавлено через 6 минут Можно вообще убрать из родных стилей uppercase и использовать его там, где это конкретно нужно, но почему-то мне кажется, что это будет крайне редко 0

@Htext 357 / 118 / 20 Регистрация: 08.01.2015 Сообщений: 1,366 Записей в блоге: 1
	26.05.2016, 20:00	8
	Сообщение от ninja2 как сделать чтобы стили не наследовались? Вроде бы, стандартный метод: присвоить свойству значение "auto". При этом значение должно сброситься. 0