网站没有样式化 <p> 内容[关闭]答案

【问题标题】：Site is not styling <p> content [closed]网站没有样式化 <p> 内容[关闭]
【发布时间】：2013-03-30 21:41:35
【问题描述】：

我认为我的文字样式有点过分了，但我不太确定它是什么。在我的代码中，我有“#column-right”和“#column-right h1”，它的样式正确。现在我正在尝试设置段落文本的样式。我有“#full_width”和“#full_width p”，但是我无法正确设置 p 的样式。我的代码有什么问题导致了这个问题？

更新：

应该是这样的：Screenshot 1

看起来像这样：Screenshot 2

INB4：构建完成后，我会将样式拉出到外部工作表中。

<!DOCTYPE html>
<html>
<head>

<style>

/** -------------------------------MAIN - DON'T EDIT---------------------------------- **/

html {
max-width:56em;
margin:0 auto;
padding:1.25em;
font:100% "Helvetica Neue",sans-serif;
color:#222;
background:#e2e7e8;
}

* {
margin: 0;
padding: 0;
}

.clear { 
clear:both; 
}



/** ---------------------------HEADER COLUMN LEFT------------------------------------- **/

#headermanager {
-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;
}

#column-left {
width: 230px;
float: left;
padding-top:20px;
padding-left:20px;
padding-bottom:20px;
background:rgba(255,255,255,0.75);
}

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
      box-sizing: border-box;
}


.pic {
 border: 10px solid #fff;  
 float: left;
 height: 180px;
 width: 180px;
 overflow: hidden;

 -webkit-box-shadow: 5px 5px 5px #111;
      box-shadow: 5px 5px 5px #111;  
}

.morphimg {
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;
}

.morphimg:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
   -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
      transform: rotate(360deg);          
}

/** -------------------------------HEADER COLUMN CENTER------------------------------- **/


#column-center {
background:rgba(255,255,255,0.75);
width: 316px;
float: left;
padding-top:20px;
padding-left:20px;
padding-bottom:20px;
}

/** ---------------------------------HEADER COLUMN RIGHT------------------------------ **/


#column-right {

text-align:right;
background:rgba(255,255,255,0.75);
width: 310px;
float:right;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
}

#column-right h1 {

font-size:3em;
font-weight:200;
text-align:right;
width: 310px;
float:right;
}   

#column-right h2 {

font-size:1.3em;
font-weight:100;
text-align:right;
width: 310px;
float:right;
}   

#column-right h3 {

font-size:0.9em;
font-weight:200;
text-align:right;
width: 310px;
float:right;
} 


#progress_bar {
background:rgba(255,255,255,0.75);
width: 310px;
}

/** -----------------------------------SECTION HEADERS-------------------------------- **/

#section_header {
background: #e94939;
padding: 1rem;  
}

#section_header h1 {
font-size: 0.65em;
font-weight: 500;
letter-spacing: 0.35em;
text-transform: uppercase;
color: white;
text-align: center;

/** ---------------------------------------------------------------------------------- **/
/** -------------------------------------TEXT LAYOUTS--------------------------------- **/
/** ---------------------------------------------------------------------------------- **/

/** --------------------------------------ABOUT ME------------------------------------ **/

#full_width{    
padding-left:7.8em;
padding-right:7.8em;
padding-top:2.85em;
padding-bottom:2.85em;
background:rgba(255,255,255,0.75);
}

#full_width p { 
text-align:left;
font-size:0.8em;
font-weight:200;
}


</style>

</head>
<body>

<!--***********************************************************************************-->    
<!--********************************* HEADER STARTS ***********************************-->    
<!--***********************************************************************************-->    


<!----------------------------------COLUMN LEFT STARTS----------------------------------->    
    <div id="column-left">
        <div class="morphimg pic">
            <img src="http://i50.tinypic.com/11r4nwh.png" alt="beach">
        </div>
    </div>

 <!------------------------------- COLUMN CENTER STARTS ---------------------------------->

<div id="column-center">Social Hover</div>

<!----------------------------------COLUMN RIGHT STARTS---------------------------------->  
 <div id="headermanager">
<div id="column-right">
    <h1>John Doe</h1>
        <h2>lipsium ordium consecultar</h2>
            <h3>www.jdoedesign.com<br>
            me@jdoedesign.com<br>
            256-220-8360<br>
            141 Ritter Street Huntsville, AL 35816</h3>
    </div>
       <div class="clear"></div>
 </div>


<div id="section_header">
<h1>Hello World</h1>
</div>


<div id="full_width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dui
        lorem, dictum non varius eget, accumsan ut tellus. Mauris sed nunc
        vitae lectus egestas aliquam eu eu libero. Cras tempus euismod
        interdum. Aenean rutrum orci nec mauris venenatis eu blandit est
        eleifend. Cras elit magna, tempus eu luctus quis, dapibus et purus.
        Suspendisse et quam ut est interdum porta. Morbi sed rhoncus risus.
        Pellentesque eu libero justo, at varius purus. Duis faucibus ultrices
        ipsum vitae eleifend. Suspendisse viverra congue dolor faucibus
        feugiat. Etiam pulvinar congue tellus sit amet dapibus. Morbi et
        ultricies diam. Suspendisse id vehicula lacus. Integer quis risus diam,
        a facilisis justo.<br><br>Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Sed lobortis
        aliquet lorem, at placerat orci fermentum non. Nam ut tortor eu eros
        gravida semper. Cras eget est ante. Sed vehicula justo et urna lacinia
        volutpat. Vestibulum dolor ante, sollicitudin vel ultricies nec, mattis
        non urna. Donec eget lorem ligula, quis ornare odio</p>
</div>

<!--***********************************************************************************-->    
<!--******************************** ABOUT ME STARTS **********************************-->    
<!--***********************************************************************************-->      



<!--***********************************************************************************-->    
<!--***************************** WORK EXPERIENCE STARTS ******************************-->    
<!--***********************************************************************************-->



<!--***********************************************************************************-->    
<!--******************************** EDUCATION STARTS *********************************-->    
<!--***********************************************************************************-->  



<!--***********************************************************************************-->    
<!--***************************** TECHNICAL SKILLS STARTS *****************************-->    
<!--***********************************************************************************-->



<!--***********************************************************************************-->    
<!--********************************** AWARDS STARTS **********************************-->    
<!--***********************************************************************************-->  



<!--***********************************************************************************-->    
<!--********************************** CONTACT STARTS *********************************-->    
<!--***********************************************************************************-->      
</body>
</html>

【问题讨论】：

使用浏览器的 DOM 检查器查看应用和覆盖的 CSS 规则。

标签： html css stylesheet styling

【解决方案1】：

你忘记了结束}

#section_header h1 {
  font-size: 0.65em;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: white;
  text-align: center;
/* } Was not placed */

看看这个fiddle

【讨论】：

哈哈谢谢老兄。迟钝的错误！

【解决方案2】：

您的 #section_header h1 选择器缺少右括号。

【讨论】：

【解决方案3】：

使用以下选择器进行具体说明：

#full_width > p {
 /*myStyles*/
}

这样，您将选择 full_width div 内的所有段落。

【讨论】：

什么也没做
@LastBreath - 如果可以的话，我会否决该评论，使用 !important 标签应该是绝对的最后手段。如果这些规则难以覆盖并且不需要，请减少获胜规则的特异性，了解级联顺序，并在必要时增加未应用规则的特异性。使用 CSS 特性和级联而不是反对它们 - 当一切都是“！重要”时你会怎么做？