css伪类colour属性不工作

这是HTMl和css代码我用来运行一个示例项目，我无法理解为什么我的css样式是从在线编译器和IDE（虚拟工作室代码）不同，所以请帮助我在这

li:first-child {
  color: blue;
  font-weight: bold;
  font-style: italic;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>the Basic Language of the Web: HTML</title>
  </head>

  <body>
    <header class="main-header">
      <h1>📘 The Code Magazine</h1>

      <nav>
        <a href="./blog.html">Blog</a>
        <a href="#">Challenges</a>
        <a href="#">Flexbox</a>
        <a href="#">CSS Grid</a>
      </nav>
      <p>test text</p>
    </header>

      
      
  

      <h3>Why should you learn HTML?</h3>
      <p>
        There are countless reasons for learning the fundamental language of the
        web. Here are 5 of them:
      </p>
      <ul>
        <li>
          <p>To be able to use the fundamental web dev language</p>
        </li>
        <li>
          To hand-craft beautiful websites instead of relying on tools like
          Worpress or Wix
        </li>
        <li>To build web applications</li>
        <li>To impress friends To have fun 😃</li>
      </ul>
      <p>Hopefully you learned something new here. See you next time!</p>
    </article>

    <aside>
      <h4>Related posts</h4>
      <ul class="related">
        <li>
          <img
            src="img/related-1.jpg"
            alt="related 1 image"
            width="75"
            ,height="75"
          /><a href="#"> How to Learn Web Bevelopment </a>
          <p class="related-author">By Jonas Schmedtmann</p>
        </li>
        <li>
          <img
            src="img/related-2.jpg"
            alt="related-2 image"
            width="75"
            height="75"
          />
          <a href="#"> The Unknown Powers of CSS </a>
          <p class="related-author">By Jim Dillon</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3 image"
            height="75"
            ,width="75"
          />
          <a href="#">Why JavaScript is Awesome</a>
          <p class="related-author">By Matilda</p>
        </li>
      </ul>
    </aside>

        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3 image"
            height="75"
            ,width="75"
          />
          <a href="#">Why JavaScript is Awesome</a>
          <p class="related-author">By Matilda</p>
        </li>
      </ul>

这里我使用了一个伪类来改变li标签的第一个子标签的属性。在.related中，颜色在在线编译器中改变，但是当我在VSCode中运行时，颜色属性没有改变，但是字体粗细和字体样式属性改变了。
谢谢你帮我
here is my screenshot run in VS code

颜色更改为蓝色没有任何问题。然而，这是一个链接，你的风格。一旦它被点击，它的颜色更改为紫色。
要将紫色强制为蓝色或任何其他颜色，还需要使用另一个psuedo类来设置链接的样式。

li a:visited {
  color: blue;
}

字符串

编辑：

如果你给.related-author类一个颜色，它将覆盖你的li:first-child样式，因为它有更高的特异性级别。
看这里，例如：

.related-author {
  color: grey;
}

li:first-child {
  color: blue;
  font-weight: bold;
  font-style: italic;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="style.css" />
  <title>the Basic Language of the Web: HTML</title>
</head>
<body>
  <header class="main-header">
    <h1>📘 The Code Magazine</h1>
    <nav>
      <a href="./blog.html">Blog</a>
      <a href="#">Challenges</a>
      <a href="#">Flexbox</a>
      <a href="#">CSS Grid</a>
    </nav>
    <p>test text</p>
  </header>
  <h3>Why should you learn HTML?</h3>
  <p>
    There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
  </p>
  <ul>
    <li>
      <p>To be able to use the fundamental web dev language</p>
    </li>
    <li>
      To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
    </li>
    <li>To build web applications</li>
    <li>To impress friends To have fun 😃</li>
  </ul>
  <p>Hopefully you learned something new here. See you next time!</p>
  </article>
  <aside>
    <h4>Related posts</h4>
    <ul class="related">
      <li>
        <img src="img/related-1.jpg" alt="related 1 image" width="75" ,height="75" /><a href="#"> How to Learn Web Bevelopment </a>
        <p class="related-author">By Jonas Schmedtmann</p>
      </li>
      <li>
        <img src="img/related-2.jpg" alt="related-2 image" width="75" height="75" />
        <a href="#"> The Unknown Powers of CSS </a>
        <p class="related-author">By Jim Dillon</p>
      </li>
      <li>
        <img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
        <a href="#">Why JavaScript is Awesome</a>
        <p class="related-author">By Matilda</p>
      </li>
    </ul>
  </aside>

  </li>
  <li>
    <img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
    <a href="#">Why JavaScript is Awesome</a>
    <p class="related-author">By Matilda</p>
  </li>
  </ul>

的数据
要解决此问题，请使用用途：

.related-author {
  color: grey;
}

li:first-child > * {
  color: blue;
  font-weight: bold;
  font-style: italic;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="style.css" />
  <title>the Basic Language of the Web: HTML</title>
</head>
<body>
  <header class="main-header">
    <h1>📘 The Code Magazine</h1>
    <nav>
      <a href="./blog.html">Blog</a>
      <a href="#">Challenges</a>
      <a href="#">Flexbox</a>
      <a href="#">CSS Grid</a>
    </nav>
    <p>test text</p>
  </header>
  <h3>Why should you learn HTML?</h3>
  <p>
    There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
  </p>
  <ul>
    <li>
      <p>To be able to use the fundamental web dev language</p>
    </li>
    <li>
      To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
    </li>
    <li>To build web applications</li>
    <li>To impress friends To have fun 😃</li>
  </ul>
  <p>Hopefully you learned something new here. See you next time!</p>
  </article>
  <aside>
    <h4>Related posts</h4>
    <ul class="related">
      <li>
        <img src="img/related-1.jpg" alt="related 1 image" width="75" ,height="75" /><a href="#"> How to Learn Web Bevelopment </a>
        <p class="related-author">By Jonas Schmedtmann</p>
      </li>
      <li>
        <img src="img/related-2.jpg" alt="related-2 image" width="75" height="75" />
        <a href="#"> The Unknown Powers of CSS </a>
        <p class="related-author">By Jim Dillon</p>
      </li>
      <li>
        <img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
        <a href="#">Why JavaScript is Awesome</a>
        <p class="related-author">By Matilda</p>
      </li>
    </ul>
  </aside>

  </li>
  <li>
    <img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
    <a href="#">Why JavaScript is Awesome</a>
    <p class="related-author">By Matilda</p>
  </li>
  </ul>

的字符串

css伪类colour属性不工作

1条答案

相关问题

热门标签

最新问答