我可以嵌套一个<；p>；在“a”中；小班；在HTML中？

我已经合并了一堆HTML标记，以得到我想要的东西，效果非常好。然而，我怀疑它是否“正确”

更新：我不认为这是“正确的”，请参见以下链接：

所以，稍微改变一下我的问题，我可以把我的“p”标签改成“span”对吗？这应该使它更正确

我指的是“small class”中的嵌套段落标记

代码如下：

<div class="card b-1 hover-shadow mb-20">
    <div class="media card-body">
        <div class="media-left pr-12">
            <img class="avatar avatar-xl no-radius" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="...">
        </div>
        <div class="media-body">
            <div class="mb-2">
                <span class="fs-20 pr-16"> XHossein Shams</span>
            </div>
            <small class="fs-16 fw-300 ls-1">


                <input type="checkbox" class="read-more-state" id="post-1" />

                <p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p>

                <label for="post-1" class="read-more-trigger"></label>

            </small>
        </div>
        <div class="media-right text-right d-none d-md-block">
            <p class="fs-14 text-fade mb-12"><i class="fa fa-map-marker pr-1"></i> Menlo Park, CA</p>
            <span class="text-fade"><i class="fa fa-money pr-1"></i> $60 per hour</span>
        </div>
    </div>
    <footer class="card-footer flexbox align-items-center">
        <div>
            <strong>Cost of Tool:</strong>
            <span>Free &amp; Paid</span>
        </div>
        <div class="card-hover-show">
            <a class="btn btn-xs fs-10 btn-bold btn-info" href="#">Tool Home</a>
            <a class="btn btn-xs fs-10 btn-bold btn-primary" href="#" data-toggle="modal" data-target="#modal-contact">Contact</a>
        </div>
    </footer>
</div>

---

谢谢

当然可以。HTML非常灵活，您可以编写一堆无效的标记，并且似乎可以侥幸逃脱（目前）。这并不意味着你应该

您应该编写有效的html，因为您可以更有力地保证它现在和将来都能一致工作。对于无效代码，您不会得到这样的保证。您还应该编写语义有效的HTML，因为它可以更好地提示文档的结构和意图

您不应该做的是根据它提供给您的默认样式选择标记/元素。经典的例子是使用

h3

，当

h2

是正确的标记，但需要较小的字体时。使用正确的标记，然后选择适当的样式

在您的情况下，这似乎很合适，但如果不了解文档的完整上下文，就很难判断

.pr-12{
右边填充：12px！重要；
}
.mb-20{
保证金底部：20px！重要；
}
.b-1{
边框：1px实心#ebebebeb！重要；
}
.卡片{
边界：0；
边界半径：0；
/*边缘底部：30px*/
-webkit转换：.5s；
过渡：.5s；
}
.卡片{
位置：相对位置；
显示：-ms flexbox；
显示器：flex；
-ms-flex方向：列；
弯曲方向：立柱；
最小宽度：0；
单词包装：打断单词；
背景色：#fff；
背景剪辑：边框框；
边框：1px实心rgba（0,0,0,125）；
边界半径：.25rem；
}
.媒体{
填充：16px 12px；
-webkit过渡：背景色。2s线性；
过渡：背景色。2s线性；
}
.媒体{
显示：-ms flexbox；
显示器：flex；
-ms-flex-align：开始；
调整项目：灵活启动；
}
.卡体{
-ms-flex:1自动；
flex:1自动；
填充：1.25rem；
}
.media.avatar{
弹性收缩：0；
}
没有半径{
边界半径：0！重要；
}
.阿凡达xl{
宽度：64px；
高度：64px；
线高：64px；
字体大小：1.25rem；
}
.阿凡达{
位置：相对位置；
显示：内联块；
/*宽度：36px；
高度：36px*/
宽度：70px；
高度：70像素；
线高：36px；
文本对齐：居中；
边界半径：100%；
背景色：#f5f6f7；
颜色：#8b95a5；
文本转换：大写；
}
img{
最大宽度：100%；
}
img{
垂直对齐：中间对齐；
边框样式：无；
}
.mb-2{
边缘底部：.5rem！重要；
}
.fs-20{
字体大小：20px！重要；
}
.pr-16{
右边填充：16px！重要；
}
.ls-1{
字母间距：1px！重要；
}
.fw-300{
字体重量：300！重要；
}
.fs-16{
字体大小：12px！重要；
}
.媒体正文>*{
页边距底部：0；
}
小的
时间
在一边
.小{
字体系列：Roboto，无衬线；
字体大小：400；
字体大小：11px；
颜色：#8b95a5；
}
.fs-14{
字体大小：14px！重要；
}
.mb-12{
保证金底部：12px！重要；
}
.文本淡入淡出{
颜色：rgba（77,82,89,0.7）！重要；
}
.卡片页脚：最后一个子项{
边界半径：0计算（.25rem-1px）计算（.25rem-1px）；
}
.卡片页脚{
背景色：#fcfdfe；
边框顶部：1px实心rgba（77,82,89,0.07）；
颜色：#8b95a5；
填充：10px 20px；
}
.flexbox{
显示：-网络工具包盒；
显示器：flex；
-webkit盒包：证明；
证明内容：之间的空间；
}
.将项目对齐到中心{
-ms flex align：居中！重要；
对齐项目：居中！重要；
}
.卡片页脚{
填充：.75雷姆1.25雷姆；
背景色：rgba（0,0,0,03）；
边框顶部：1px实心rgba（0,0,0,125）；
}
/*
.卡片页脚{
背景色：#fcfdfe；
边框顶部：1px实心rgba（77,82,89,0.07）；
颜色：#8b95a5；
填充：10px 20px
} */
.card footer>*：最后一个子项{
底线：0
}
.悬停阴影{
-webkit盒阴影：0 35px rgba（0,0,0,0.11）；
长方体阴影：0 35px rgba（0,0,0,0.11）
}
.fs-10{
字体大小：10px！重要；
}

