CSS继承让我感到困惑

Question

CSS继承让我感到困惑

6

我看了一些CSS相关的内容，对继承机制感到十分困惑（我认为下面的术语是正确的）。在CSS中，我可以声明一个类：

#mytext {
}

然后我看到一些人这样做：

p.mytext {
}

但为什么要那样做呢？他们为什么不能只做如下操作：

<p class="mytext">

没有声明 p.mytext ？我在问什么意思？

有时候我看到： p#mytext ... 为什么不同？我会继续寻找教程，但感谢任何建议。

- billy vandory

恭喜您进入 Stack Overflow！+1 - Sinan

1

“继承”不是正确的术语，你所说的只是CSS选择器。 :) - deceze

7个回答

6

#mytext 参照的是  （不需要是 p 元素，#mytext 只是指该ID）

相反，.mytext 参照的是  （不需要是 p 元素，.mytext 只是指任何具有该类名的元素）

通过添加其他内容，例如 p.mytext，您可以创建更强的绑定规则，例如： p.mytext { color:white; } .mytext { color:black; }

乍一看，颜色似乎应该是黑色，但是由于您创建了更强的绑定（通过更早地进行更具体的规定），实际颜色将为白色。

- balupton

2

CSS 101 - 基础知识

CSS - all elements
    * { ... }
HTML - basic element
    <p></p>
CSS
    p { ... }
HTML - element with id
    <p id="someid"></p>
CSS - element with id
    p#someid { ... }
CSS - all id's
    #someid { ... }
HTML - element with class
    <p class="someclass"></p>
CSS - element with class
    p.someclass { ... }
CSS - all elements with class
    .someclass { ... }
CSS -  is equal to
    *.someclass { ... }
HTML - element with both id and class
    <p id="someid" class="someclass"></p>
CSS
    p#someid.someclass { ... }
HTML - nested element
    <p><span></span></p>
CSS
    p span { ... }
HTML - nested element with id
    <p><span id="someid"></span></p>
CSS
    p span#someid { ... }
HTML - nested element with class
    <p><span class="someclass"></span></p>
CSS
    p span.someclass { ... }
HTML - nested element with id in element with class
    <p class="someclass"><span id="someid"></span></p>
CSS
    p.someclass span#someid { ... }

现在您可以混合和匹配所有这些内容，以创建非常复杂的选择器。

如果您想要具有相同属性的多个选择器，则可以使用逗号将它们分开。

    p.someclass, span#someid { ... }

- Ties

2

请先查看这个问题。简单来说，#代表css中的ID, .代表类。如果你在css中写 p#myText，它意味着你在html中有一个 ，而p.myText是指  。

此外，如果你在html中有唯一的元素，你会声明一个ID，如果你有多个具有相同样式的元素，则会为它们声明一个类。

- Sinan

1

哈希（#）是一个唯一的ID定义。

#foo { color: blue; }

<div id="foo">

.是一个类定义符号。

.bar { color: red; }

<div class="bar">

但是您也可以引用具有特定类和ID的标签：

div.baz { color: green; }
span#qux { color: yellow; }

<div class="baz">
<span id="qux">

- gpmcadam

1

对于这个有趣的问题点赞。

首先，你搞反了，.（句号）是类别，#是ID。你可能已经知道了，但一个元素只能有一个ID，并且在页面上只应该定义一次该ID。

至于问题的第二部分，一些人喜欢将元素名称附加到它们的类和ID中。这样比没有定义更具体。

img.large { width 200px /* Only applies to img with large class */ }
textarea.large { width: 300px /* Only applies to textareas with large class */ }
p#large { font-size: 1.5em; /* Only applies to p with ID of large */ }
.large { font-size: 2em; /* Applies to any element with class of large */ }

个人而言，我喜欢在我的样式中添加元素名称，这样我就不会忘记它影响的是哪些元素。

- Derek Hunziker

0

假设你有以下的HTML代码：

<div id="main">
    <p class="para">content</p>
    <p class="para">content</p>
</div>

然后：

div#main { }

引用具有“main” ID的divs

#main { }

引用所有具有"id"为"main"的元素

p.para { }

引用所有类名为“para”的p元素

.para { }

引用具有"class"为"para"的所有元素

注意：在页面上，ID必须是唯一的，而类可以多次使用

- Darko

引用具有“main” ID的div - ID是唯一的，因此它仅适用于一个元素。 - Gert Grenander

是的，页面中有一个元素，但您可能有多个带有元素div#main的页面。 - Darko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike · Accepted Answer

井号符号 (#) 指的是页面上需要唯一的ID。句点符号 (.) 指的是可以多次使用的类。如果想要为一个 (只有一个) 段落标签设置独特的样式，人们会使用 p#mytext。

您可以在这里了解更多信息。

需要补充的是，一些网页开发人员似乎倾向于将所有内容都声明为类。如果您经常使用布局生成器，则几乎每个元素都将是类。