我有一个用ASP运行的大型网站.NET MVC使用Razor视图引擎.

我有一个基本样式表,其中包含整个站点的所有通用样式.然而,有时我有页面特定的样式,在页面的<head>-通常这是一行或两行.

我不是特别喜欢把CSS放在<head>,因为它不是严格的关注点分离,但是对于一两行来说,这确实是特定于该页面的,我不喜欢附加另一个文件并增加带宽.

我有一个实例,虽然我想将特定于页面的媒体查询放到<head>中,但因为媒体查询使用@符号和方括号{},所以与剃须刀语法冲突:

@section cphPageHead{
     <style>
        /* PAGE SPECIFIC CSS */
        ...

        @media only screen and (max-width : 960px) <-- the @ symbol here is clashing!
            {
               ... }
            } 
    </style>
}  

有什么办法可以绕过这件事吗?

推荐答案

使用双@符号.这将在客户端转义@symbol并正确呈现@media

Css相关问答推荐

Angular中嵌套数组的网格

Css:有没有更快捷的方式来编写多媒体查询?

Css扩展搜索栏,如何添加图标结束?

如何在react 路由中设置活动类?

防止表格水平拉伸整个Blazor页面

如何仅使用CSS Select 器根据列表中第n个项的子项属性 Select 该项

如果父元素是弹性元素,则不会显示带有纵横比的空div

如何使用 tailwind css 修复滚动条始终位于底部?

如何让 v-col 变成可滚动的?

在 Shiny 中动态更改 bslib 值框的类

CSS:使用 Material Icon 作为 ::marker 或 ::before 使 li 元素不起作用

排除特定元素的目标元素

有没有办法将px单位添加到 Sass mixin 的参数数组中?

CSS 媒体查询不为桌面版的圣杯响应式布局包装 Flexbox 容器元素

使用 css 网格和 nth-child 交替行

如何应用适当样式的元素加消息框?

Flexbox 子高度它的内容

thead 和 tbody 之间的间距

Sass 无效的 CSS 错误:预期的表达式

如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小