Question

我一直在阅读关于CSS的内容，我对继承如何工作感到困惑（我认为这是下面的正确术语）。在CSS中，我可以声明一个类：

#mytext {
}

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

p.mytext {
}

但为什么呢？他们为什么不能这样做：

<p class="mytext">

不声明p.mytext？我问的是有意义的吗？

有时候我会看到：

p#mytext ...为什么会有所不同？我将继续搜索教程，但感谢任何建议。

Answer 1

井号（#）指的是页面需要唯一的ID。句点（.）指的是可以多次使用的类。如果他们想要一个（仅一个）段落标记的独特样式，人们会使用p#mytext。

您可以阅读here。

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

Answer 2

#mytext引用（不一定是p元素，#mytext仅引用该ID）

鉴于.mytext引用（不一定是p元素，.mytext只引用具有该类名的任何内容）

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

起初可能看起来颜色会是黑色，但是因为你已经创建了一个更强的绑定（通过更具体的更早），实际颜色将是白色。

Answer 3

首先检查this question here。

简而言之，#代表css中的ID，.代表一个类。如果你在css中说p#myText，则表示你的html中有，p.myText代表。

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

Answer 4

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

Answer 5

哈希（#）是唯一的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">

Answer 6

+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 */ }

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

Answer 7

假设您有以下HTML：

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

然后：

div#main { }

引用id为“main”的div

#main { }

引用id为“main”的所有元素

p.para { }

使用“para”类

引用所有p元素

.para { }

使用“para”类

引用所有元素

NB。页面上的ID必须是唯一的，而类可以多次使用

对CSS继承感到困惑

7 个答案: