CSS Условный @Import Вопрос - PullRequest
Новая
       4

CSS Условный @Import Вопрос

0 голосов
/ 22 апреля 2011

У меня есть HTML-файл со следующим кодом; 

<html>
 <head>
  <LINK media="all" href="css/desktop.css" type="text/css" rel="stylesheet">
 </head>

 <body>
  <span class="ipad_text">DESKTOP RED;  iPad GREEN</span>
<br />
  <span class="ipad_text2">DESKTOP BLACK;  iPad BLUE</span>
<br />
  <span class="ipad_only">iPad ONLY SHOW</span>
<br />
    <span class="ipad_only2">iPad ONLY 2</span>

 </body>
</html>

Также в папке css есть 2 CSS-файла (desktop.css и ipad.css); В desktop.css у меня есть 

@import "ipad.css";

.ipad_text{
    font:42px arial bold;
    color: red;
}


.ipad_text2{
    font:22px verdana bold;
    color: black;
}

.ipad_only{
    display:none;
}

А в ipad.css у меня 

@media only screen and (device-width:768px)
{
.ipad_text{
    font:32px arial bold;
    color: green;
}

.ipad_text2{
    font:22px verdana bold;
    color: blue;
}

.ipad_only{
    display:block;
}

.ipad_only2{
    color: red;
    font:52px arial bold;
}

}

Теперь по некоторым причинам это не работает .. Если я вырезал / вставил код из ipad.css в файл desktop.css следующим образом, страница корректно отображается как на рабочем столе, так и на iPad ... Что я делаю неправильно? Я хочу, чтобы 2 CSS располагались в отдельных файлах ... Пожалуйста, помогите мне.

Отлично работает после 

@import "ipad.css";

.ipad_text{
    font:42px arial bold;
    color: red;
}


.ipad_text2{
    font:22px verdana bold;
    color: black;
}

.ipad_only{
    display:none;
}


@media only screen and (device-width:768px)
{
.ipad_text{
    font:32px arial bold;
    color: green;
}

.ipad_text2{
    font:22px verdana bold;
    color: blue;
}

.ipad_only{
    display:block;
}

.ipad_only2{
    color: red;
    font:52px arial bold;
}

}

1 Ответ

1 голос
/ 22 апреля 2011

Как я уже говорил в моем предыдущем ответе ...

@import s должны предшествовать любым другим объявлениям стиля.

Но в вашемВ этом случае, если вы импортируете свои стили iPad в начале, они, вероятно, будут переопределены вашими стилями рабочего стола.

... потому что ваши стили, не относящиеся к iPad, применяются ко всем медиафайлам, , включая Мобильное Сафари на iPad.Поскольку ваши стили не для iPad идут после условного @import, они будут переопределять ваши стили независимо от того, импортированы они или нет.Это нормальное каскадное поведение.

...