Question

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

第一个是第二个定义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;
}

和第二个，其中button.groovyButton样式用于html：

...
<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>

我看到<span></span>如何用于将元素组合在一起，但是button.groovyButton span呢？

Answer 1

第一个实例位于css选择器中，定义了一组css样式。这些样式将应用于具有“groovyButton”类的按钮中包含的任何范围。

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

Answer 2

基本上它说的是，在class.groovyButton类中使用的所有实例都将获得相同的样式，除非在跨度上设置了另一个类。

示例：

<body>
  <div style="text-align: center;">
    <button value="Submit" type="submit" class="groovyButton">
      <span>Span 1</span>
      <span>Span 2</span>
    </button>
    <span>Span 3</span>
</div>

因此，在该示例中，Spans 1和2将获得样式

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;
    }

但是跨度3将无法获得该样式。

Answer 3

我认为你所指的是CSS vs HTML以及它们之间的关系？ CSS中的跨度是指选择：

button.groovyButton span {...}

这意味着您要应用于button.groovyButton span的声明仅影响span内的button.groovyButton标记。 span之外的任何button.groovyButton标记都不会受到CSS声明的影响。

对于HTML <span>content</span>，这就是CSS选择的内容。它是一个非块元素，通常用于选择目的，因此您可以应用其他样式。使用跨度还有其他原因，但在这种情况下，这是最常见的用法。这样您就可以分配额外的填充，边距，线高，颜色等。

Answer 4

这不是一个区别，一个受另一个影响。 <span>元素使用此CSS选择器中定义的样式进行样式设置：button.groovyButton span

Answer 5

这是为了给按钮内的跨度提供一种特殊的风格，因为我可以看到按钮内的跨度具有特殊的风格

Answer 6

SPAN是一个显示内联的HTML元素（它不会像DIV那样进行换行。）

button.groovyelement span是一个CSS选择器，它会将样式应用于SPAN元素，这些元素是类groovyelement按钮的子元素：

<span>Hello</span> - 没有风格

<button><span>Hello</span><button> - 没有风格

<button class='groovyelement'><span>Style me!</span></button> - 获取样式

<span> </span>标记与在.css中使用span有什么区别？

6 个答案: