日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

Web前端开发笔记——第三章 CSS语言 第二节 CSS选择器

發布時間：2024/2/28 HTML 52 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Web前端开发笔记——第三章 CSS语言 第二节 CSS选择器 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

目錄

  • 前言
  • 一、CSS選擇器
    • （一）標簽選擇器
    • （二）id選擇器
    • （三）類別選擇器
  • 二、針對標簽的選擇器嵌套
  • 三、集體聲明和全局聲明
    • （一）集體聲明
    • （二）全局聲明
  • 結語

前言

CSS代碼由選擇器和一條或多條聲明組成的，選擇器是需要改變樣式的 HTML標簽，在CSS中由分號隔開每條代碼為聲明，且聲明是以大括號{}括起來的。

之前我們闡述了CSS的基本概念，其中選擇器是需要改變樣式的 HTML標簽，然而選擇器分為三種：標簽選擇器、id選擇器、class選擇器，它們的作用都是設置CSS樣式。

一、CSS選擇器

（一）標簽選擇器

標簽選擇器對HTML中的標簽設計樣式。
例如，下列html代碼中，設置h2標簽樣式字號為25像素且為紅色，p標簽樣式字號為15像素且為藍色：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">h2 {color: red;font-size: 25px;}p {color: blue;font-size: 15px;}</style></head><body><h2>CSS</h2><p>層疊樣式表是一種用來表現HTML或XML等文件樣式的計算機語言。</p><p>CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。</p></body></html>

運行結果如下：

（二）id選擇器

id選擇器，可以通過在CSS 使用"#“對特定 id 的 HTML標簽設計特定的樣式 ，即可對html中多個標簽進行不同的CSS樣式設置。若不使用”#"，則表示作用于當前html代碼中所有該類型標簽進行樣式設置。
要注意多個id選擇器不能同時使用，即id標簽只能被引用一次。
例如，下列html代碼中，id=style1的文本樣式設置為紅色、字號為15像素；id=style2的文本樣式設置為藍色、字號為15像素：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#style1 {color: red;font-size: 15px;}#style2 {color: blue;font-size: 15px;}</style></head><body><p id="style1">層疊樣式表是一種用來表現HTML或XML等文件樣式的計算機語言。</p><p id="style2">CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。</p></body></html>

運行結果如下：

（三）類別選擇器

類別選擇器（class選擇器），即用于對一組標簽的樣式設計，它可作用于多個標簽且多次使用，通過設置html中標簽的class屬性，然后在CSS中使用“.”進行引用。
也可以在html標簽中使用多個選擇器名稱，之間用空格隔開，從而對某個或多個標簽設計多個樣式。
例如，下列html代碼中，對class="other red "的h2標簽文字進行居中對齊、設置為紅色，對class="red"的p標簽樣式設置為紅色、字號為10像素，對class="blue"的p標簽樣式設置為藍色、字號為15像素：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">h2.other {text-align: center;}.red {color: red;font-size: 10px;}.blue {color: blue;font-size: 15px;}</style></head><body><h2>以下是CSS的介紹：</h2><h2 class="other red">CSS</h2><p class="red">層疊樣式表是一種用來表現HTML或XML等文件樣式的計算機語言。</p><p class="blue">CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。</p><p class="blue">CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。</p></body></html>

運行結果如下：

id標簽也可以和class標簽混合使用，例如下列html代碼：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">.red {color: red;font-size: 20px;}#style {color: blue;font-size: 20px;}</style></head><body><h2>以下是CSS的介紹：</h2><h2 class="red">CSS</h2><p id="red" class="red">層疊樣式表是一種用來表現HTML或XML等文件樣式的計算機語言。</p></body></html>

二、針對標簽的選擇器嵌套

當要對html標簽中嵌套的標簽進行樣式設計時，在CSS代碼中通過標簽 嵌套的標簽{ }兩個選擇器來表示，標簽和嵌套的標簽中用空格隔開。
例如，下列html代碼中，對文本中的“HTML”進行樣式設計：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">p span {color: red;font-size: 18px;}</style></head><body><h2>CSS</h2><p><span>層疊樣式表</span>是一種用來表現HTML或XML等文件樣式的計算機語言。</p></body></html>

運行結果如下：

三、集體聲明和全局聲明

（一）集體聲明

在CSS代碼中通過","對多個選擇器間隔，即可對多個html標簽進行集體聲明。
例如，下列html代碼中，對html中的h2標簽和p標簽進行統一的樣式設計：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">h2,p {color: red;font-size: 18px;}</style></head><body><h2>CSS</h2><p><span>層疊樣式表</span>是一種用來表現HTML或XML等文件樣式的計算機語言。</p></body></html>

運行結果如下：

（二）全局聲明

在CSS代碼中通過"*"對所有html標簽進行統一的樣式設計，即為全局聲明。
例如，下列html代碼中，對html中的所有標簽進行統一的樣式設計：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">* {color: orangered;font-size: 18px;}</style></head><body><h2>CSS</h2><p>層疊樣式表是一種用來表現HTML或XML等文件樣式的計算機語言。</p><p>CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。</p></body></html>

運行結果如下：

結語

以上就是全部內容，篇幅較長，感謝您的閱讀和支持，若有表述或代碼中有不當之處，望指出！您的指出和建議能給作者帶來很大的動力！！！

總結

以上是生活随笔為你收集整理的Web前端开发笔记——第三章 CSS语言 第二节 CSS选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。