Question

我有一个问题，如果有人可以帮助我。

换行应该在所有这些课程中，还是应该导航？

还是两者都应该使用？

你会说要使用哪个，为什么？

单击图像以查看链接

第一路

<div class="wrap">
  <div class="covere" title="OPEN"></div>
  <div class="nav">

.wrap {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

.wrap a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrap a:hover {
  border: 3px solid red;
}

.wrap a:nth-of-type(5n) {
  margin-right: 0;
}

.wrap a:nth-of-type(8) {
  opacity: 0;
  border: none;
  background: none;
}

.wrap a:nth-of-type(15) {
  position: relative;
  height: 50px;
  width: 50px;
  background: none;
  border: 3px solid #0059dd;
  box-sizing: border-box;

.nav {
  margin: 0;
  padding: 0;
}

.nav a {
  float: left;
}

}

单击图像以查看链接

第二路

https://jsfiddle.net/jq18evLs/139/

<div class="wrap">
  <div class="covere" title="OPEN"></div>
  <div class="nav">

.wrap {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

.nav a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.nav a:hover {
  border: 3px solid red;
}

.nav a:nth-of-type(5n) {
  margin-right: 0;
}

.nav a:nth-of-type(8) {
  opacity: 0;
  border: none;
  background: none;
}

.nav a:nth-of-type(15) {
  position: relative;
  height: 50px;
  width: 50px;
  background: none;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.nav {
  margin: 0;
  padding: 0;
}

.nav a {
  float: left;
}

单击图像以查看链接

第三种方式

https://jsfiddle.net/jq18evLs/143/

<div class="wrap">
  <div class="covere" title="OPEN"></div>
  <div>

------------------------------------

  .wrap {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

  .wrap a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrap a:hover {
  border: 3px solid red;
}

.wrap a:nth-of-type(5n) {
  margin-right: 0;
}

.wrap a:nth-of-type(8) {
  opacity: 0;
  border: none;
  background: none;
}

.wrap a:nth-of-type(15) {
  position: relative;
  height: 50px;
  width: 50px;
  background: none;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrap {
  margin: 0;
  padding: 0;
}

.wrap a {
  float: left;
}

Answer 1

这取决于。根据您问题中的HTML，我会选择选项2.为什么？因为它有效并且选择者没有超过资格。例如，假设一个HTML页面包含两种锚链接 - 首先是链接到网站内（同一域），另一些链接到外部网站。您的HTML如下所示：

Error in \`[<-.data.frame\`(\`\*tmp\*`, , pred, value = NULL) : 
  duplicate subscripts for columns

我将在上面的HTML中设置锚标记的样式，如下所示：

<div class="wrap">
  <div class="internal-links">
    <a href="/1.html"></a>
    <a href="/2.html"></a>
    <a href="/3.html"></a>
  </div>

  <div class="external-links">
    <a href="https://google.com/1.html"></a>
    <a href="https://google.com/2.html"></a>
    <a href="https://google.com/3.html"></a>
  </div>
</div>

但如果所有链接都必须以相同的方式设置样式，那么我会这样做：

.internal-links a {
  color: blue;
}

.external-links a {
  color: red;
}

我认为做出关于嵌套类或选择器的决定取决于两件事：

<强> 1。特异性 - 特定性是浏览器决定将哪个CSS规则应用于给定元素的方式。详细了解特异性here

<强> 2。 CSS管理 - 更大的项目可能需要某种策略来保持CSS的可管理性。或者有时嵌套选择器可能只是有意义。以下面的代码为例：

a {
    color: blue;
}

现在使用button.large { width: 200px; height: 50px; } img.large { width: 400px; height: auto; }或img选择器完全有道理。此示例使用其他选择器来考虑变体。同样，可以应用相同的解决方案来管理状态button。

Wrap应该在所有这些CSS类上，还是Nav应该在所有这些类上？

1 个答案: