gpt4 book ai didi

html - 如何将样式应用于自定义数据属性?

转载 作者:行者123 更新时间:2023-11-28 15:45:27 25 4
gpt4 key购买 nike

作为一个例子,我有一个应该为平板电脑和台式机执行的带有数据附加属性的代码。我应该如何为这种 html 代码和平应用样式:在主(父 html 样式表)中为容器或子 html 实现 ID 或尝试将其设置为内联样式?

body {
background: #fff;
font-family: 'Verdana', sans;
font-size:16px;
color: #fff;
text-align: left;
}

.skip{
clip: rect(0 0 0 0);
margin: -1px;
overflow:hidden;
display: none;
position: absolute;
top: -1px;
left: -1px;
z-index: -1;
}
<body>
<h1 class='skip'>Exploration of css rules of the hidden submenu</h1>
<nav nav ul>
<h2 class='skip'>Menu with one submenu</h2>
<ul>
<!--A as a custom data attribute for screens with width more than 767px-->
<li id='customData' data-append='/a-plus.html' data-media='(min-width:768px)'>
<a href='/a'>A</a></li>
<li><a href='/b'>B</a><li> <!--B-->
<li><a href='/c'>C</a></li> <!--C-->
</ul>
</nav>
</body>

最佳答案

希望我理解正确。

如果你想为具有属性 data-append 的元素设置样式,只需使用 and attribute selector在您的 CSS 中定位它。

下面我使用 [data-append] 作为我的选择器,这意味着具有 data-append 属性的任何元素将得到样式。如果您想将其限制为 li,请使用 li[data-append] {}

body {
background: #fff;
font-family: 'Verdana', sans;
font-size: 16px;
color: #fff;
text-align: left;
}

.skip {
clip: rect(0 0 0 0);
margin: -1px;
overflow: hidden;
display: none;
position: absolute;
top: -1px;
left: -1px;
z-index: -1;
}

[data-append] {
background-color: indianred;
}
<h1 class='skip'>Exploration of css rules of the hidden submenu</h1>

<nav>

<h2 class='skip'>Menu with one submenu</h2>

<ul>
<!--A as a custom data attribute for screens with width more than 767px-->
<li id='customData' data-append='/a-plus.html' data-media='(min-width:768px)'>
<a href='/a'>A</a>
</li>
<li>
<a href='/b'>B</a>
</li>
<li>
<a href='/c'>C</a>
</li>
</ul>

</nav>

关于html - 如何将样式应用于自定义数据属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42820483/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com