javascript - CSS 在 192 行后不起作用

Question

您好，我的 CSS 刚刚从第 192 行或“主题部分”开始停止工作，上面的所有内容都可以正常工作，但之后的任何内容都不再工作，有人可以看看我的代码，看看您是否能看到任何错误，谢谢提前!

body {
border-top : 1em solid #333;
font : 300 62.5% "Open Sans";
line-height : 1.5;
}
.heading-large {
font-size : 2em;
}
.heading-medium {
text-transform : uppercase;
font-size : 1.8em;
}
.title-medium {
font-size : 1.6em;
}
p {
font-size : 1.4em;
}
footer p {
color : #959595;
}
a {
color : inherit;
text-decoration : none;
}
a:hover .title-medium {
color : #D73300;
transition : all 0.5s ease;
}
article {
margin : 1em 0;
}
li {
margin : 1em 0;
}
br {
margin : 0 0 1em;
}
img {
display : block;
margin : 0 0 0.5em;
max-width : 100%;
}
hr {
margin : 0.5em 0;
height : 0.3em;
border : 0;
background : url('../img/border-dots-1.png');
}
footer hr {
margin : 0.5em 0;
height : 0.3em;
border : 0;
background : url('../img/border-dots-2.png');
}
input, select, textarea {
border : #CCC solid 0.1em;
font : 300 1.4em "Open Sans";
transition : border 0.5s ease;
}
input, select {
margin : 0 1em 1em 0;
padding : 0.5em;
width : 20em;
}
input[type="submit"] {
margin : 1em 0;
}
textarea {
padding : 0.5em;
max-width : 100%;
width : 65em;
height : 15em;
}
.button {
padding : 0.5em;
width : 20em;
outline : #FFF;
background : #D73300;
color : #FFF;
text-align : center;
}
.button:active {
outline : 0.1em solid #FFF;
outline-offset : -0.3em;
}
*, *:before, *:after {
box-sizing : border-box;
}
.layout-row {
margin : 0 auto;
width : 96em;
}
.layout-row .layout-row {
width : auto;
}
.layout-row:before, .layout-row:after {
display : block;
visibility : hidden;
height : 0;
content : "\0020";
}
.layout-row:after {
clear : both;
}
.layout-column {
position : relative;
display : inline;
float : left;
padding : 1em;
}
.layout-column .layout-column {
padding : 0;
}
.one {
width : 8.33333%;
}
.two {
width : 16.66667%;
}
.three {
width : 25%;
}
.four {
width : 33.33333%;
}
.five {
width : 41.66667%;
}
.six {
width : 50%;
}
.seven {
width : 58.33333%;
}
.eight {
width : 66.66667%;
}
.nine {
width : 75%;
}
.ten {
width : 83.33333%;
}
.eleven {
width : 91.66667%;
}
.twelve {
width : 100%;
}
.layout-navigation {
margin : -2em 0 0;
}
.layout-navigation li {
float : left;
padding : 3em 0.75em 0.5em;
text-align : center;
}
.widget-contacts li {
float : left;
margin : 0.5em 0;
width : 50%;
}
.layout-footer-background {
background : #333;
}
footer .layout-navigation {
margin : 0;
}
footer .layout-navigation li {
padding : 0 0.75em 0 0;
}
.selected {
margin : -0.1em 0 0;
border-top : 1.1em solid #D73300;
background : #F3F3F3;
}
.selected .title-medium {
color : #D73300;
}
.highlight {
color : #D73300;
}

/* THEME SECTION */

.icon-small:before {
display : block;
float : left;
overflow : hidden;
margin : 0.3em 0.5em 0 0;
width : 16px;
height : 16px;
background-image : url(../img/icon-sprite-16.png);
content : "";
}
.address:before {
background-position : 0 0;
content : "";
}
.phone:before {
background-position : -1.2em 0;
content : "";
}
.email:before {
background-position : -2.4em 0;
content : "";
}
.twitter:before {
background-position : -3.6em 0;
content : "";
}
a .twitter:hover:before {
background-position : -3.6em -1.3em;
}
.pen:before {
background-position : -4.6em 0;
content : "";
}
a .pen:hover:before {
background-position : -4.6em -1.3em;
}
.file:before {
background-position : -5.8em 0;
content : "";
}
a .file:hover:before {
background-position : -5.8em -1.3em;
}
.delete:before {
background-position : -6.9em 0;
content : "";
}
a .delete:hover:before {
background-position : -6.9em -1.3em;
}
.author:before {
background-position : -8em 0;
content : "";
}
.calendar:before {
background-position : -9.2em 0;
content : "";
}
.category:before {
background-position : -10.4em 0;
content : "";
}
a .category:hover:before {
background-position : -10.4em -1.3em;
}
.facebook:before {
background-position : -11.4em 0;
content : "";
}
a .facebook:hover:before {
background-position : -11.4em -1.3em;
}
.linkedin:before {
background-position : -12.6em 0;
content : "";
}
a .linkedin:hover:before {
background-position : -12.6em -1.3em;
}
.google:before {
background-position : -13.7em 0;
content : "";
}
a .google:hover:before {
background-position : -13.7em -1.3em;
}
.check:before {
background-position : -14.8em 0;
content : "";
}
.icon-large:before {
display : block;
float : left;
overflow : hidden;
margin : 0.3em 0.5em 0 0;
width : 48px;
height : 48px;
background-image : url(../img/icon-sprite-48.png);
content : "";
}
.graph:before {
background-position : 0 0;
content : "";
}
.lightning:before {
background-position : -3.4em 0;
content : "";
}
.pencil:before {
background-position : -6.8em 0;
content : "";
}
a .pencil:hover:before {
background-position : -6.8em -3.6em;
}
.frame:before {
background-position : -10.2em 0;
content : "";
}
a .frame:hover:before {
background-position : -10.2em -3.6em;
}
.man:before {
background-position : -13.8em 0;
content : "";
}
a .man:hover:before {
background-position : -13.8em -3.6em;
}
.align-left {
float : left;
padding : 0 2em 0 0;
}
.align-right {
float : right;
padding : 0 0 0 2em;
}
.text-align-center {
text-align : center;
}
.text-align-left {
text-align : left;
}
.text-align-right {
text-align : right;
}
#container {
min-height : 20em;
}
img[id*="drag"] {
padding : 0.5em;
width : 15.1em;
height : 10em;
cursor : move;
}
#drop {
margin : 1em 0 0;
min-height : 10em;
border : #CCC solid 0.1em;
}
#drop img {
display : block;
float : left;
width : 15.1em;
height : 10em;
}

Answer 1

您必须注释掉文件中的任何非 CSS 内容。将 THEME SECTION 更改为 /* THEME SECTION */。

此外，.icon-small:before 的定义在 background-image 的 URL 周围没有引号。应该是:

{
display : block;
float : left;
overflow : hidden;
margin : 0.3em 0.5em 0 0;
width : 16px;
height : 16px;
background-image : url('../img/icon-sprite-16.png');
content : "";
}

看起来你也会遇到与 .icon-large:before 相同的问题。