html - css伪类颜色属性不起作用
问题描述
这是我用来运行示例项目的 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 中运行时,颜色属性没有改变,但字体粗细和字体样式属性正在改变。
谢谢你帮助我
解决方案
颜色变为蓝色,没有任何问题。但是,这是您正在设置样式的链接。一旦点击它,它的颜色就会变成紫色。
要将紫色强制为蓝色或任何其他颜色,您还需要使用另一个伪类来设置链接的样式。
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>
推荐阅读
- multithreading - QtConcurred 生成的线程具有与主线程相同的 ID
- javascript - 守望者抓取失败:未检测到更改
- mysql - 尝试通过 Spark 和 JDBC 连接 MySQL 数据库时出错
- scala - 'asInstanceOf[Class[_]]' 是什么意思
- angular - 在 Scala 后端转换从 Angular 收到的 TZ 日期
- javascript - 如何格式化图表中的数字
- file - svn:无法打开文件'/svn/**/db/transactions/59811-1a70.txn/changes':打开的文件太多(已解决)
- html - 弹性列的高度相等
- javascript - 在输入中键入清除文本时更新Vue组件
- c++ - 为 X Plane 11 SDK 设置代码块 (Linux Mint)