Question

作为一个例子，我有一个带有数据附加属性的代码，应该为平板电脑和台式机执行。我是如何应对这种和平的html代码的风格：在主（父html样式表）中实现容器ID或子html或尝试内联样式？

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>

Answer 1

希望我理解正确。

如果要设置具有属性data-append的元素的样式，只需使用和attribute selector在CSS中定位它。

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如何将样式应用于自定义数据属性？

1 个答案: