html - Paragraph Span Class 和 h3 是相同的十六进制代码，但显示为不同的颜色-6ren

html - Paragraph Span Class 和 h3 是相同的十六进制代码，但显示为不同的颜色

转载作者：行者123 更新时间：2023-11-28 04:51:28

对于我的#vocational div 中的元素，我希望段落的 h3 和 span 类具有相同的颜色。

本质上，我在#vocational div 中显示的是一系列推文。我希望推文所有者的主题标签和名称以及@username 的颜色完全相同，但即使十六进制代码相同，它们也会显示为不同的颜色。

这是为什么？我应该为我使用 h3 的目的使用段落吗？我该怎么做才能使颜色相同？

我希望#vocational div 看起来像的示例:

* {
  box-sizing: border-box;
}
@font-face {
    font-family: 'gilroysemibold';
    src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
         url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
  .clearfix:after {
  content:" ";
  display:table;
  clear:both;
}
body {
  margin: 0px;
}
#calltoaction {
  background-image: url("calltoactionbackground.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  display: inline-block;
  height: 500px;
  padding-bottom: 100px;
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 100px;
  text-align: center;
  width: 100%;
}
#calltoaction p {
  margin: auto;
  padding-top: 25px;
  padding-bottom: 55px;
  width: 500px;
}
#functions {
  background-color: #FFFFFF;
  display: block;
  height: 1500px;
  width: 100%;
}
#functions p {
  color: #62CE9C;
}
h1 {
  color: #FFFFFF;
  font-family: 'gilroysemibold';
  font-size: 36px;
  font-weight: normal;
}
h2 {
  color: #62CE9C;
  font-family: 'gilroysemibold';
  font-size: 30px;
  font-weight: normal;
}
h3 {
  color: #00AF78;
  font-family: Open Sans;
  font-size: 18px;
  line-height: 10px;
}
.hashtag {
  color: 	#00AF78;
}
#hero {
  background-color: #62CE9C;
  height: 600px;
  float: left;
  margin: 0px;
  padding-bottom: 100px;
  padding-left: 120px;
  padding-right: 120px;
  padding-top: 100px;
  width: 100%;
}
#herotext {
  float: left;
}
#hero h1 {
  width: 470px;
}
#hero img {
  display: block;
  float: right;
}
#hero p {
  padding-top: 30px;
  padding-bottom: 40px;
  width: 500px;
}
input, select, textarea{
    color: #62CE9C;
}

textarea:focus, input:focus {
    color: #62CE9C;
}
input::-webkit-input-placeholder {
color: #62CE9C !important;
}
 
input:-moz-placeholder { /* Firefox 18- */
color: #62CE9C !important;  
}
 
input::-moz-placeholder {  /* Firefox 19+ */
color: #62CE9C !important;  
}
 
input:-ms-input-placeholder {  
color: #62CE9C !important;  
}
p {
  color: #FFFFFF;
  font-family: Open Sans;
  font-size: 18px;
  line-height: 26px;
}
#save {
  float: center;
  display: block;
  margin: auto;
  padding-top: 400px;
  width: 800px;
}
#savefood {
  float: right;
  margin: auto;
}
#savefoodimage {
  float: right;
}
#savefoodtext {
  float: right;
  height: 300px;
  margin-right: 30px;
  padding-top: 30px;
  width: 290px; 
}
#savemoney {
  float: left;
  margin: auto;
}
#savemoneyimage {
  float: left;
}
#savemoneytext {
  float: left;
  height: 300px;
  margin-left: 30px;
  padding-top: 30px;
  width: 330px;
}
#savetime {
  float: left;
  margin: auto;
}
#savetimeimage {
  float: left;
}
#savetimetext {
  float: left;
  height: 300px;
  margin-left: 30px;
  padding-top: 30px;
  width: 330px;
}
#searchbar {
  background-color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  height: 40px;
  padding-left: 15px;
  width: 300px;
}
#searchbutton {
  background-color: #28C787;
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 18px;
  height: 40px;
  margin-left: 20px;
  width: 180px;
}
#searchbutton:hover {
  background-color: #00BE8B;
}
#tweetone {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweetone img {
  float: left;
  padding-top: 10px;
}
#tweetonetext {
  float: left;
  padding-left: 15px;
  width: 450px;
}
#tweettwo {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweettwo img {
  float: left;
  padding-top: 10px;
}
#tweettwotext {
  float: left;
  padding-left: 15px;
  width: 400px;
}
#tweetthree {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweetthree img {
  float: left;
  padding-top: 10px;
}
#tweetthreetext {
  float: left;
  padding-left: 15px;
  width: 450px;
}
ul {
  list-style-type: none;
}
#vocational {
  background-color: #62CE9C;
  display: inline-block;
  height: 1120px;
  padding-bottom: 100px;
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 100px;
  width: 100%;
}
#vocational h1 {
  margin: auto;
  text-align: center;
  margin-bottom: 0px;
  width: 500px;
}
#vocational p {
  color: #62CE9C;
  display: inline-block;
}

<!DOCTYPE html>
<html>
  <head>
    <link href="css/main.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  </head>
  <body>
    <div id="hero">
      <div id="herotext">
        <h1>Make the Most of your Food With Pantree</h1>
        <p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
        <form id="form">
          <input id="searchbar" type="text" placeholder="yourname@email.com"/>
          <input id="searchbutton" type="submit" value="Get Early Access" />
        </form>
      </div>
      <img src="images/phone.png"/>
    </div>
    <div id="functions">
      <div id=save>
        <div id="savemoney">
          <img id="savemoneyimage" src="images/savemoney.png"/>
          <div id="savemoneytext">
            <h2>Save Money</h2>
            <p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
          </div>
        </div>  
        <div id="savefood">
          <img id="savefoodimage" src="images/savefood.png"/>
          <div id="savefoodtext">
            <h2>Save Food</h2>
            <p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
          </div>
        </div>
        <div id="savetime">
          <img id="savetimeimage" src="images/savetime.png"/>
          <div id="savetimetext">
            <h2>Save Time</h2>
            <p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
          </div>
        </div>  
      </div>  
    </div>
    <div id="vocational">
      <h1>These Folks Could Use Pantree Every Day</h1>
      <ul>
        <li>
          <div id="tweetone">
            <img src="images/tweetone.png"/>
            <div id="tweetonetext">
              <h3>Kat</h3>
              <h3>@devicat</h3>
              <p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
            </div>          
          </div>  
        </li>
        <li>
          <div id="tweettwo">
            <img src="images/tweettwo.png"/>
            <div id="tweettwotext">
              <h3>Jack Falahee</h3>
              <h3>@RestingPlatypus</h3>
              <p>Dear Mom, How do I organize my kitchen? Love, me</p>
            </div>
          </div>
        </li>
        <li>
          <div id="tweetthree">
            <img src="images/tweetthree.png"/>
            <div id="tweetthreetext">
              <h3>mason ryan</h3>
              <h3>@MasonTheManiac</h3>
              <p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
            </div>  
          </div>  
        </li>
      </ul>
    </div>
    <div id="calltoaction">
      <h1>Manage your Kitchen, Effortlessly</h1>
      <p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
      <form id="form">
        <input id="searchbar" type="text" placeholder="yourname@email.com"/>
        <input id="searchbutton" type="submit" value="Get Early Access" />
      </form>
    </div>
  </body>
</html>

最佳答案

其颜色与 <h3> 相同, 区别在于 font-weight .

<h3> 有 font-weight: bold; , 而

.hashtag 有 font-weight: normal;

在 .hashtag 上使用粗体:

.hashtag {
  font-weight: bold;
}

看看下面的片段:

* {
  box-sizing: border-box;
}
@font-face {
    font-family: 'gilroysemibold';
    src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
         url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
  .clearfix:after {
  content:" ";
  display:table;
  clear:both;
}
body {
  margin: 0px;
}
#calltoaction {
  background-image: url("calltoactionbackground.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  display: inline-block;
  height: 500px;
  padding-bottom: 100px;
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 100px;
  text-align: center;
  width: 100%;
}
#calltoaction p {
  margin: auto;
  padding-top: 25px;
  padding-bottom: 55px;
  width: 500px;
}
#functions {
  background-color: #FFFFFF;
  display: block;
  height: 1500px;
  width: 100%;
}
#functions p {
  color: #62CE9C;
}
h1 {
  color: #FFFFFF;
  font-family: 'gilroysemibold';
  font-size: 36px;
  font-weight: normal;
}
h2 {
  color: #62CE9C;
  font-family: 'gilroysemibold';
  font-size: 30px;
  font-weight: normal;
}
h3 {
  color: #00AF78;
  font-family: Open Sans;
  font-size: 18px;
  line-height: 10px;
}
.hashtag {
  color: 	#00AF78;
  font-weight: bold;
}
#hero {
  background-color: #62CE9C;
  height: 600px;
  float: left;
  margin: 0px;
  padding-bottom: 100px;
  padding-left: 120px;
  padding-right: 120px;
  padding-top: 100px;
  width: 100%;
}
#herotext {
  float: left;
}
#hero h1 {
  width: 470px;
}
#hero img {
  display: block;
  float: right;
}
#hero p {
  padding-top: 30px;
  padding-bottom: 40px;
  width: 500px;
}
input, select, textarea{
    color: #62CE9C;
}

textarea:focus, input:focus {
    color: #62CE9C;
}
input::-webkit-input-placeholder {
color: #62CE9C !important;
}
 
input:-moz-placeholder { /* Firefox 18- */
color: #62CE9C !important;  
}
 
input::-moz-placeholder {  /* Firefox 19+ */
color: #62CE9C !important;  
}
 
input:-ms-input-placeholder {  
color: #62CE9C !important;  
}
p {
  color: #FFFFFF;
  font-family: Open Sans;
  font-size: 18px;
  line-height: 26px;
}
#save {
  float: center;
  display: block;
  margin: auto;
  padding-top: 400px;
  width: 800px;
}
#savefood {
  float: right;
  margin: auto;
}
#savefoodimage {
  float: right;
}
#savefoodtext {
  float: right;
  height: 300px;
  margin-right: 30px;
  padding-top: 30px;
  width: 290px; 
}
#savemoney {
  float: left;
  margin: auto;
}
#savemoneyimage {
  float: left;
}
#savemoneytext {
  float: left;
  height: 300px;
  margin-left: 30px;
  padding-top: 30px;
  width: 330px;
}
#savetime {
  float: left;
  margin: auto;
}
#savetimeimage {
  float: left;
}
#savetimetext {
  float: left;
  height: 300px;
  margin-left: 30px;
  padding-top: 30px;
  width: 330px;
}
#searchbar {
  background-color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  height: 40px;
  padding-left: 15px;
  width: 300px;
}
#searchbutton {
  background-color: #28C787;
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 18px;
  height: 40px;
  margin-left: 20px;
  width: 180px;
}
#searchbutton:hover {
  background-color: #00BE8B;
}
#tweetone {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweetone img {
  float: left;
  padding-top: 10px;
}
#tweetonetext {
  float: left;
  padding-left: 15px;
  width: 450px;
}
#tweettwo {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweettwo img {
  float: left;
  padding-top: 10px;
}
#tweettwotext {
  float: left;
  padding-left: 15px;
  width: 400px;
}
#tweetthree {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweetthree img {
  float: left;
  padding-top: 10px;
}
#tweetthreetext {
  float: left;
  padding-left: 15px;
  width: 450px;
}
ul {
  list-style-type: none;
}
#vocational {
  background-color: #62CE9C;
  display: inline-block;
  height: 1120px;
  padding-bottom: 100px;
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 100px;
  width: 100%;
}
#vocational h1 {
  margin: auto;
  text-align: center;
  margin-bottom: 0px;
  width: 500px;
}
#vocational p {
  color: #62CE9C;
  display: inline-block;
}

