DOCTYPE中斷nth-child背景顏色

Question

我的CSS已通過驗證，但是在添加<!DOCTYPE html>時仍會中斷。 我究竟做錯了什么？ 我在論壇上進行了搜索，常見的回答似乎是[增加身高：100％，html標簽。 做到了，但是沒有運氣。

不使用DOCTYPE： http : //www.babeweiser.com/rockhistory/使用DOCTYPE： http : //www.babeweiser.com/rockhistory/test.php

的CSS

html, body 
{
height: 100%;
width: 100%;
background: #333333; 
}
div.Container
{
margin: auto;
width: 90%;
background: #5e6d3d;
padding: 10px;
}
p 
{
font-family: sans-serif;
}
.Table
{
    display: Table;
}
.Title
{
    display: table-caption;
    text-align: center;
    font-weight: bold;
    font-size: larger;
    background: #c6d4a8;
}
.Heading
{
    display: table-row;
    font-weight: bold;
    text-align: center;
}
.Row
{
    display: table-row;
    height: 100%; width: 100%;
}
div.row:nth-child(odd)
{
background: #daedb2;
}
div.row:nth-child(even)
{
background: #c6d4a8;
}
.Cell
{
    display: table-cell;
    padding: 15px;
}
select:required:invalid 
{
color: #999;
}
option {
color: #000;
}

test.php：

<!DOCTYPE html>
<html>
<head>
<title>Today in Rock History</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<link rel="stylesheet" type="text/css" href="rockhistory2.css">

<script>
$(function() {
  $.ajax({  
      type: "POST",  
      url: "pull_history2.php",  
      data: "" + status,  
      success: function(data){  
          document.getElementById("demo").innerHTML = data;

      }  
  });
});
</script>

<script>
$(document).ready(function()
{   
    $(document).on('submit', '#reg-form', function()
    {

        var data = $(this).serialize();

        $.ajax({

        type : 'POST',
        url  : 'pull_history2.php',
        data : data,
        success :  function(data)
                {       
                document.getElementById("demo").innerHTML = data;
                }
        });
        return false;
    });
});

</script>



</head>

<body>

<div class="Container">
<form id="reg-form" name="reg-form" method="post">
<select name="month" required  id="month" size="1">
<option value="" disabled selected>Month</option>
<?php 
$mo = 1; 
while($mo <= 12) {
    echo '<option value= "' . $mo . '">' . date("F", mktime(0, 0, 0, $mo+1, 0, 0)) . '</option>';
    echo "\n";
    $mo++;
} 
?>
</select>
<select name="day" required id="day" size="1">
<option value="" disabled selected>Day</option>
<?php
$da = 1; 
while($da <= 31) {
    echo '<option value= "' . $da . '">' . date("j", mktime(0, 0, 0, 0, $da, 0)) . '</option>';
    echo "\n";
    $da++;
} 
?>

 </select>
 <button type="submit" >Go</button>

 </form>

    <p id="demo"></p>

</div>

</body>

</html>

pull_history2.php：

<?php

if($_POST) {
    $month= $_POST['month'];
    $day= $_POST['day'];
} else {
    $month = date('n');
    $day = date('j');
}

$tdate=date("F j", mktime(0, 0, 0, $month, $day, 0));

?>
<div class="Table">
    <div class="Title">
        <p><? echo "This Day in Rock History for $tdate" ?></p>
    </div>
    <div class-"heading"> 
    </div>

<?php
    $db = mysql_connect("localhost","xxx", "xxx");
    mysql_select_db("babewe5_wlup",$db);
    $result = mysql_query("SELECT * FROM RockHistory081512 WHERE      month=$month AND day=$day ORDER BY year",$db);
        if (!$result) { echo("ERROR: " . mysql_error() . "\n$SQL\n"); }
            while ($row = mysql_fetch_array ($result)) {
            ?>

            <div class="Row">
                    <div class="Cell">
                            <p><? echo $row["year"] ?></p>
                    </div>
                    <div class="Cell">
                            <p><? echo $row["history"] ?></p>                       
                    </div>
            </div>
            <?
            }
            mysql_free_result ($result);
            ?>

<div class="Row">
     <div class="Cell">
     </div>
     <div class="Cell">
           <p><small>Copyright &copy; <? echo date("Y"); ?> Tim Spencer</p>
     </div>
</div>

Answer 1

您在CSS中使用.Row和.row 。 一個是初始上限，另一個不是。 將div.row:nth-child更改為div.Row:nth-child 。

應用doctype會對您的doctype實施一系列規則。 如果沒有doctype則將兩者視為相同。

Answer 2

區分大小寫。 要么將類名修改為“行”（小寫字母）。 或更改樣式表中的相關樣式。

div.Row：nth-child（奇數）->（R為大寫）.. div.Row：nth-child（奇數）

最好檢查第n個選擇器的瀏覽器兼容性。.IE 9和更高版本中支持它。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child

DOCTYPE中斷nth-child背景顏色

問題描述

2 個解決方案

解決方案1
2 已采納 2015-10-28 17:31:44

解決方案2
0 2015-10-28 17:36:24

DOCTYPE中斷nth-child背景顏色

問題描述

2 個解決方案

解決方案1 2 已采納 2015-10-28 17:31:44

解決方案2 0 2015-10-28 17:36:24

解決方案1
2 已采納 2015-10-28 17:31:44

解決方案2
0 2015-10-28 17:36:24