Html 为什么文本不是'；不是白色的吗？_Html_Css

Html 为什么文本不是'；不是白色的吗？

html css

Html 为什么文本不是'；不是白色的吗？,html,css,Html,Css,资料来源如下： <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>White</title> <style> body { background-color: black; } .quadrant-legend { position: absolute; left : 28px; wi

资料来源如下：

<!doctype html>
<html>
<head>
   <meta charset="UTF-8" />
   <title>White</title>
   <style>
body {
   background-color: black;
}
.quadrant-legend {
    position: absolute;
    left    :  28px;
    width   : 288px;
    height  :  62px;
}
.quadrant-legend-img {
    position: absolute;
    top     : 0;
    left    : 0;
    z-index : 3;
}
.quadrant-legend-btn {
    position: absolute;
    top     :  6px;
    right   : 34px;
    z-index : 3;
}
.quadrant-legend-text {
    margin-left: 16px;
    margin-top : 16px;
    font-family: arial, sans-serif;
    font-size  : 26px;
    color      : white;
    z-index    : 4;
}
#quadrant-legend-asset {
    top: 60px;
    z-index: 4;
}
   </style>
</head>
<body>
   <div id="quadrant-legend-asset" class="quadrant-legend">
      <img class="quadrant-legend-img" src="images/quadrant-bg.svg" />
      <img class="quadrant-legend-btn" src="images/quadrant-asset-btn.svg" />
      <p class="quadrant-legend-text">lightblue text</p>
   </div>
   <p class="quadrant-legend-text">white text</p>
</body>
</html>


白色
身体{
背景色：黑色；
}
.象限图例{
位置：绝对位置；
左：28px；
宽度：288px；
高度：62px；
}
.象限图例img{
位置：绝对位置；
排名：0；
左：0；
z指数：3；
}
.象限图例btn{
位置：绝对位置；
顶部：6px；
右：34px；
z指数：3；
}
.象限图例文本{
左边距：16像素；
边缘顶部：16px；
字体系列：arial，无衬线；
字号：26px；
颜色：白色；
z指数：4；
}
#象限图例资产{
顶部：60px；
z指数：4；
}
浅蓝色文本
白色文本

以及Firefox或Chrome显示的结果

问题是：为什么白色文本变成浅蓝色？

注意：我添加了一些

z-index

CSS指令，但没有任何效果。

这很可能是一个特殊性问题，因此请尝试将父项添加到规则中

plus

z-index

将仅在
position
ed元素中工作，但我很确定在这种特定情况下您不需要它

正文{ 背景色：黑色； } .象限图例{ 位置：绝对位置；左：28px；宽度：288px；高度：62px； } .象限图例img{ 位置：绝对位置；排名：0；左：0； z指数：3； } .象限图例btn{ 位置：绝对位置；顶部：6px；右：34px； z指数：3； } #象限图例资源。象限图例文本{ 左边距：16像素；边缘顶部：16px；字体系列：arial，无衬线；字号：26px；颜色：白色； z指数：4；位置：绝对位置 } #象限图例资产{ 顶部：60px； z指数：4；职位：相对 }

浅蓝色文本白色文本
很可能是特殊性问题，因此请尝试将父项添加到规则中
plus
z-index
将仅在
position
ed元素中工作，但我很确定在这种特定情况下您不需要它

正文{ 背景色：黑色； } .象限图例{ 位置：绝对位置；左：28px；宽度：288px；高度：62px； } .象限图例img{ 位置：绝对位置；排名：0；左：0； z指数：3； } .象限图例btn{ 位置：绝对位置；顶部：6px；右：34px； z指数：3； } #象限图例资源。象限图例文本{ 左边距：16像素；边缘顶部：16px；字体系列：arial，无衬线；字号：26px；颜色：白色； z指数：4；位置：绝对位置 } #象限图例资产{ 顶部：60px； z指数：4；职位：相对 }

浅蓝色文本白色文本
。象限图例img
和
是位置：绝对，但。象限图例文本没有位置属性。这意味着，象限图例文本上的z索引将不适用，使文本显示在象限图例img 后面，这是您的图像/quadrant bg.svg ，我假设它是半透明的蓝色矩形你不应该使用太多的代码>位置：绝对< /代码>你的基本布局特征-考虑使用<代码>浮点：右< <代码> >代码>象限图例BTN<代码>并删除<代码>象限传说IMG<代码>有利于<代码>背景图像< /代码> .quadrant legend asset .quadrant legend img 和.quadrant legend btn 是位置：绝对值，但。quadrant legend text 没有位置属性。这意味着，象限图例文本上的z索引将不适用，使文本显示在象限图例img 后面，这是您的图像/quadrant bg.svg ，我假设它是半透明的蓝色矩形 <>你不应该使用这么多<代码>位置：绝对< /代码>你的基本布局特征-考虑使用<代码>浮标：右< <代码> >代码>象限BTN < /代码>并删除<代码>象限传说IMG<代码>有利于<代码>背景图像<代码> >代码>象限传奇资产 > < p> <代码> z索引< /代码>属性仅适用于定位的图元（请参见）。您的图像/象限bg.svg 图像可能部分透明，并显示在文本顶部将position:relative 添加到.quadrant legend text 选择器中，您应该会没事。 z-index
属性仅适用于定位元素（请参阅）。您的
图像/象限bg.svg
图像可能部分透明，并显示在文本顶部
将
position:relative
添加到
.quadrant legend text
选择器中，您应该没事了。
尝试：

.quadrant-legend-text p { color : #fff; }
尝试：

尝试添加
！重要信息
推荐
！重要提示
是个坏主意。在诉诸
之前，您应该始终使用更具体的选择器！重要信息
。使用您提供的代码，文本为白色：尝试将
位置：相对
添加到
。象限图例文本
，
z索引
仅适用于定位的元素。@aghidini:Beat me to.：）尝试添加
！重要信息
推荐
！重要提示
是个坏主意。在诉诸
之前，您应该始终使用更具体的选择器！重要信息
。使用您提供的代码，文本为白色：尝试将
位置：相对
添加到
。象限图例文本
，
z索引
仅适用于定位的元素。@aghidini:Beat me to.：）背景图像