一种结构是用 HTML 代码编写的,浏览器会让我变成一个完全不同的结构。PAY 元素必须在父元素内,但超出范围
浏览器告诉我:
在代码中它说:
<div id="content">
<header>
<h1>Самое популярное</h1>
</header>
<div id="container">
<a id="container-item">
<a class="pay">Кнопочка</a>
</a>
</div>
</div>
CSS代码:
#content #container {
display: flex;
justify-content: space-around;
flex-direction: row;
flex-wrap: wrap;
width: calc(100% - 30px);
}
#content #container #container-item {
flex: 250px;
background-color: #fff;
height: 300px;
border-radius: 6px;
margin: 20px;
transition: .3s all;
max-width: 500px;
position: relative;
}
#content #container #container-item:before {
content: '';
border-radius: 5px;
top: 10px;
border: 10px solid transparent;
border-left: 10px solid #528ACA;
border-top: 10px solid #528ACA;
position: absolute;
left: 10px;
}
#content #container #container-item:hover {
-webkit-box-shadow: 3px 2px 25px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 3px 2px 25px 0px rgba(0, 0, 0, 0.1);
box-shadow: 3px 2px 25px 0px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
cursor: pointer;
}
#content #container .pay {
padding: 10px;
background-color: #528ACA;
color: #fff;
border-radius: 5px;
}
<a id="container-item">
不要<a>
,但是<div>
您有两个<a>
嵌套的一个,这是不可能的,浏览器使它们一个接一个每个人都对链接中的链接是正确的。链接内的按钮或按钮内的链接也会发生同样的情况))
但除此之外,作为一个经验丰富的布局设计师,这样的事情只会让我在风格上感到沮丧
#content #container #container-item
为什么这么糟糕?这很简单 - 任何验证器在尝试将另一个验证器插入 DOM 时,
#container-item
都会说这是不可能的,而且访问它也会有问题,例如从脚本中访问它。这就是为什么建议不要使用 id 属性,而是使用 class 属性来编写样式标记。这允许您重用页面上具有相同样式的元素。