當我將一個CSS與另一個CSS相集成時，爲什麼一個CSS的字體樣式改變爲另一個CSS的字體樣式？

我有一個圖像滑塊（基於CSS）根據我的規格（字體樣式，尺寸等）定製。然後我有另一個CSS有6個下載按鈕。但是當我嘗試將它們兩者結合並整合到我的HTML頁面中時，爲什麼CAPTION的字體大小，它們的樣式，標題定位等都在變化？當我將一個CSS與另一個CSS相集成時，爲什麼一個CSS的字體樣式改變爲另一個CSS的字體樣式？

另請注意，在單獨的DOWNLOAD BUTTON頁面中，當我懸停播放下載按鈕時，文本「DOWNLOAD」仍以白色顯示。但是，在集成這兩個CSS頁面之後，當我將鼠標懸停在「下載」按鈕上時，其顏色會從白色變爲黑色！爲什麼會發生？請看看這些網頁：的單個滑頁：www.aamaodisha.org/nivoslider.html 的單個下載按鈕Page：www.aamaodisha.org/button.html

當我把它們都集成到一個單一的頁面，他們是這樣的： www.aamaodisha.org/both.html

我很抱歉，這可能是我的一個非常愚蠢的疑問，但我對CSS屬性很陌生，我只是決定嘗試設計自己的網站。我試着在谷歌上查看CSS章節，但無法自拔。但就我掌握了關於CSS的東西而言，我認爲它與文本的「ID」和「Class」有關。我猜如果我以某種方式將nivoslider中的CAPTION類更改爲ID，它可能不會干擾其他設置。或者可能會將DOWNLOAD頁面的CSS類更改爲某個ID。但我無法找到一個方法。請幫我一把。

這是滑塊的CSS：

a, a:visited { 
    color:blue; 
    text-decoration:none; 
} 
a:hover, a:active { 
    color:#000; 
    text-decoration:none; 
} 
a.nivo-nextNav { 
    background-position:-30px 0; 
    right:15px; 
} 
a.nivo-prevNav { 
    left:15px; 
} 

#slider_wrapper { 
    height: 390px; 
} 

#slider { 
    margin:0px; 
    position:absolute; 
    left:0px; 
    top:102px; 
    width: 359px; 
    height: 390px; 
    background: url(images/loading.gif) no-repeat 50% 50%; 
} 

#slider img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
} 
#slider a { 
    border: 0; 
    display: block; 
} 


.nivoSlider { 
    position:relative; 
    background:#ffffff url(loading.gif) no-repeat 50% 50%; 
    margin-bottom:50px; 
    -webkit-box-shadow: 0px 0px 0px 0px #4a4a4a; 
    -moz-box-shadow: 0px 0px 0px 0px #4a4a4a; 
    box-shadow: 0px 0px 0px 0px #4a4a4a; 

} 
.nivoSlider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
    display:none; 
} 
.nivoSlider a { 
    border:0; 
    display:block; 
} 
/* If an image is wrapped in a link */ 
.nivoSlider a.nivo-imageLink { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
    border:0; 
    padding:0; 
    margin:0; 
    z-index:6; 
    display:none; 
} 
/* The slices and boxes in the Slider */ 
.nivo-slice { 
    display:block; 
    position:absolute; 
    z-index:5; 
    height:100%; 
} 
.nivo-box { 
    display:block; 
    position:absolute; 
    z-index:5; 
} 
/* Caption styles */ 
.nivo-caption { 
    position:absolute; 
    left:0px; 
    bottom:0px; 
    background:#091023; 
    color:#fff; 
    opacity:0.7; /* Overridden by captionOpacity setting */ 
    width:100%; 
    z-index:8; 
    } 
.nivo-caption p { 
    font:11px/1.5 Verdana; 
    padding: 7px 50px; 

} 
.nivo-caption a { 
    display:inline !important; 
    color:#fff; 
    border-bottom:1px dotted #fff; 
} 
.nivo-caption a:hover { 
    color:#fff; 
} 
.nivo-html-caption { 
    display:none; 
} 

/* Direction nav styles (e.g. Next & Prev) */ 
.nivo-directionNav a { 
    position:absolute; 
    top:45%; 
    z-index:9; 
    cursor:pointer; 
    display:block; 
    width:30px; 
    height:30px; 
    background:url(arrows.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
} 
.nivo-prevNav { 
    left:0px; 
} 
.nivo-nextNav { 
    right:0px; 
} 
.nivo-controlNav { 
    position:absolute; 
    left:73%; 
    top:7px; 
    margin-right:-4px; /* Tweak this to center bullets */ 
} 
/* Control nav styles (e.g. 1,2,3...) */ 
.nivo-controlNav a { 
    display:block; 
    width:22px; 
    height:22px; 
    background:url(bullets.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
    margin-right:3px; 
    float:left; 
    position:relative; 
    z-index:9; 
    cursor:pointer; 
} 
.nivo-controlNav a.active { 
    background-position:0 -22px; 
    font-weight:bold; 
}

這是下載按鈕CSS：

.button { 
    width: 115px; 
} 

.button1 { 
    position:absolute; 
    left:430px; 
    top:410px; 

}  
.button2 { 
    position:absolute; 
    left:632px; 
    top:410px; 

} 
.button3 { 
    position:absolute; 
    left:833px; 
    top:410px; 

}  
.button4 { 
    position:absolute; 
    left:430px; 
    top:636px; 

}  
.button5 { 
    position:absolute; 
    left:632px; 
    top:636px; 

} 
.button6 { 
    position:absolute; 
    left:833px; 
    top:636px; 

} 
.button a { 
    display: block; 
    height: 28px; 
    width: 115px; 

    /*TYPE*/ 
    color: white; 
    font: bold 11px/28px Helvetica, Verdana, sans-serif; 
    text-decoration: none; 
    text-align: center; 
    text-transform: uppercase; 

    /*GRADIENT*/ 
    background: #00b7ea; /* Old browsers */ 
    background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */ 
    background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0); /* IE6-9 */ 
} 

.button a, p { 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
      border-radius: 4px; 

    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 
    -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 
      box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 
} 

p { 
    background: #222; 
    display: block; 
    height: 25px; 
    width: 105px; 
    margin: -27px 0 0 5px; 

    /*TYPE*/ 
    text-align: center; 
    font: bold 10px/28px Helvetica, Verdana, sans-serif; 
    color: #ffffff; 

    /*POSITION*/ 
    position: absolute; 
    z-index: -1; 

    /*TRANSITION*/ 
    -webkit-transition: margin 0.4s ease; 
    -moz-transition: margin 0.4s ease; 
     -o-transition: margin 0.4s ease; 
     -ms-transition: margin 0.4s ease; 
      transition: margin 0.4s ease; 
} 

/*HOVER*/ 
.button:hover .bottom { 
    margin: -4px 0 0 5px; 
} 

.button:hover .top { 
    margin: -50px 0 0 5px; 
    line-height: 22px; 
} 

/*ACTIVE*/ 
.button a:active { 
background: #00b7ea; /* Old browsers */ 
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */ 
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0); /* IE6-9 */ 

} 

.button:active .bottom { 
    margin: -14px 0 0 5px; 
} 

.button:active .top { 
    margin: -30px 0 0 5px; 
}

來源

2012-06-25 Amit Pattnaik

在button.css線74號的變化，選擇來回p到.button p

所以不是

p { 
    -moz-transition: margin 0.4s ease 0s; 
    background: none repeat scroll 0 0 #222222; 
    color: #FFFFFF; 
    display: block; 
    font: bold 10px/28px Helvetica,Verdana,sans-serif; 
    height: 25px; 
    margin: -27px 0 0 5px; 
    position: absolute; 
    text-align: center; 
    width: 105px; 
    z-index: -1; 
}

應該

