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

-1

我有一个html文件，它以两种不同的方式使用span关键字。<span></span>标签和在.css中使用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呢？

来源

2011-12-30 BeeBand

所以，你可以有相同的风格多个按钮而不复制代码 – craig1231 2011-12-30 16:36:22

@ craig1231，但不会只是类=“groovyButton”这样做吗？ – BeeBand 2011-12-30 16:37:40

我不确定你在问什么。你有一个包含'span'的选择器，即'button.groovyButton span'，并且你在页面上有一个物理的''元素。你问这两者有什么不同？ – 2011-12-30 16:38:02

基本上它是说所有的实例都在类里面使用button.groovyButton将得到相同的样式，除非在span上设置了另一个类。

例子：

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

所以在这个例子中跨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不会得到那个造型。

来源

2011-12-30 16:41:40 Robert

谢谢，诉清楚答案。 – BeeBand 2011-12-30 16:55:18

这是送礼者的跨度按钮内一个特殊的风格，因为我可以看到，这是按钮内的跨度有一个特殊的风格

来源

2011-12-30 16:40:14

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> - 取得样式

来源

2011-12-30 16:40:44

不，这是不对的。在你的例子中'groovyelement span'将代替寻找一个带'class =“groovyelement”'的元素，*具有*后代'span'，而不是'groovyelement'类。 – 2011-12-30 16:42:16

我认为你的做法更令人困惑，你可能想纠正你的最后一行代码... – ptriek 2011-12-30 16:43:24

@JaredFarrish：我最初的回答是错误的，是的 - 我太快打字，我的想法混乱了一点。这应该是正确的，虽然 – 2011-12-30 16:43:48

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

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

来源

2011-12-30 16:41:12

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

button.groovyButton span {...}

这意味着，你正在申请button.groovyButton span声明只影响内部button.groovyButton的span标签（一个或多个）。 button.groovyButton以外的任何span标签都不会受到CSS声明的影响。对于HTML，，这是CSS选择的内容。它是一个非块元素，通常用于选择目的，以便您可以应用其他样式。使用跨度还有其他原因，但在这种情况下，这是最常见的用法。这样你可以分配额外的填充，边距，线条高度，颜色等。

来源

2011-12-30 16:41:47 Pegues

顺便说一句，您可以通过将下面的CSS分配给button.groovyButton范围来使跨度功能像div一样： display：block; 此外，更好的是，您可以为每个跨度或类分配一个ID。无论你想要什么。这样可以进一步优化样式，例如，如果在按钮标签中有2个，3个或更多个跨度。 – Pegues 2011-12-30 16:42:44

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

来源

2011-12-30 16:43:01 MikeM

谢谢 - 简洁的描述概念的方式。 – BeeBand 2012-01-04 16:22:00

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

回答

相关问题