css中选择器之前的文本是什么意思？

Question

为初学者css问题道歉，但很难找到答案。 我正在查看关于html和css的duckett书，它有一些令我困惑的选择器语法。

table.one{}    
input#web{}

我认为.x表示x是一个类选择器，同样#x表示x是一个id选择器，但为什么作者选择放置这些之前的文字？就我所知，他没有给出解释。

Answer 1

table.one匹配具有类table的所有one元素。

input#web匹配标识为input的{​​{1}}元素。

这种选择器被称为＆＃34;类型选择器＆＃34;。您可以阅读以下资源：

• CSS2.1 spec
• Selectors Level 3
• Selectors Level 4
• MDN article

Answer 2

1. table.one{} ＆＃39; [元素类型]。[css类名] {}
2. input#web{} ＆＃39; [元素类型]＃[id attribute] {}

当指定了元素类型时，这意味着该定义仅适用于该元素类型。

元素的

table.myCss{}，当class='myCss'然后应用css时。不要将此CSS应用于<span class='myCss'>或任何其他元素类型。

这是CSS3官方规格页面的链接。 http://www.w3.org/TR/css3-selectors/

Answer 3

在各自的类/ ID前面使用table和input会引用标记中元素的类型。例如：

table.one {
  ..
}

引用具有类“one”的表（在代码中：<table class="one">）。这样，如果作者有另一个带有“one”类的元素（例如：<div class="one">），则div不受table.one规则的影响。

input#web的相同想法，除了选择器定位到ID为“web”（input）的<input id="web">标记

W3的一些额外阅读可能会有所帮助（它来自CSS2，但主要观点仍然存在）：http://www.w3.org/TR/CSS2/selector.html

DEMO ：http://jsfiddle.net/uWkYL/

Answer 4

让我分解一下：

table.one表示查找名为table的标记，该标记也包含类one
input#web同样意味着：查找名称为input且ID为web

的元素

在某些情况下，这些选择器可能不是必需的，尤其是在ID上，因为它们应该是唯一的，而不是类，它们是可重用的。但是，元素名称与类的使用可以帮助您使不同的元素看起来与其他元素不同，例如，如果您想要居中文本和div，您可能只想为两者使用一个类，但是因为{{1元素是块级别，默认情况下它们不像文本那样居中。

<div>

Answer 5

<input class="x" ... >
<div class="x" ... ></div>

现在我们有：

.x {} // To select both

input.x {} // To select just the input with class "x"

div.x {} // To select just the div with class "x"

这可以用来更清楚地说明样式的元素。或者限制受影响的元素。

同样，我们可以使用元素ID来完成此操作。

<input id="a" ... >
<div id="b" ... ></div>

所以我们可以简单地写#a。或者我们可以写input#a。目前这些是等价的。

使用div我们可以#b或div#b。