在CSS中为特定视图自定义项目

本文关键字：视图 自定义 项目 CSS | 更新日期: 2023-09-27 18:28:26

我在MVC 中有这个视图

查看

@model XXX
@{
}
<link href="/eTeste/Content/AbaDetailsODM.css" rel="stylesheet" type="text/css" />
<div id="consoleAbaDetalhes"></div>
<div id="campos_detail">
    @using (Ajax.BeginForm(
        "xxxx",
        "xxxx",
        new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "consoleAba",
            HttpMethod = "POST",
        }))
    {
        @Html.Partial("Validation")
        @Html.HiddenFor(i => i.Id)
        @Html.HiddenFor(i => i.IdEmpresa)
        @Html.HiddenFor(i => i.IdModeloVersao)
        [...]
        <div id="campos">
            <div class="CampoRealyOnly">
                @Html.EditorFor(i => i.User)
                <div class="clear"></div>
                @Html.EditorFor(i => i.Gerente)
                <div class="clear"></div>
                <div id="chefesDeProjeto">
                @Html.EditorFor(i => i.Descricao, "TextArea", new { colunas = 30, linhas = 5 })
                </div>
            </div>
            <div class="CampoRealyOnly clear field-middle">
            <h3>@Html.Label(ODMResources.AreaLeader):</h3>
                @Html.TextBoxFor(x => x.ResponsaveisFuncao)
            </div>
            [...] //Vários Campos
        </div>

该系统有自己的CSS字段。我只想为这个视图更改一些CSS。这部分是通用系统。

CSS按照我的意愿工作
问题是，它会更改所有其他选项卡，即使他只在该视图中引用了这些选项卡
我相信这是级联，所以它改变了

我该怎么做才能将其分离为通用系统？

CSS

.CampoRealyOnly
input[type=text], textarea, select
{
    border: 1px solid #888888;
    left: 298px;
    position: relative;
    top: -29px;
}

在CSS中为特定视图自定义项目

您必须在每个项目上添加类选择器，如下所示：

.CampoRealyOnly input[type=text], .CampoRealyOnly textarea, .CampoRealyOnly select
{
    border: 1px solid #888888;
    left: 298px;
    position: relative;
    top: -29px;
}
相关文章：