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

Question

对于初学者css问题的道歉，但它很难找到答案。 我正在寻找html和css的duckett书籍，它有一些选择器语法让我感到困惑。

table.one{}  
input#web{} 

我认为.x表示x是一类选择，同样是#x表明x是id选择，但为什么笔者选择这些之前把文本？据我所知，他没有给出解释。

Answer 1

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

input#web匹配input元素，其ID为web。

这种选择器被称为“类型选择器”。你可以阅读这些资源：

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

Answer 2

1. table.one{} '[元素类型] [css类名] {}
2. input#web{} '[元素类型]＃[id属性] {}

当指定一个元素类型这意味着该定义仅适用于该元素类型。

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

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

Answer 3

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

table.one { 
    .. 
} 

参考与类 “一”（在代码：<table class="one">）的表。这样，如果作者具有另一个具有类“one”的元素（例如：<div class="one">），则div不受table.one规则的影响。除了选择用于input#web

同样的想法，朝着input标签的目标与“网络”的ID（<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和web

在某些情况下，ID的元素，这些选择可能没有必要，尤其是在ID的，因为他们应该是独一无二的，而不是可以适用的课程。但是，元素名称与类的用法可以帮助您使不同的元素看起来不同于其他元素，例如，如果要将文本和div对齐，则可能只想为两者使用一个类，但因为<div>元素是块级别，默认情况下它们不能像文本一样居中。

div.center { 
    margin-left: auto; 
    margin-right: auto; 
} 
p.center { 
    text-align: center; 
} 

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。