Html 活动工作，但不使用css的焦点或目标_Html_Css

Html 活动工作，但不使用css的焦点或目标

html css

Html 活动工作，但不使用css的焦点或目标,html,css,Html,Css,下面是我的代码。css块中的“active”命令起作用，因为当单击div时，它会改变颜色，但当松开单击时，它的边框会变为红色，如css块中的“target”命令所述，但它不会。想法 <html> <body> <style type="text/css"> .svar-grid { margin: 20px; } .svar-grid .svar { padding: 10px; text-align: center; margi

下面是我的代码。css块中的“active”命令起作用，因为当单击div时，它会改变颜色，但当松开单击时，它的边框会变为红色，如css块中的“target”命令所述，但它不会。想法

<html>
<body>

<style type="text/css">
.svar-grid {
  margin: 20px;
}

.svar-grid .svar {

    padding: 10px;
  text-align: center;
    margin-top:20px;
  width:100%;
  border:2px solid black;
  border-radius:10px;
  background:yellowgreen;
}


.svar-grid .svar:active {

    padding: 10px;
  text-align: center;
    margin-top:20px;
  width:100%;
  border:2px solid black;
  border-radius:10px;
  background:green;
}

.svar-grid .svar:target {

    padding: 10px;
  text-align: center;
    margin-top:20px;
  width:100%;
  border:2px solid red;
  border-radius:10px;
  background:green;
}

</style>

<html>   
 <div>
        <div class="svar-grid">
          <div class="svar"><h4>Testing</h4></div>
        </div>

    </div>


.svar网格{
利润率：20px；
}
.svar grid.svar{
填充：10px；
文本对齐：居中；
边缘顶部：20px；
宽度：100%；
边框：2件纯黑；
边界半径：10px；
背景：黄绿色；
}
.svar grid.svar:活动{
填充：10px；
文本对齐：居中；
边缘顶部：20px；
宽度：100%；
边框：2件纯黑；
边界半径：10px；
背景：绿色；
}
.svar grid.svar:目标{
填充：10px；
文本对齐：居中；
边缘顶部：20px；
宽度：100%；
边框：2倍纯红；
边界半径：10px；
背景：绿色；
}
测试

您正在寻找的

：焦点

HTML
如您所见，我向div添加了tabindex=“-1”
，因为div不能自然聚焦。给它-1 tabinde使其可聚焦
下面是：target
应该做的事情，它意味着与URL一起使用
我不知道你为什么需要关注div，或者是否与之有任何互动。但是如果有与div的交互，您可能应该使用按钮
或锚定标记，具体取决于它的用法
您正在寻找的：focus


HTML
如您所见，我向div添加了tabindex=“-1”
，因为div不能自然聚焦。给它-1 tabinde使其可聚焦
下面是：target
应该做的事情，它意味着与URL一起使用
我不知道你为什么需要关注div，或者是否与之有任何互动。但是如果有与div的交互，您可能应该根据其用法使用按钮或锚定标记：target
应用于具有id
属性的元素，该属性与URL中第一个
字符后出现的字符串相匹配。这就是说，当你链接到某个页面上的特定内容时，可以突出显示以吸引眼球
由于元素没有id
，因此无法应用：target
伪类

：焦点
适用于具有焦点的元素。通常，点击一个元素会给它焦点…但只有当元素在第一个位置是可聚焦的
焦点在于，在不使用定点设备（如鼠标、触摸板或触摸屏）与用户界面交互时，您可以通过其他机制（如按下tab键）在交互控件之间移动。然后，您可以触发（例如按Enter键）聚焦元素
仅当元素在触发时执行某些操作（例如，如果是链接或按钮）时，此选项才有用。默认情况下，div在被触发时不会执行任何操作。它是一个通用容器
您可以使用JavaScript（addEventListener
）向元素添加交互性，也可以使用tabindex
属性将元素标记为交互性…但通常应选择不同的元素（如
）相反。
：target
应用于具有id
属性的元素，该属性与URL中第一个#
字符后出现的字符串相匹配。这就是说，当你链接到某个页面上的特定内容时，可以突出显示以吸引眼球
由于元素没有id
，因此无法应用：target
伪类

：焦点
适用于具有焦点的元素。通常，点击一个元素会给它焦点…但只有当元素在第一个位置是可聚焦的
焦点在于，在不使用定点设备（如鼠标、触摸板或触摸屏）与用户界面交互时，您可以通过其他机制（如按下tab键）在交互控件之间移动。然后，您可以触发（例如按Enter键）聚焦元素
仅当元素在触发时执行某些操作（例如，如果是链接或按钮）时，此选项才有用。默认情况下，div在被触发时不会执行任何操作。它是一个通用容器
您可以使用JavaScript（addEventListener
）向元素添加交互性，也可以使用tabindex
属性将元素标记为交互性…但您通常应该选择不同的元素（如
）。我想您对target的功能感到困惑，我想你对target做什么感到困惑，
    <div class="svar-grid">
      <div class="svar" tabindex="-1"><h4>Testing</h4></div>
    </div>

.svar-grid .svar:focus {  ....   }