iT邦幫忙

0

初學CSS不懂 CSS的撰寫風格, 為什麼一樣的class要寫兩次?及一些小問題

如題
參考的程式碼:

這是其中的程式片段:

		.gallery .gallery-item {
			height: inherit;
			max-width: 100%;
			background: gray;
			border: 2px solid white;
			background-size: cover;
			background-position: center top;
			}

        .gallery .gallery-item {
            flex: 1 auto;
        }

兩個都是makeup一樣的東西 為什麼要分開寫?我有看到一些教學也有相同情況

還有另一個問題:
.gallery .gallery-item 是指 .gallery裡的.gallery-item
有包含到.gallery的樣式嗎?

舉例程式碼:

.gallery .gallery-item {
            flex: 1 auto;
        }
.gallery-item {
	position: relative;
	cursor: pointer;
	transition: all .1s linear;
    }

因為我看他.gallery-item指定的元素都包在.gallery指定的元素裡面
那如果把所有makeup定義在.gallery-item 會跟.gallery .gallery-item有所不同嗎?

77012904 iT邦新手 3 級 ‧ 2017-12-13 08:49:39 檢舉
有的人可以出於debug、或是其他維護便利性的因素,會這樣拆開

另外,我覺得你先去了解一下CSS的「選擇器」.

2 個回答

5
TheRoamer
iT邦新手 5 級 ‧ 2017-12-10 01:48:33
最佳解答

你好,關於第一點我想應該只是該pen作者的個人習慣而已,你當然可以將此兩style合併,效果也會一樣喔。

.gallery .gallery-item {
    flex: 1 auto;
    height: inherit;
    max-width: 100%;
    background: gray;
    border: 2px solid white;
    background-size: cover;
    background-position: center top;
}

第二點的部分則是牽涉到CSS中最基本的選擇器(Selector)部分,若你還不熟、或是想要挑戰一下自己的能力,這裡有個教學網站很不錯:
CSS Diner: https://flukeout.github.io/

下方的樣式中,.gallery .gallery-item是想表達「gallery-item是屬於gallery的子代」,也就是你所說的「在裡面」,這在了解結構上是有助益的。舉例,「我是個學生,我是個好人」,而「我是個XX學校的學生,我穿著校服」,那「我是個穿著XX學校校服的好人」依舊是成立的。

.gallery .gallery-item {
    flex: 1 auto;
}
.gallery-item {
    position: relative;
    cursor: pointer;
    transition: all .1s linear;
}

在寫CSS時,除了選擇器除了要選對之外,還必須注意到CSS style本身的「權重」,正確的順序如下(參考https://specificity.keegan.st/)

  1. 屬性含有!important後綴
  2. inline style (行內樣式)
  3. id selector
  4. class, attribute, pseudo-classes selector
  5. elements, pseudo-elements selector

每一個都是獨立的階級,不同階級就算數量上較多也贏不過上一層階級的;而當同階級同分時就會比對下一級的分數,以此類推。若依舊同分,則相同的屬性會以CSS stylesheet中為主。
若將第一點中的style改成以下;

.gallery .gallery-item {
    height: inherit;
    max-width: 100%;
    background: gray;
    border: 2px solid white;
    background-size: cover;
    background-position: center top;
}

.gallery .gallery-item {
    background: blue;
}

由於選擇器一樣,style權重分數一致,愈後方的style中的相同屬性(background)會蓋過前方的,最後background就會是blue的了。

順帶一提,
由於你是初學者,並不需要跟人合作專案,在進行添加CSS屬性時,此階段因為沒有協作規範,可能屬性添加的順序會不一致,建議自己在實作時,先訂定屬於自己的簡易規範,比如說按字母序或是按影響視覺效果(位置、大小、背景顏色、文字顏色等等),會使得自己在除錯時加快許多:

/* Order by alphabets */
.box {
    align-items: center;
    background-color: #000;
    color: #f00;
    /* ...etc */
}
/* Order by visual influence */
.box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30vh;
    background: rgba(0,0,0,.5);
    /* ...etc */
}
看更多先前的回應...收起先前的回應...
Luis-Chen iT邦新手 5 級 ‧ 2017-12-10 12:33:14 檢舉

感謝大大的詳細解釋!!/images/emoticon/emoticon41.gif

Luis-Chen iT邦新手 5 級 ‧ 2017-12-10 12:33:15 檢舉

感謝大大的詳細解釋!!/images/emoticon/emoticon41.gif

Luis-Chen iT邦新手 5 級 ‧ 2017-12-10 12:33:17 檢舉

感謝大大的詳細解釋!!/images/emoticon/emoticon41.gif

kuankuan iT邦新手 5 級 ‧ 2017-12-14 09:35:01 檢舉

好讚喔

1
阿志
iT邦新手 5 級 ‧ 2017-12-10 02:34:21

依據你的參考
那個分開一點意義也沒有
另外也沒有包含 .gallery 的樣式

第二段程式碼與第一段目前是等效的
.gallery .gallery-item 樣式只會套用在 .gallery 之下
.foo .gallery-item 不受引響

而且 .gallery .gallery-item 的權重也比 .gallery-item
.gallery-item 中定義的樣式是無法覆蓋 .gallery .gallery-item
詳細請參考

小魚 iT邦高手 1 級 ‧ 2017-12-10 10:05:13 檢舉

恩恩,可以查一下選擇器的部分,CSS有好幾種選擇器,用在不同的情況。

Luis-Chen iT邦新手 5 級 ‧ 2017-12-10 12:34:23 檢舉

原來如此,感謝大大提點!!/images/emoticon/emoticon41.gif

我要發表回答

立即登入回答