.button p { 
    -moz-transition: margin 0.4s ease 0s; 
    background: none repeat scroll 0 0 #222222; 
    color: #FFFFFF; 
    display: block; 
    font: bold 10px/28px Helvetica,Verdana,sans-serif; 
    height: 25px; 
    margin: -27px 0 0 5px; 
    position: absolute; 
    text-align: center; 
    width: 105px; 
    z-index: -1; 
}

來源

2012-06-25 08:40:37

非常感謝你@Clyde Lobo。這解決了我的問題。非常感謝:)所以它應該是.button p –

@Amit Pattnaik：我建議你閱讀http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-應該知道/爲了更好地理解css選擇器 –

在你的CSS的下載按鈕，你有這樣的規則：

.button a, p { 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
     border-radius: 4px; 

    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 
     box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 
}

將所有這些聲明應用於類中的每個錨元素button，但也適用於每個段落元素，無論其父項。滑塊框中的標題放置在段落標記中。這就是爲什麼應用這些附加樣式的原因。解決這個問題的一個快速方法是使用類爲標題添加一些特殊性，並將聲明應用於該類而不是所有段落元素。

瞭解樣式聲明來自何處的最佳方式是在Chrome或Firefox等現代瀏覽器中使用檢查器。在Chrome中，嘗試在標題之類的元素上進行輔助點擊。從上下文菜單中選擇Inspect Element。在Computed Style下，您將看到瀏覽器解釋的每個聲明以及它來自哪裏。

來源

2012-06-25 08:37:54

感謝喲這麼快就回復得太快了。是的，我現在可以看到p class內的樣式 - 4px的邊框半徑等 - 也在滑塊標題之外製作了一個圓角。但我無法清楚地告訴你「爲類添加一些特殊的標題，並將聲明應用於該類而不是所有段落元素。」 :( –

因此，如果我將上面的代碼更改爲單獨放置a和p而不在一起，例如 - 。按鈕a -webkit-border-radius：4px; -moz-border-radius：4px; border- （0,0,0,0.2）; -moz-box-shadow：2px 2px 8px rgba（0,0,0,0.2）; 箱陰影：2px的2px的8像素RGBA（0,0,0,0.2）; } .button p { -webkit-邊界半徑：3px的; -moz-邊界半徑：3px的; 邊界半徑： 3px; -webkit-box-shadow：2px 2px 8px rgba（0,0,0,0.2）; -moz-box-s hadow：2px 2px 8px rgba（0,0,0,0.2）; box-shadow：2px 2px 8px rgba（0,0,0,0.2）; } –

這就是主意，但儘量在可能的情況下對聲明進行分組。假設你有兩種要選擇的元素。你希望他們都有綠色文字，但你希望他們的邊界不同。你可以這樣做： '.button a，.button p {color：green;}' '.button a {border：1px solid blue;}' '.button p {border：1px solid red;} ' –

<link href="button.css" type="text/css" rel="stylesheet" />

............................................ ........................

<link href="nivo-slider.css" type="text/css" rel="stylesheet" />

這是您的網頁的一些來源。正如你所看到的，滑塊css的鏈接在按鈕之後。每次你放入一個css鏈接時，如果元素樣式被再次聲明，則之前定義的任何內容都將被覆蓋。所以你有

a:hover, a:active { 
color:#000; 
text-decoration:none;

}在您的滑塊css，這是所謂的第二。這將覆蓋按鈕中的樣式，因爲它是所有和元素的一般聲明。並且顏色爲＃000（黑色）

來源

2012-06-25 08:38:08 CosminO

非常感謝你@Ameoo的幫助。我改變了顏色爲白色，瞧！作爲CSS的完全新手，我無法僅僅通過查看代碼來清楚地理解tid-bits。但是這是一個很好的教訓，這是一個實用的教訓 - 「滑塊css的鏈接在按鈕之後，每次你放入一個css鏈接時，如果元素樣式被聲明再次。」現在我明白了爲什麼造型與其他設置有關。 –

再次感謝你:) –

當我將一個CSS與另一個CSS相集成時，爲什麼一個CSS的字體樣式改變爲另一個CSS的字體樣式？

回答

相關問題