Каталог статей
1 вопрос
- Писать код фронтенда, долго подгонять css, и в итоге быть безжалостно низвергнутым и переписанным фронтендом, в итоге так и не могут понять что написали
2 css базовая отделка
- Любой класс действителен
.classA,.classB{
}
<div class="classA"></div>
<div class="classB"></div>
- Это действительно только в том случае, если у вас есть два класса одновременно
.classA.classB{
}
<div class="classA classB"></div>
- Все элементы, которые объявляют classB внутри элемента classA, действительны (разделены пробелами)
.classA .classB{
}
<div class="classA">
<div class="classB"></div>
<div>
<div class="classB"></div>
</div>
</div>
- Первый слой внутри класса A объявляет, что все элементы класса B действительны.
.classA > .classB {
}
<div class="classA">
<div class="classB">有效</div>
<div>
<div class="classB">无效</div>
</div>
<div class="classB">有效</div>
</div>
- Соответствующая группа ярлыков
/*所有<div>,<p>都生效*/
div,p{
}
/*<div>内部的所有<p>都生效*/
div p{
}
/*<div>内部第一层<p>生效*/
div > p{
}
3 Сочетание класса и лейбла
- базовая смесь
/*声明了classA的所有<div>*/
div.classA {
}
/*声明了classA的元素，内部的所有<div>有效*/
.classA div{
}
- Запятые, пробелы и знаки «меньше» (<) имеют одинаковое значение, независимо от того, являются ли они элементами класса или html с обеих сторон.
4 Меры предосторожности
- Для классов с таким же эффектом приоритет зависит от порядка загрузки файлов css, а не от порядка объявления в элементе class=""
.classB{
color:red;
}
.classA{
color:green;
}
<div class="classA classB">文字是绿色</div>
5 Два совета, как избавиться от перезаписи css
В настоящее время стиль многих фреймворков интерфейсных компонентов трудно изменить, особенно файл css, загруженный в конце, приведет к перезаписи пользовательского css.Как правило, есть две ситуации.
Целевой элемент может добавить класс
- элемент добавить пользовательский classB
- Скопируйте фактический эффективный classA
- Вставьте фактический эффективный класс A в файл css, а затем добавьте пользовательский класс B, чтобы ваш приоритет был чрезвычайно высоким, даже если класс A загружается в конце
.classA.classB{
}
<div class="classB">框架自动会加上classA</div>
Целевой элемент не может добавить класс
В этом случае компонент фреймворка автоматически генерирует многослойные элементы, а пользовательский класс добавить нельзя.Идея
: начиная с родительского элемента, самый верхний элемент должен иметь возможность добавлять пользовательский класс.Если это невозможно, то большой сделка заключается в том, чтобы напрямую установить слой div Затем используйте иерархические отношения для достижения цели установки
- Родительский div объявляет classA
- Непосредственно по уровню
.classA div>p>span{
color:purple;
}
.classC{
color:red;
}
<div class="classA">
<div>
<p><span class="classC">我是紫色，默认的红色无效</span></p>
</div>
</div>
Примечание: nth-child(num) может указывать количество дочерних элементов
6 правил записи меньшего количества файлов
- Разделенный символом {}, окончательный сгенерированный файл css соединяется пробелами.
.classA{
div{
}
}
/*等效于*/
.classA div{
}
- &:n-й дочерний элемент меньшего
.classA {
div {
&:nth-child(1){
}
}
}
/*等效于*/
.classA div:nth-child(1){
}