亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索

首頁(yè) 文章專題 AI工具學(xué)習(xí) 編程手冊(cè) 下載最近更新

文章 web3.0 后端開發(fā) web前端數(shù)據(jù)庫(kù) 開發(fā)工具 php框架常見問(wèn)題科技 Java 系統(tǒng)教程電腦教程硬件教程手機(jī)教程軟件教程游戲教程自媒體新聞

專題后端開發(fā) web前端數(shù)據(jù)庫(kù) 開發(fā)工具 php框架科技 Java 系統(tǒng)教程電腦教程硬件教程手機(jī)教程軟件教程游戲教程新聞

AI工具 AI 聊天問(wèn)答 Agent智能體 AI 文本寫作 AI 繪畫作圖 AI 設(shè)計(jì)工具 AI 視頻創(chuàng)作 AI 音頻制作 AI 辦公學(xué)習(xí) AI 編程開發(fā) Prompt指令

學(xué)習(xí) 大前端后端開發(fā) 數(shù)據(jù)庫(kù) 移動(dòng)端運(yùn)維開發(fā) UI設(shè)計(jì) 計(jì)算機(jī)基礎(chǔ)

編程手冊(cè) 大前端 JavaScript 后端開發(fā) 數(shù)據(jù)庫(kù) 移動(dòng)端運(yùn)維開發(fā) UI設(shè)計(jì) 計(jì)算機(jī)基礎(chǔ) XML Web Services

下載 js特效網(wǎng)站源碼工具下載類庫(kù)下載網(wǎng)站素材學(xué)習(xí)資源插件擴(kuò)展手機(jī)/移動(dòng)開發(fā) 手機(jī)游戲

CSS選擇器

舉例用的基礎(chǔ)HTML代碼：

  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item center">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>

簡(jiǎn)單選擇器

選擇器	說(shuō)明	代碼演示
元素選擇器	直接引用標(biāo)簽名	`p{background-color: red;}`
類選擇器	對(duì)應(yīng)html中標(biāo)簽的class屬性	`.item{background-color: red;}`
多個(gè)類復(fù)合選擇	對(duì)應(yīng)class屬性值為多個(gè)名稱	`.item.center{background-color: red;}`
id選擇器	對(duì)應(yīng)html中標(biāo)簽的id屬性	`#firstr{background-color: red;}`

同條件下的元素，在層疊樣式后，只有最后一個(gè)選擇器生效

基本選擇器

選擇器	說(shuō)明	連接符	代碼演示
后代選擇器	當(dāng)前元素的后代元素，只支持一級(jí)	空格	`.container div{background-color: red;}`
父子選擇器	當(dāng)前元素下的子級(jí)元素，選擇所有子、孫元素	>	`body > div{background-color: red;}`
同級(jí)相鄰選擇器	當(dāng)前元素的同級(jí)元素，只支持一級(jí)	+	`.item.center + .item {background-color: red;}`
同級(jí)所有選擇器	當(dāng)前元素的同級(jí)元素下所有元素	~	`.item.center ~ .item{background-color: red;}`

結(jié)構(gòu)偽類選擇器

舉例用的基礎(chǔ)HTML代碼：

  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>

不分組

無(wú)組名，用:打頭，后面跟關(guān)鍵字，可加參數(shù)。

功能	關(guān)鍵字	代碼演示
匹配第一個(gè)子元素	`:first-child`	`.container > :first-child {background-color: lightgreen; }`
最后一個(gè)子元素	`:last-child`	`.container > :last-child {background-color: lightgreen; }`
選第3個(gè)	`:nth-child(3)`	`.container > :nth-child(3) {background-color: lightgreen; }`
只選擇偶數(shù)單元格	`:nth-child(2n)` 或 `:nth-child(even)`	`.container > :nth-child(even) {background-color: lightgreen; }`
只選擇奇數(shù)單元格	`:nth-child(2n-1)` 或 `:nth-child(odd)`	`.container > :nth-child(odd) {background-color: lightgreen; }`
從指定位置開始后面剩下的所有元素	`:nth-child(n + 4)` 從第4個(gè)開始后面所有的	`.container > :nth-child(n + 4) {background-color: lightgreen; }`
只取前幾個(gè)	`:nth-child(-n + 3)` 前3個(gè)	`.container > :nth-child(-n + 3) {background-color: lightgreen; }`
只取最后幾個(gè)	`:nth-last-child(-n + 3)` 最后3個(gè)	`.container > :nth-last-child(-n + 3) {background-color: lightgreen; }`
倒數(shù)的方式取數(shù)	`:nth-last-child(2)` 倒數(shù)第2個(gè)	`.container > :nth-last-child(2) {background-color: lightgreen; }`

分組

和不分組的區(qū)別：在：前面加上組名，并且第一步先分組，第二步根據(jù)組中的索引進(jìn)行選擇。
關(guān)鍵字用 of-type結(jié)尾。

基礎(chǔ)HTML代碼：

  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <span class="item">4</span>
      <span class="item">5</span>
      <span class="item">6</span>
      <span class="item">7</span>
      <span class="item">8</span>
      <span class="item">9</span>
    </div>
  </body>

關(guān)鍵字舉例說(shuō)明：

關(guān)鍵字	說(shuō)明
`.container div:last-of-type`	取`container`下的所有`div`元素
`.container span:nth-of-type(3)`	取`container`下的所有`span`元素中的第3個(gè)元素
`.container span:nth-of-type(-n + 3)`	取`container`下的所有`span`元素中的前3個(gè)元素

.container span:nth-last-of-type(-n + 2) |取container下的所有span元素中的最后第2個(gè)元素|

偽類

CSS 偽類用于向某些選擇器添加特殊的效果

偽類用:標(biāo)識(shí)

關(guān)鍵字	說(shuō)明	代碼
`:targer`	與id配合使用，實(shí)現(xiàn)錨點(diǎn)操作	`#login-form:target { display: block; }` `#login-form`為錨點(diǎn)，即id值
`:focus`	與表單中的輸入對(duì)象配合使用，得到焦點(diǎn)后改變樣式	`input:focus {background-color: yellow;}` `input`為表單內(nèi)輸入框
`::selection`	當(dāng)選中文本時(shí)作用，僅能改變文本的前景色與背景色	`input::selection { color: white; background-color: red; }`
`:not（）`	反向選擇?！埃ǎ眱?nèi)填寫排除條件	`.list > :not(:nth-of-type(3)) { color: red; }` `:nth-of-type(3)`指當(dāng)前元素組下的第3個(gè)元素

偽元素

CSS 偽元素為虛擬元素，不體現(xiàn)在文檔源碼中

偽元素用::標(biāo)識(shí)

關(guān)鍵字	說(shuō)明	代碼
`::before`	在當(dāng)前元素的前面虛擬一個(gè)元素	`.list::before {content: "購(gòu)物車";color: blue;}` `.list`為一個(gè)列表類
`::after`	在當(dāng)前元素的后面虛擬一個(gè)元素	`.list::after {content: "結(jié)算中...";color: red;font-size: 1.1rem;}`