<!DOCTYPE html>
<html>
  <head>
    <link href="css/main.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  </head>
  <body>
    <div id="hero">
      <div id="herotext">
        <h1>Make the Most of your Food With Pantree</h1>
        <p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
        <form id="form">
          <input id="searchbar" type="text" placeholder="yourname@email.com"/>
          <input id="searchbutton" type="submit" value="Get Early Access" />
        </form>
      </div>
      <img src="images/phone.png"/>
    </div>
    <div id="functions">
      <div id=save>
        <div id="savemoney">
          <img id="savemoneyimage" src="images/savemoney.png"/>
          <div id="savemoneytext">
            <h2>Save Money</h2>
            <p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
          </div>
        </div>  
        <div id="savefood">
          <img id="savefoodimage" src="images/savefood.png"/>
          <div id="savefoodtext">
            <h2>Save Food</h2>
            <p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
          </div>
        </div>
        <div id="savetime">
          <img id="savetimeimage" src="images/savetime.png"/>
          <div id="savetimetext">
            <h2>Save Time</h2>
            <p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
          </div>
        </div>  
      </div>  
    </div>
    <div id="vocational">
      <h1>These Folks Could Use Pantree Every Day</h1>
      <ul>
        <li>
          <div id="tweetone">
            <img src="images/tweetone.png"/>
            <div id="tweetonetext">
              <h3>Kat</h3>
              <h3>@devicat</h3>
              <p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
            </div>          
          </div>  
        </li>
        <li>
          <div id="tweettwo">
            <img src="images/tweettwo.png"/>
            <div id="tweettwotext">
              <h3>Jack Falahee</h3>
              <h3>@RestingPlatypus</h3>
              <p>Dear Mom, How do I organize my kitchen? Love, me</p>
            </div>
          </div>
        </li>
        <li>
          <div id="tweetthree">
            <img src="images/tweetthree.png"/>
            <div id="tweetthreetext">
              <h3>mason ryan</h3>
              <h3>@MasonTheManiac</h3>
              <p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
            </div>  
          </div>  
        </li>
      </ul>
    </div>
    <div id="calltoaction">
      <h1>Manage your Kitchen, Effortlessly</h1>
      <p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
      <form id="form">
        <input id="searchbar" type="text" placeholder="yourname@email.com"/>
        <input id="searchbutton" type="submit" value="Get Early Access" />
      </form>
    </div>
  </body>
</html>

希望这对您有所帮助!

关于html - Paragraph Span Class 和 h3 是相同的十六进制代码，但显示为不同的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40679608/

文章推荐： java - 准备位图 byte[] 数据以传递给 jni

文章推荐： javascript - 澄清一些关于 moment.js 的疑虑

文章推荐： javascript - jquery DOM 突变

文章推荐： javascript - Disqus 不显示评论数

Java 十六进制
我有一个消息 static int[] message = { 0x01, 0x10, 0x00, 0x01, // port addres 01 - 08
Python 十六进制
如何将十进制转换为以下格式的十六进制(至少两位，零填充，不带 0x 前缀)？输入:255 输出:ff 输入:2 输出:02 我尝试了 hex(int)[2:] 但它似乎显示了第一个示例而不是第二个示
Delphi编程将66位值(十六进制)转换为十进制
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicate: Large numbers in Pascal (Delphi) 我正在尝试将 66 位值转换为十进制。我注意到d
elisp - 转换十进制<->十六进制
给定一个十进制数字列表，如何将每个数字转换为其等效的十六进制值，反之亦然？例如: (convert2hex 255 64 64)； ->(FF 40 40) (convert2dec FF 40 4
javascript - 将字符串化的数字解析回数字。十六进制
var color = Math.floor(Math.random() * 16777215).toString(16); var hex = Number.parseInt(col
numbers - 0x00000000 十六进制？
我一直被教导 0-9 代表 0 到 9 的值，A、B、C、D、E、F 代表 10-15。我看到这种格式 0x00000000，它不适合十六进制模式。有没有导游或导师可以解释一下？我在谷歌上搜索了十
c++ - 读取文件为二进制/十六进制
我目前正尝试像十六进制编辑器一样将文件读取为十六进制值。为了解释这个问题，让我们假设我有一个test.txt，里面有一个简单的“Hello world”。我正在尝试使用接近以下代码的程序以十六进制形式
jQuery - 获取元素背景颜色(十六进制)
我正在尝试获取元素背景颜色 $(document).ready(function(){ $.each('.log-widget',function(){ console.log($(t
Lua - 十六进制 float
0x40130020的十六进制值是 2.296883 的浮点值, 使用本网站 http://gregstoll.dyndns.org/~gregstoll/floattohex/ .这如何实现到 Lu
ios - 十六进制 - 什么编码？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，vis
c++ - 转换字符 > 十六进制
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
十六进制 float 表示的计算值
谁能解释一下我们如何计算十六进制浮点常量的值。我在看书，发现0x0.3p10代表值192。最佳答案指数仍以十进制表示，但底数为二，尾数为十六进制。所以 0.3P10 是 (3 × 16−1) ×
PHP - 根据给定变量计算颜色(十六进制)
我正在尝试创建一个标签云，需要帮助来创建一个函数来计算应用于每个标签链接所需的颜色。我有 3 个变量: 单个标签重要性(从 0.1 到 1) 最大(最重要)的标签颜色(十六进制代码，例如“fff00
c# - 最短编码，十六进制
大家好，我想发送尽可能短的字符串/值。如果我有以下内容 1)l23k43i221j44h55uui6n433bb4 2)124987359824369785493584379 3)kla^askdja
CSS 十六进制 RGBA？
我知道你会写... background-color: #ff0000; ...如果你想要红色的东西。你可以写... background-color: rgba(255, 0, 0, 0.5);
binary - 如何将我的二进制(十六进制)数据转换为纬度和经度？
我有一些传递地理位置坐标的二进制数据流 - 纬度和经度。我需要找到它们编码的方法。 4adac812 = 74°26.2851' = 74.438085 2b6059f9 = 43°0.2763'
sql - 在sqlite中删除9D(十六进制)字符
我想从 my_table 中选择 family，其中 family LIKE '%HEX(9D)' 家庭十六进制格式以 9D 十六进制结尾我将excel文件转换为sqlite数据库但是我的一些数据
binary - 三路二进制(十六进制)文件比较工具？
我有一组二进制配置文件，每个文件有三个版本——每个文件的原始版本和两个不同修改的版本。我需要能够同时看到两个版本和原始版本之间的差异。我需要的是一个二进制文件的三向差异工具。通过相当费力的谷歌搜索，
powershell - 将字节数组(十六进制)转换为有符号的Int
我正在尝试将(可变长度)十六进制字符串转换为带符号整数(我需要正值或负值)。 [Int16] [int 32]和[int64] 似乎可以在2,4+字节长的十六进制字符串上正常工作，但我在使用3个字节的
facebook - 如何在Facebook中使用unicode(十六进制)输出字符？
如何将十六进制的 unicode 写入 Facebook“您在想什么”框？我尝试过写: \u00B9 "\u00B9" ¹ "¹" 到目前为止没有任何效果 (让我补充一下，我是在 M

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - Paragraph Span Class 和 h3 是相同的十六进制代码，但显示为不同的颜色