Формат файла формата CSS CSS

Question

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

.cms-bootstrap .col-lg-2{ 
... 
} 

и я пытался применить их как этот

<div class="col-lg-2">hello</div> 

сайт я работаю на довольно большой и у нас есть сторонняя компания, поставляющая основные стили, есть еще несколько файлов стиля 75k, поэтому потребовалось несколько исследований, чтобы найти то, что, по-видимому, является причиной.

Мне нужно применить стили сетки, чтобы я мог правильно позиционировать некоторые элементы на странице.

Если я применить стили так:

<div class="cms-bootstrap> 
<div class="col-lg-2">hello</div> 
</div> 

тогда все хорошо и стили применяются правильно.

Может кто-нибудь объяснить, что нужно для внешнего div? Я вижу связь между двумя классами, определенными в файле CSS, которые я просто не знаю, что они есть, и не может найти объяснения нигде.

Answer 1

Это потому, что .cms-bootstrap .col-lg-2 идентифицирует вложенный `div.

Так что если ребенок div не входит в этот конкретный родитель, тогда правила стиля не будут применяться к нему.

Вы должны использовать это в качестве ссылки:

элемента например 'p' Выбирает все элементы 'p'

элемент, элемент например. 'div, p' Выбирает все элементы 'div' и все 'p' элементы

элемент элемента например. div p Выбирает все 'p' элементы внутри 'div' элементы

элемент> элемент например. div> p Выбирает все элементы 'p', где родительский элемент является «div» элемент

элемент + элемент например. div + p Выбирает все элементы 'p' , которые размещаются сразу после элементов 'div'.

element1 ~ element2 e.g.р ~ уль Выбирает элемент каждого «уль», что предшествует элементом «р»

Взят из W3schools

Answer 2

Правильно, если правило css выложено как .cms-bootstrap .col-lg-2{, это означает, что крайний левый - это обертка, а правый - его дети.

Для того, чтобы это повлияло на этот класс, он должен быть ребенком cms-bootstrap.

теперь для класса cms-bootsrtrap, который на самом деле создан для создания только контуров только внутри cms, вы видите это в таких вещах, как response cms & windu, где они используют bootstrap для создания бэкэнд.

Answer 3

Похоже, третьей стороны, обеспечивающей ваш CSS обернул все в .cms-bootstrap классе, предположительно, так, чтобы Bootstrap не вмешивался в другие стили на сайте (обычно в области администратора).

Это произвольный класс, поэтому на нем не будет никаких документов. Вам нужно будет добавить класс .cms-bootstrap в тег body, чтобы получить содержимое для стилей Bootstrap.