Question

我是CSS的新手，我试图建立一个非常简单的网站，我的布局已经做了很多，现在的问题是，当我输入div的特定背景颜色属性B + c，B和C时，它选择＆＃ 39; t似乎有任何影响，我检查了其他问题，我知道我应该使用溢出：隐藏;也试过清楚：两者;但是它们似乎都没有用，你能指出我做错了吗？

＆＃13;

<!doctype html>
<html>
<style>
  body {
    background: url(5750520604_febd0975e8_o.jpg), linear-gradient(180deg, #FFFFFF 80%, #B4B4B4 20%);
    background-color: white;
    background-size: 70%;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
  
  #A {
    overflow: hidden;
    border: none;
  }
  
  object {
    width: 1500px;
    height: 800px;
    display: inline-block;
  }
  
  #B {
    background-color: #777676;
    clear: both;
    display: flex;
    overflow: hidden;
    margin-left: -10px;
    border: none;
    width: 600px;
    border: thick;
    height: 300px;
    display: inline-block;
    margin-right: 0px;
    float: left;
  }
  
  #C {
    background-color: #777676;
    clear: both;
    display: flex;
    flex: 0 1 auto;
    overflow: hidden;
    border: thick;
    width: 1250px;
    height: 300px;
    display: inline-block;
    margin-right: -10px;
  }
  
  #B+C {
    background-color: #777676;
    clear: both;
    overflow: hidden;
    border: none;
    width: 1900px;
    height: 1000px;
  }
  
  .webmaster {
    background-color: #777676;
    clear: both;
    margin-left: -10px;
    background-color: white;
    overflow: hidden;
    height: 80px;
    width: 1920px;
    border: none;
    font-family: Georgia;
    text-align: justify;
    padding: 20px 640px;
    font-size: 20px;
    margin-top: -5px;
  }
  
  a:link {
    text-decoration: none;
    color: #000000;
  }
  
  a:visited {
    text-decoration: none;
    color: #4C4C4C;
  }
  
  a:hover {
    text-decoration: none;
    color: #B2B2B2;
  }
  
  a:active {
    color: #000000;
    text-decoration: underline;
  }
</style>

<head>
  <meta charset="utf-8">
  <title>Rodriguez Tullio Propiedades</title>
</head>

<body>

  <div id="A">
    <object type="text/html" data="A.html">
</object></div>
  <div id="B+C">
  </div>
  <div id="B">
    <object type="text/html" data="B.html">
</object></div>
  <div id="C">
    <object type="text/html" data="C.html">
</object></div>

  <div class="webmaster">2017 | <a href="mailto:webmaster@tullio.com.ar">webmaster@tullio.com.ar</a> |</div>


</body>

</html>

＆＃13;

Answer 1

这里有两个问题：

您无法使用B+C作为您的ID属性。根据文件：

该值不得包含任何空格字符。 HTML 4：ID和NAME 代币必须以字母（[A-Za-z]）开头，并且可以跟随任何字母字母数，数字（[0-9]），连字符（＆＃34; - ＆＃34;），下划线（＆＃34; _＆＃34;），冒号（＆＃34;：＆＃34;）和句号（＆＃34;。＆＃34;）。

B+C使用特定的相邻运算符（+符号）。在CSS中，这意味着样式定义将使用标记C的DOM元素作为目标，该标记紧跟在带有标记B的DOM元素之后。

首先，在您的HTML标记中，尝试将id="B+C"更改为id="D"。然后，在您的CSS中，将#B+C更改为#D

工作示例：https://jsfiddle.net/gkh2pj2j/1/

Answer 2

＆＃39; +＆＃39;符号在CSS中保留为类运算符。它将在#B之后抓取#C（代码为#B + #C）。因此，我建议您将B + c ID更改为B-plus-C（如果该名称适合您）。我编辑了你的代码，包括id和css样式。我将背景颜色更改为红色，但不要担心我将颜色留作评论。我只是想让元素颜色变得非常明显。

＆＃13;

body {
    background: url(5750520604_febd0975e8_o.jpg), linear-gradient(180deg, #FFFFFF 80%, #B4B4B4 20%);
    background-color: white;
    background-size: 70%;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
  
  #A {
    overflow: hidden;
    border: none;
  }
  
  object {
    width: 1500px;
    height: 800px;
    display: inline-block;
  }
  
  #B {
    background-color: #777676;
    clear: both;
    display: flex;
    overflow: hidden;
    margin-left: -10px;
    border: none;
    width: 600px;
    border: thick;
    height: 300px;
    display: inline-block;
    margin-right: 0px;
    float: left;
  }
  
  #C {
    background-color: #777676;
    clear: both;
    display: flex;
    flex: 0 1 auto;
    overflow: hidden;
    border: thick;
    width: 1250px;
    height: 300px;
    display: inline-block;
    margin-right: -10px;
  }
  
  #B-plus-C {
    /*background-color: #777676;*/
	background-color:red;
    clear: both;
    overflow: hidden;
    border: none;
    width: 1900px;
    height: 1000px;
  }
  
  .webmaster {
    background-color: #777676;
    clear: both;
    margin-left: -10px;
    background-color: white;
    overflow: hidden;
    height: 80px;
    width: 1920px;
    border: none;
    font-family: Georgia;
    text-align: justify;
    padding: 20px 640px;
    font-size: 20px;
    margin-top: -5px;
  }
  
  a:link {
    text-decoration: none;
    color: #000000;
  }
  
  a:visited {
    text-decoration: none;
    color: #4C4C4C;
  }
  
  a:hover {
    text-decoration: none;
    color: #B2B2B2;
  }
  
  a:active {
    color: #000000;
    text-decoration: underline;
  }

＆＃13;

<head>
  <meta charset="utf-8">
  <title>Rodriguez Tullio Propiedades</title>
</head>

<body>

  <div id="A">
    <object type="text/html" data="A.html">
</object></div>
  <div id="B-plus-C">
  </div>
  <div id="B">
    <object type="text/html" data="B.html">
</object></div>
  <div id="C">
    <object type="text/html" data="C.html">
</object></div>

  <div class="webmaster">2017 | <a href="mailto:webmaster@tullio.com.ar">webmaster@tullio.com.ar</a> |</div>

＆＃13;

无法更改特定div的背景颜色

2 个答案: