英文:
Disabled div content using css
问题
以下是已经翻译好的内容：
<div class="children"> Sachin </div>
<div class="children"> Moron</div>
<div class="children"> Peter </div>
是否可能根据div的特定内容应用颜色，如下所示？
如果div内容为Sachin，则我需要将其禁用，否则将启用。
.children sachin {
cursor: not-allowed;
opacity: 0.5;
}
英文:
<div class="children"> Sachin </div>
<div class="children"> Moron</div>
<div class="children"> Peter </div>
is it possible to apply color to div with specfic content like below
If div content is sachin then i need to disabled it, other wise it will enable
.children sachin {
cursor: not-allowed;
opacity: 0.5;
}
答案1
得分: 1
你可以使用data attributes来实现这一点。
<!-- 开始片段: js 隐藏: false 控制台: true babel: false -->
<!-- 语言: lang-css -->
.children[data-name="Sachin"] {
opacity: 0.5;
cursor: not-allowed;
}
<!-- 语言: lang-html -->
<!-- 结束片段 -->
英文:
You can do it if you are able to use data attributes.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.children[data-name="Sachin"] {
opacity: 0.5;
cursor: not-allowed;
}
<!-- language: lang-html -->
<div class="children" data-name="Sachin">Sachin</div>
<div class="children" data-name="Moron">Moron</div>
<div class="children" data-name="Peter">Peter</div>
<!-- end snippet -->
答案2
得分: 1
你可以将 disabled 类添加到要禁用的 div 元素中。
<div class="children disabled"> Sachin </div>
<div class="children"> Moron </div>
<div class="children"> Peter </div>
.children.disabled {
opacity: 0.5;
cursor: not-allowed;
}
也可以使用 disabled HTML 属性：
<div class="children" disabled> Sachin </div>
<div class="children"> Moron </div>
<div class="children"> Peter </div>
英文:
You can add a disabled class to the divs you want to disable.
<div class="children disabled"> Sachin </div>
<div class="children"> Moron </div>
<div class="children"> Peter </div>
.children.disabled {
opacity: 0.5;
cursor: not-allowed;
}
Using the disabled html attibute is also possible:
<div class="children" disabled> Sachin </div>
<div class="children"> Moron </div>
<div class="children"> Peter </div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论