css - 标签和在 .css 中使用 span 有什么区别？-6ren

css - 标签和在 .css 中使用 span 有什么区别？

转载作者：行者123 更新时间：2023-11-28 15:48:05

我有一个使用 span 的 html 文件关键字以两种不同的方式。

第一个在第二个定义中 button.groovyButton span这里:

button.groovyButton {
    border: 0;
    padding: 0;
    height: 45px;
    background:  url('../images/leftside.png') no-repeat;
}

button.groovyButton span {
    font-size: 22px;
    font-family: "san-serif";
    font-weight:bold; 
    color: #FF9900;
    line-height: 45px;
    background: url('../images/mainbak.png') no-repeat right;
    position: relative;
    left: 5px;
    display: block;
    white-space: nowrap;
    padding-right: 50px;
}

第二个，在 html 中使用了 button.groovyButton 样式:

...
<body>
<div style="text-align: center;">
  <button value="Submit" type="submit" class="groovyButton">
  <span>Please wait<img src="/images/blah.gif" width="24" height="39" /></span>
  </button>
</div>

我看到了 用于将元素组合在一起，但是 button.groovyButton span 呢？？

最佳答案

第一个实例是在一个 css 选择器中，定义了一组 css 样式。这些样式将应用于类为“groovyButton”的按钮中包含的任何跨度。

您的第二个实例是页面的实际 HTML，其中将应用上述样式。按钮标签已经被赋予了 groovyButton 类，所以第一批 css 将在这里应用。在按钮中，您有一个 span 标签，第二批 css 将应用于该标签。

关于css - 标签和在 .css 中使用 span 有什么区别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8681681/

文章推荐： php - 我的表单如何使用

首页

博学

6Ren·AI

商城

css - 标签和在 .css 中使用 span 有什么区别？