Question

我在很多css教程中都看到过像p.class或p＃id这样的语法例如

p.center

但我总是必须使用class p{ }，否则它不会被应用。

有什么建议吗？

＆＃13;

#nav li {
  display: inline-block;
}

li#nav {
  display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="first.css">
</head>

<body>

  <div id="icon">
    <h1>icon</h1>

    <div id="nav">
      <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

p.center {}指的是带有＆＃39; center＆＃39; class和.center p {}指的是元素内的所有p元素都有.center类。因此，根据您的html结构，您可以拥有css选择器。

您可以参考here

Answer 2

＆＃13;

li.list {
  display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="first.css">
</head>

<body>

  <div id="icon">
    <h1>icon</h1>

    <div id="nav">
      <ul>
        <li class="list"><a href="#">link</a></li>
        <li class="list"><a href="#">link</a></li>
        <li class="list"><a href="#">link</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

＆＃13;

因此，element.classname意味着，元素必须具有classname的类。同样适用于id。但是，请记住#id始终是唯一的。所以，在这种情况下更喜欢classname。

Answer 3

此外，您正在尝试更改html中的p{}元素。

在css中你只需要P但这会改变你网页上的所有{{1}}，这通常不是一个好主意，除非你确信这是你想要的，无论你做什么什么。

为什么＆＃39; p.class或li＃id＆＃39;我使用这种格式时不会被应用？

3 个答案: