为什么我的CSS网格不能响应我的html?

Question

我试图使用CSS网格(orderForm.css下面)，但是CSS样式不响应我所写的html。我发现很多时候，由于div嵌套，我没有正确调用元素。我希望你们都能看看我的代码，告诉我发生了什么。有些页面可以在visual studio中工作，有些页面不可以。

/* Skeleton of pages below */
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, 1fr);
}
nav#original.navigation,
h1 {
grid-column: 4 / 10;
grid-row: 1 / 2;
text-align: center;
}

/* Fix the images, not correctly displaying  */
div.blackLogo {
grid-column: 1 / 4;
grid-row: 1 / 2;
image-resolution: from-image 300dpi;
}
div.pinkLogo {
grid-column: 10 / 13;
grid-row: 1 / 2;
}
ul li {
display: inline;
list-style: none;
}

/* Footer not responding to grid dimensons */
footer {
grid-column: 1 / 13;
grid-row: 4 / 5;
text-align: center;
}
h1 {
padding: 10px;
}

/* div#all.container {
grid-column: 1/13 ;
grid-row: 2/3;
} */

/* div#name.container, div#billing-address.container,div#mailing-address.container {
display: inline;
grid-column: 1 / 7;
grid-row: 2 / 4; 
}*/
body>div.grid-container>div#partOne.container {
grid-column: 1 / 7;
grid-row: 2 / 4;
}

/* columns not running span of grid-column dimensions */
div#partTwo.container {
grid-column: 7 / 13;
grid-row: 2 / 4;
}

/* div#product-choice.container >h2#product-Choice.heading {
text-align: center;
} */

/* div#partTwo.container > div#product-choice.container > h2#product-choice.heading {
grid-column: 7 / 13;
grid-row:  2 / 4;
} */

<div class="grid-container">
<nav class="navigation" id="original">
<ul>
<li><a href="/index.html" target="_blank">Home</a></li>
<li><a href="aboutUs.html" target="_blank">About Us</a></li>
<li><a href="/order.html" target="_blank">Order</a></li>
<li><a href="/orderForm.html" target="_blank">Order form</a></li>
<li><a href="/gallery.html" target="_blank">Gallery</a></li>
</ul>
</nav>
<h1 class="name" id="order-form">Order Form</h1>
<div class="blackLogo">
<img src="/images/hoodHealerBlack.jpg" alt="Black Hood Healer Logo" width="200" height="80" class="logo" id="Black" />
</div>
<div class="pinkLogo">
<img src="/images/hoodHealerPink.jpg" alt="Pink Hood Healer Logo" width="200" height="80" class="logo" id="Pink" />
</div>
<div class="container" id="partOne">
<div class="container" id="name">
<h2>Name</h2>
<label for="Fname">First Name:</label>
<input type="text" id="Fname" name="first-name" />
<label for="MInitial">Middle Initial:</label>
<input type="text" id="MInitial" name="middle-initial" />
<label for="Lname">Last Name:</label>
<input type="text" id="Lname" name="last-name" />
</div>
<div class="container" id="billing-address">
<h2 class="heading" id="billingAddress">Billing Address</h2>
<label for="Street-address">Street Address:</label>
<input type="text" id="Street-address" name="StreetAdress" />
<label for="apartment-PO">Apt # or PO Box:</label>
<input type="number" id="apartment-PO" name="apartmentPOBox" />
<!--City, state ; zip code- number; apt number or po box input - number-->
<br />
<label for="city">City:</label>
<input type="text" id="city" name="city" />
<form>
<fieldset>
<label for="state">State</label>
<select id="state" name="state">
<option value="---">---</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District of Columbia">
District of Columbia
</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Guam">Guam</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Northern Marianas Islands">
Northern Marianas Islands
</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Virgin Islands">Virgin Islands</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</fieldset>
</form>
<label for="zip-code">Zip Code:</label>
<input type="number" id="zip-code" name="zipcode" />
<input type="checkbox" id="mailing-address" name="mailingaddress" value="Mailing address" />
<label for="mailing-address">
Mailing address is the same as billing address.</label
><br />

<div class="container" id="mailing_address">
<h2 class="heading" id="mailingAddress">Mailing Address</h2>

<label for="Street_address">Street Address:</label>
<input type="text" id="Street_address" name="StreetAdress" />
<label for="apartment_PO">Apartment number or PO Box:</label>
<input type="number" id="apartment_PO" name="apartmentPOBox" />
<!--City, state ; zip code- number; apt number or po box input - number-->
<label for="zip_code">Zip Code:</label>
<input type="number" id="zip_code" name="zipcode" />
<label for="City">City:</label>
<input type="text" id="City" name="city" />
<form>
<fieldset>
<label for="State">State</label>
<select id="State" name="state">
<option value="---">---</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District of Columbia">
District of Columbia
</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Guam">Guam</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Northern Marianas Islands">
Northern Marianas Islands
</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Virgin Islands">Virgin Islands</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</fieldset>
</form>
</div>
</div>
</div>
<div class="contaitner" id="partTwo">
<div class="container" id="product-choice">
<h2 class="heading" id="product-Choice">Choose your product:</h2>
<form>
<input type="radio" id="Hat" name="Product" value="HAT" />
<label for="Hat">Hat</label><br />
<input type="radio" id="Shirt" name="Product" value="SHIRT" />
<label for="Shirt">Shirt</label><br />
<input type="radio" id="Hoodie" name="Product" value="HOODIE" />
<label for="Hoodie">Hoodie</label><br />
<input type="radio" id="Pants" name="Product" value="PANTS" />
<label for="Pants">Pants</label><br />
</form>
</div>
<div class="container" id="size-choice">
<h2 class="heading" id="size-Choice">Choose your size:</h2>
<form>
<input type="radio" id="Small" name="Size" value="SMALL" />
<label for="Small">Small</label><br />
<input type="radio" id="Medium" name="Size" value="MEDIUM" />
<label for="Medium">Medium</label><br />
<input type="radio" id="Large" name="Size" value="LARGE" />
<label for="Large">Large</label><br />
<input type="radio" id="X-Large" name="Size" value="X-LARGE" />
<label for="X-Large">X-Large</label><br />
<input type="radio" id="XX-Large" name="Size" value="XX-LARGE" />
<label for="XX-Large">XX-Large</label><br />
<input type="radio" id="XXX-Large" name="Size" value="XXX-LARGE" />
<label for="XXX-Large">XXX-Large</label><br />
<input type="radio" id="XXXX-Large" name="Size" value="XXXX-LARGE" />
<label for="XXXX-Large">XXXX-Large</label><br />
<input type="radio" id="XXXXX-Large" name="Size" value="XXXXX-LARGE" />
<label for="XXXXX-Large">X-Large</label><br />
</form>
</div>
<div class="container" id="logo-color">
<h2 class="heading" id="logo-Color">Choose your style of logo:</h2>
<form>
<input type="radio" id="pink" name="logoColor" value="PINK" />
<label for="pink">Pink</label><br />
<input type="radio" id="black" name="logoColor" value="BLACK" />
<label for="black">Black</label><br />
<!-- <input type="radio" id="Custom" name="logoColor" value="CUSTOM">
<label for="Custom">Custom</label> -->
</form>
<input type="submit" value="Submit" />
</div>
</div>
<footer>
<p>copyright Kajah's Krafts</p>
<a href="contact.html" target="_blank">Contact Us</a>
</footer>
</div>

Answer 1

回去后，仔细检查我的CSS文件和链接到CSS文件，我发现我的错误。第235行container拼写错误

Answer 2

大多数时候，当您没有看到您的样式被应用时，这是加载样式表的问题。你能确保在每个页面的head中都包含link标签吗?

<head>
<!-- omit -->
<link rel="stylesheet" href="/CSS/orderForm.css">
</head>

Answer 3

样式表的链接很可能指向错误的位置。/CSS/orderForm.css试着像这样删除/quot;CSS/orderForm.css">