資訊專欄INFORMATION COLUMN
摘要：但只使用框架提供的默認(rèn)樣式，不能滿足全部需求，還是要知道一些基礎(chǔ)知識(shí)，才能做更好的使用框架。最近剛好有時(shí)間學(xué)習(xí)一下的基礎(chǔ)知識(shí)，寫一系列文章記錄下來。選擇是后面相鄰的元素，所有選中的元素都是的直接子元素。
作為一個(gè)長時(shí)間來做后端服務(wù)的程序員，一直對如何展現(xiàn)漂亮的UI感到苦惱。好在現(xiàn)在很多流行的CSS框架，如Bootstarp, Bluma, Foundation, Uikit 可以幫助后端程序員快速的搭建一個(gè)看上去不那么low的UI。但只使用框架提供的默認(rèn)樣式，不能滿足全部需求，還是要知道一些CSS基礎(chǔ)知識(shí)，才能做更好的使用框架。最近剛好有時(shí)間學(xué)習(xí)一下CSS的基礎(chǔ)知識(shí)，寫一系列文章記錄下來。
CSS選擇器用CSS代碼給指定DOM元素賦予指定樣式，就需要用到CSS選擇器，即selector。常見的選擇器有如下幾種
元素選擇器
類選擇器
全局選擇器
ID選擇器
屬性選擇器
元素選擇器通過元素類型選擇DOM元素，示例代碼如下。
將所有div元素的背景顏色都設(shè)置成紅色
div {
background-color: red;
}
將所有a標(biāo)簽都設(shè)置成綠色
a {
color: green;
}
類選擇器
通過元素上的class屬性來選擇DOM元素，例如：
將class屬性帶有title的元素字體大小設(shè)置為42px
.title {
font-size: 42px;
}
我是一個(gè)標(biāo)題
全局擇器
將頁面所有元素都賦予某種樣式，通常我們不會(huì)使用此種選擇器。
將所有元素都設(shè)置為以border為邊界計(jì)算盒模型長寬。
* {
box-sizing: border-box;
}
ID選擇器
通過元素上的id屬性來選擇DOM元素，例如：
將id是login-btn的元素背景設(shè)置成綠色
#login-btn {
backgroud-color: green;
}
屬性選擇器
通過元素上的特定屬性值來選擇DOM元素，例如：
將含有disabled屬性的元素設(shè)置成灰色
[disabled] {
color: grey;
}
以上是幾種基本的選擇器，還有一些選擇器通過元素相互結(jié)構(gòu)關(guān)系來選擇。
例如我們想選擇某個(gè)id屬性下所有的p元素。可以使用如下代碼：
所有id是news下的p元素，都會(huì)是紅色。
#news span {
color: red;
}
我是紅色
我是紅色
我是紅色
可以使用 > 來指定只有直接子元素被選中。
id是news下的直接子元素中，是p的會(huì)被設(shè)置成紅色。
#news > p {
color: red;
}
我是紅色
我是紅色
我不是紅色
使用 + 來選擇某個(gè)指定元素緊鄰的元素，指定元素和選中的元素同屬于一個(gè)父元素。
選擇id是news后面緊鄰的p元素，news和那個(gè)被選中的p元素都是parent元素的直接子元素。
#news + p {
color: red;
}
我不是紅色
我不是紅色
我是紅色
我不是紅色
我不是紅色
使用 ~ 來選擇某個(gè)指定元素之后相鄰的元素，指定元素和選中的元素同屬于一個(gè)父元素。
選擇id是news后面相鄰的p元素，所有選中的元素都是parent的直接子元素。
#news ~ p {
color: red;
}
我不是紅色
我不是紅色
我是紅色
我是紅色
我不是紅色
通過偽類來選擇奇偶或者指定第N個(gè)子元素
id是news的第三個(gè)直接子元素，如果是p元素就設(shè)置成紅色。
#news > p:nth-child(3) {
color: red;
}
我不是紅色
我不是紅色
我是紅色
我不是紅色
id是news的基數(shù)位置直接子元素，如果是p元素就設(shè)置成紅色。
#news > p:nth-child(odd) {
color: red;
}
我是紅色
我不是紅色
我是紅色
我不是紅色
我不是紅色
id是news的子元素中，第二個(gè)是p的元素設(shè)置成紅色。
#news > p:nth-of-type(2) {
color: red;
}
我不是紅色
我不是紅色
我是紅色
我不是紅色
CSS選擇器就先總結(jié)這些，后續(xù)會(huì)總結(jié)一下CSS的屬性繼承機(jī)制。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115983.html
摘要：本文從裝飾模式出發(fā)，聊聊中的裝飾器和注解。該函數(shù)的函數(shù)名。不提供元數(shù)據(jù)的支持。中的元數(shù)據(jù)操作可以通過包來實(shí)現(xiàn)對于元數(shù)據(jù)的操作。 ??隨著Typescript的普及，在KOA2和nestjs等nodejs框架中經(jīng)常看到類似于java spring中注解的寫法。本文從裝飾模式出發(fā)，聊聊Typescipt中的裝飾器和注解。 什么是裝飾者模式 Typescript中的裝飾器 Typescr...
摘要：我是紅色這種引用代碼的方式在一定程度上解決了所有代碼都分散寫在各個(gè)元素上的問題，但是不利于代碼的整體重用。需要詳盡選定該元素來設(shè)置具體的樣式。子元素會(huì)繼承父元素的樣式，等除外。 上一篇簡單總結(jié)了一下選擇器，如果一個(gè)元素被多個(gè)選擇器選中，元素的樣式就會(huì)以級(jí)聯(lián)方式被應(yīng)用到。要搞清最終那個(gè)樣式被應(yīng)用到元素上了，首先要明白引用CSS代碼的幾種方式。 CSS代碼引用方式 如何應(yīng)用CSS代碼到Ht...
摘要：我是紅色這種引用代碼的方式在一定程度上解決了所有代碼都分散寫在各個(gè)元素上的問題，但是不利于代碼的整體重用。需要詳盡選定該元素來設(shè)置具體的樣式。子元素會(huì)繼承父元素的樣式，等除外。 上一篇簡單總結(jié)了一下選擇器，如果一個(gè)元素被多個(gè)選擇器選中，元素的樣式就會(huì)以級(jí)聯(lián)方式被應(yīng)用到。要搞清最終那個(gè)樣式被應(yīng)用到元素上了，首先要明白引用CSS代碼的幾種方式。 CSS代碼引用方式 如何應(yīng)用CSS代碼到Ht...
摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關(guān)于基礎(chǔ)特性，一份關(guān)于布局。核心第一篇一份來自的基礎(chǔ)參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎(chǔ)指南，包含使用的好處介紹個(gè)方法快速寫成高質(zhì)量的寫出高效的一些提示。 迄今為止，我已經(jīng)收集了100多個(gè)精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設(shè)計(jì)脫穎而出。 CSS3 資源 20個(gè)學(xué)習(xí)CSS3的有用資源 C...
摘要：前言緣分與巧合，最近接觸比較多的培訓(xùn)機(jī)構(gòu)出來的人，以及看過關(guān)于培訓(xùn)機(jī)構(gòu)的文章和問答。大部分都對培訓(xùn)機(jī)構(gòu)很反感，其中還包括一些從培訓(xùn)機(jī)構(gòu)出來的人。造成這樣的情況，培訓(xùn)機(jī)構(gòu)的功勞無疑是最大的。 1.前言 緣分與巧合，最近接觸比較多的培訓(xùn)機(jī)構(gòu)出來的人，以及看過關(guān)于培訓(xùn)機(jī)構(gòu)的文章和問答。雖然沒在培訓(xùn)機(jī)構(gòu)上過課，但是接觸過很多培訓(xùn)機(jī)構(gòu)出來的人，也看過一些培訓(xùn)機(jī)構(gòu)的課程。關(guān)于培訓(xùn)機(jī)構(gòu)，我也有自己的...
閱讀 3690·2021-11-22 15:24
閱讀 1592·2021-09-26 09:46
閱讀 1904·2021-09-14 18:01
閱讀 2600·2019-08-30 15:45
閱讀 3526·2019-08-30 14:23
閱讀 1865·2019-08-30 12:43
閱讀 2914·2019-08-30 10:56
閱讀 800·2019-08-29 12:20