沙姆

^谢谢，我改变了我的问题以反映这一点。我没有看到一个小类，只有一个

元素。而且no

基本上不是一个

，如果它更接近

span

的话，但是它们在语义上是不同的。所以没有我遇到的问题？代码很好用……你试过了吗

p

不是短语内容，也不是

small

的有效子级。它现在可以工作，但不能保证将来能工作。您封装在

small

中的内容真的是“像版权和法律文本一样的旁注和小字体，独立于它的样式表示”，还是最好放在另一个容器中，例如

div

，

搁置

，或者给定有表单元素

字段集

。

<small class="fs-16 fw-300 ls-1">

.pr-12 {
    padding-right: 12px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.b-1 {
    border: 1px solid #ebebeb !important;
}

.card {
    border: 0;
    border-radius: 0;
    /* margin-bottom: 30px; */
    -webkit-transition: .5s;
    transition: .5s;
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.media {
    padding: 16px 12px;
    -webkit-transition: background-color .2s linear;
    transition: background-color .2s linear;
}

.media {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
}

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.media .avatar {
    flex-shrink: 0;
}

.no-radius {
    border-radius: 0 !important;
}

.avatar-xl {
    width: 64px;
    height: 64px;
    line-height: 64px;
    font-size: 1.25rem;
}

.avatar {
    position: relative;
    display: inline-block;
    /* width: 36px;
    height: 36px; */
    width: 70px;
    height: 70px;
    line-height: 36px;
    text-align: center;
    border-radius: 100%;
    background-color: #f5f6f7;
    color: #8b95a5;
    text-transform: uppercase;
}

img {
    max-width: 100%;
}

img {
    vertical-align: middle;
    border-style: none;
}

.mb-2 {
    margin-bottom: .5rem!important;
}

.fs-20 {
    font-size: 20px !important;
}

.pr-16 {
    padding-right: 16px !important;
}

.ls-1 {
    letter-spacing: 1px !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fs-16 {
    font-size: 12px !important;
}

.media-body>* {
    margin-bottom: 0;
}

small, time, .small {
    font-family: Roboto,sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #8b95a5;
}

.fs-14 {
    font-size: 14px !important;
}

.mb-12 {
    margin-bottom: 12px !important;
}

.text-fade {
    color: rgba(77,82,89,0.7) !important;
}

.card-footer:last-child {
    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
}

.card-footer {
    background-color: #fcfdfe;
    border-top: 1px solid rgba(77,82,89,0.07);
    color: #8b95a5;
    padding: 10px 20px;
}

.flexbox {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.align-items-center {
    -ms-flex-align: center!important;
    align-items: center!important;
}

.card-footer {
    padding: .75rem 1.25rem;
    background-color: rgba(0,0,0,.03);
    border-top: 1px solid rgba(0,0,0,.125);
}
/*

.card-footer {
    background-color: #fcfdfe;
    border-top: 1px solid rgba(77, 82, 89, 0.07);
    color: #8b95a5;
    padding: 10px 20px
} */

.card-footer>*:last-child {
    margin-bottom: 0
}

.hover-shadow {
    -webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.11);
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.11)
}

.fs-10 {
    font-size: 10px !important;
}