css樣式中的選擇器和盒子模型

目錄

  • 一、行內樣式
  • 二、內部樣式
  • 三、外部樣式
  • 四、結合選擇器
  • 五、屬性選擇器
  • 六、包含選擇器
  • 七、子選擇器
  • 八、兄弟選擇器
  • 九、選擇器組合
  • 十、偽元素選擇器
  • 十一、偽類選擇器
  • 十二、盒子模型

相關文章

  • 學習標簽、屬性、選擇器和外部加樣式
  • 積累CSS樣式屬性:padding、margin、display:flex、font、position、cursor、:hover、:nth-child()、border-radius

一、行內樣式

  • 在html文件中,直接加在元素標簽后面
  • 缺點:耦合度太高

基本格式

<元素 style="屬性1:屬性值1;屬性2:屬性值2"></元素>

示例

<body><div style="color: red;background: blue;">demo</div><div style="color: red;background: blue;">demo</div><div style="color: red;background: blue;">demo</div>
</body>

效果圖:
行內樣式

二、內部樣式

  • <head></head>中寫內部樣式
  • 寫在<style>標簽里
  • 需要使用選擇器

基本格式

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>選擇器{屬性1:屬性值1;屬性2:屬性值2;}</style>
</head>

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{background: blue;color: red;}</style>
</head>
<body><div>demo</div><div>demo</div><p>標簽</p><p>標簽</p><p>標簽</p>
</body>
</html>

效果圖:
內部樣式

三、外部樣式

  • 在css文件中寫樣式
  • <head></head>中寫外部樣式的地址,寫相對應的css文件地址
  • 使用<link>標簽鏈接

基本格式

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css文件地址">
</head>
選擇器{屬性1:屬性值1;屬性2:屬性值2;
}

<link>標簽的屬性

  • rel:角色
    • stylesheet:樣式單
  • href:寫css文件地址
    • 使用相對路徑

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../css/css選擇器.css">
</head>
<body><div>demo</div><div>demo</div><p>標簽</p><p>標簽</p><p>標簽</p>
</body>
</html>
p{background: gold;color: red;
}

效果圖:
外部樣式

三種樣式可以相互合作。
相互合作中,如果樣式相同,但是屬性值不同,會按照優先級高的執行。
三種樣式的優先級:行內樣式>內部樣式=外部樣式
示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{background: blue;color: red;}</style><link rel="stylesheet" href="../css/css選擇器.css">
</head>
<body><div>demo</div><div>demo</div><p style="background: gold;color: green;">標簽</p><p>標簽</p><p>標簽</p>
</body>
</html>
div{background: gold;color: red;
}

效果圖:
樣式
可以從上面代碼中看出:行內樣式和內部樣式有些沖突,根據優先級高的先執行,所有先執行行內樣式,在執行其他的樣式。

通用選擇器、元素選擇器、class選擇器、id選擇器可以查看學習標簽、屬性、選擇器和外部加樣式的相關內容。
選擇器寫的越長(越準確),優先級越高。
id選擇器>class選擇器>元素選擇器
優先級相同,css按照diamagnetic順序執行
特殊場景不適用自行測試

四、結合選擇器

  • 兩個選擇器緊緊的挨在一起,中間沒有空格
  • 注意:不能兩個元素選擇器使用

基本格式

選擇器1選擇器2{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;
}

示例

<body><div class="aa">demo</div><div>demo</div><div>demo</div><p class="aa">標簽</p><p>標簽</p><p>標簽</p>
</body>
div.aa{background: gold;color: red;
}
/* 只找div元素并且是.aa的選擇器的元素,進行樣式添加 */

效果圖:
結合選擇器

五、屬性選擇器

  • 可以針對任何屬性
  • 使用中括號[]

屬性選擇器的類型

  • 根據屬性添加:[屬性]
  • 根據屬性值添加:[屬性=屬性值]
  • 根據屬性值開頭添加:[屬性^=屬性值]
  • 根據屬性值結尾添加:[屬性$=屬性值]
  • 根據屬性值包含添加:[屬性*=屬性值]

根據屬性添加

  • 中括號[]中是屬性

基本格式

[屬性]{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">標簽1</p><p id="aa">標簽2</p><p id="xaa">標簽3</p>
</body>
[id]{background: gold;color: red;
}
/* 只找有id屬性的元素,進行樣式添加 */

效果圖:
屬性選擇器

根據屬性值添加

  • 中括號[]中是屬性=屬性值,是跟隨在元素后面屬性和屬性值

基本格式

[屬性=屬性值]{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">標簽1</p><p id="aa">標簽2</p><p id="xaa">標簽3</p>
</body>
[id=demo]{background: gold;color: red;
}
/* 只找屬性是id,且屬性值是demo的元素,進行樣式添加 */

效果圖:
屬性選擇器2

根據屬性值開頭添加

  • 中括號[]中是屬性^=屬性值,是跟隨在元素后面屬性和屬性值

基本格式

[屬性^=屬性值]{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">標簽1</p><p id="aa">標簽2</p><p id="xaa">標簽3</p>
</body>
[id^=aa]{background: gold;color: red;
}
/* 只找屬性是id,且屬性值以aa開頭的元素,進行樣式添加 */

效果圖:
屬性選擇器3

根據屬性值結尾添加

  • 中括號[]中是屬性$=屬性值,是跟隨在元素后面屬性和屬性值

基本格式

[屬性$=屬性值]{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">標簽1</p><p id="aa">標簽2</p><p id="xaa">標簽3</p>
</body>
[id$=aa]{background: gold;color: red;
}
/* 只找屬性是id,且屬性值以aa結尾的元素,進行樣式添加 */

效果圖:
屬性選擇器4

根據屬性值包含添加

  • 中括號[]中是屬性*=屬性值,是跟隨在元素后面屬性和屬性值

基本格式

[屬性*=屬性值]{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">標簽1</p><p id="aa">標簽2</p><p id="xaa">標簽3</p>
</body>
[id*=aa]{background: gold;color: red;
}
/* 只找屬性是id,且屬性值只要包含aa的元素,進行樣式添加 */

效果圖:
屬性選擇器5

六、包含選擇器

  • 兩個選擇器之間有空格
  • 在符合選擇器1元素的后代中找符合選擇器2的元素
  • 后代中不光是‘兒子’,‘孫子’等后輩也會被找到

基本格式

選擇器1 選擇器2{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;
}

示例

<body><div class="container"><p>demo</p></div><div class="demo"><p>標簽</p></div>
</body>
.container p{background: gold;color: red;
}

效果圖:
包含選擇器

七、子選擇器

  • 兩個選擇器之間使用的是>
  • 在符合選擇器1元素的子元素中找符合選擇器2的元素

基本格式

選擇器1>選擇器2{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;
}

示例

<body><div class="container"><p>demo</p><div class="demo"><p>標簽</p></div></div>
</body>
.container>p{background: gold;color: red;
}

效果圖:
子選擇器

八、兄弟選擇器

  • 兩個選擇器之間使用的是~
  • 在符合選擇器1元素的弟弟中找符合選擇器2的元素
  • 選擇器1與選擇器2擁有同一個父級

基本格式

選擇器1~選擇器2{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;
}

示例

<body><div class="container"><p>demo</p><p class="aa">demo</p><p>demo</p><span>xxx</span><br><span>xxx</span><p>demo</p></div>
</body>
.aa~span{background: gold;color: red;
}

效果圖:
兄弟選擇器

九、選擇器組合

  • 兩個選擇器之間使用的是逗號,
  • 在符合選擇器1元素的或者符合選擇器2的元素

基本格式

選擇器1,選擇器2{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;
}

示例

<body><div class="container"><p>demo</p><p class="aa">demo</p><p>demo</p><span>xxx</span><br><span>xxx</span><p>demo</p></div>
</body>
p,span{background: gold;color: red;
}

效果圖:
選擇器組合

十、偽元素選擇器

  • 在html中沒有添加,但是根據偽元素選擇器進行添加
  • 不能設置寬高

偽元素選擇器的類型

  • 元素后追加:::after
  • 元素前追加:::before
  • 內容中首字母加樣式:::first-letter
  • 內容中首行母加樣式:::first-line

元素后追加:::after

基本格式

選擇器::after{content: "";屬性1: 屬性值1;屬性2: 屬性值2;
}
示例
<body><div>demo</div>
</body>
div::after{content: "xxx";background: gold;color: red;
}

效果圖:
元素后追加

元素前追加:::before

基本格式

選擇器::before{content: "";屬性1: 屬性值1;屬性2: 屬性值2;
}
示例
<body><div>demo</div>
</body>
div::before{content: "xxx";background: gold;color: red;
}

效果圖:
元素前追加

內容中首字母加樣式:::first-letter

  • 只能用在第一個字母
  • 只適用于塊級元素,能夠對寬高識別的元素

基本格式

選擇器::first-letter{屬性1: 屬性值1;屬性2: 屬性值2;
}
示例
<body><div>demo</div>
</body>
div::first-letter{font-size: 20px;color: red;
}

效果圖:
首字母加樣式

內容中首行母加樣式:::first-line

  • 首行的樣式會隨著瀏覽器窗口的縮放而變化
  • 只適用于塊級元素,能夠對寬高識別的元素
  • 如果是英文,要么空格,要么中間加~,使用work-break:break-all英文會斷開

基本格式

選擇器::first-line{屬性1: 屬性值1;屬性2: 屬性值2;
}
示例
<body><div>demo首行效果首行效果首行效果首行效果首行效果首行效果首行效果首行效果首行效果首行效果首行效果</div>
</body>
div::first-line{font-size: 20px;color: red;
}

效果圖:
首行加樣式

十一、偽類選擇器

  • 結構性偽類選擇器
  • UI元素狀態偽類選擇器
  • 其他偽類選擇器

結構性偽類選擇器

偽類選擇器類型基本格式順序
:nth-child()選擇器:nth-child(){屬性1: 屬性值1;}正著數只認數字,不認類型
:first-child第一個選擇器:first-child{屬性1: 屬性值1;}正著數的第一個只認數字,不認類型
:last-child最后一個選擇器:last-child{屬性1: 屬性值1;}正著數的最后一個只認數字,不認類型
:nth-last-child()選擇器:nth-last-child(){屬性1: 屬性值1;}倒著數只認數字,不認類型
:nth-of-type()選擇器:nth-of-type(){屬性1: 屬性值1;}正著數同類型下的某個元素
:first-of-type第一個選擇器:first-of-type{屬性1: 屬性值1;}正著數的第一個同類型下的某個元素
:last-of-type最后一個選擇器:last-of-type{屬性1: 屬性值1;}正著數的最后一個同類型下的某個元素
:nth-last-of-type()最后一個選擇器:nth-last-of-type(){屬性1: 屬性值1;}倒著數同類型下的某個元素

括號中可以寫的參數:

  • 數值:從一開始
  • odd:奇數個,even:偶數個
  • 表達式:3n+1,2n+4,需要有規律

示例1

<body><ul><li>demo1</li><li>demo2</li><li>demo3</li><li>demo4</li><li>demo5</li></ul>
</body>
ul li:nth-child(3){background: gold;color: red;
}

效果圖:
nth1

示例2

<body><ul><div>demo</div><li>demo1</li><li>demo2</li><li>demo3</li><li>demo4</li><li>demo5</li></ul>
</body>
ul li:nth-of-type(){background: gold;color: red;
}

效果圖:
nth-of

UI元素狀態偽類選擇器

類型
:hover鼠標懸停狀態
:checked選中狀態
:focus焦點狀態

示例

<body><ul><div>demo</div><li>demo1</li><li>demo2</li><li>demo3</li><li>demo4</li><li>demo5</li></ul>
</body>
li:hover{font-size: 15px;background: gold;color: red;
}

效果圖:
hover

其他偽類選擇器

:not()排除選擇器

示例

<body><ul><li>demo1</li><li class="aa">demo2</li><li>demo3</li><li class="aa">demo4</li><li class="bb">demo5</li></ul>
</body>
li:not(.aa):not(.bb){font-size: 15px;background: gold;color: red;
}

效果圖:
排除選擇器

十二、盒子模型

  • 塊級元素:獨占一行,對寬高支持
  • 內聯級元素:不獨占一行,對換寬高不支持
  • 內聯塊級元素:不獨占一行,對寬高支持

修改對寬高的支持:

  • display:inline:修改為內聯級元素
  • display:block:修改為塊級元素
  • display:inline-block:修改為內聯塊級元素

彈性盒子

還可以查看積累CSS樣式屬性:padding、margin、display:flex、font、position、cursor、:hover、:nth-child()、border-radius的相關內容。

  • 如果一個元素是彈性盒子,那么子元素默認始終橫向布局。
  • 使用的是dispay:flex

盒子結構

盒子組成
有里往外設置

border:復合屬性

  • border-color:邊框的顏色
  • border-width:邊框的寬度
  • border-style:邊框的樣式
    注意: 這三個一個都不能少,否則,設置不成邊框。

簡寫

border:plum dotted 5px;/* 不分先后順序 */

方位詞

  • border-top:上邊框的設置
  • border-bottom:下邊框的設置
  • border-left:左邊框的設置
  • border-right:右邊框的設置

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/89651.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/89651.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/89651.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

關于基于lvgl庫做的注冊登錄功能的代碼步驟:

以下是完整的文件拆分和代碼存放說明&#xff0c;按功能模塊化劃分&#xff0c;方便工程管理&#xff1a;一、需要創建的文件清單 文件名 作用 類型 main.c 程序入口&#xff0c;初始化硬件和LVGL 源文件 ui.h 聲明界面相關函數 頭文件 ui.c 實現登錄、注冊、主頁面的UI 源文…

RAII機制以及在ROS的NodeHandler中的實現

好的&#xff0c;這是一個非常核心且優秀的設計問題。我們來分兩步詳細解析&#xff1a;先徹底搞懂什么是 RAII&#xff0c;然后再看 ros::NodeHandle 是如何巧妙地運用這一機制的。1. 什么是 RAII 機制&#xff1f; RAII 是 “Resource Acquisition Is Initialization” 的縮寫…

Linux LVS集群技術

LVS集群概述1、集群概念1.1、介紹集群是指多臺服務器集中在一起&#xff0c;實現同一業務&#xff0c;可以視為一臺計算機。多臺服務器組成的一組計算機&#xff0c;作為一個整體存在&#xff0c;向用戶提供一組網絡資源&#xff0c;這些單個的服務器就是集群的節點。特點&…

spring-ai-alibaba如何上傳文件并解析

問題引出 在我們日常使用大模型時&#xff0c;有一類典型的應用場景&#xff0c;就是將文件發送給大模型&#xff0c;然后由大模型進行解析&#xff0c;提煉總結等&#xff0c;這一類功能在官方app中較為常見&#xff0c;但是在很多模型的api中都不支持&#xff0c;那如何使用…

「雙容器嵌套布局法」:打造清晰層級的網頁架構設計

一、命名與核心概念 “雙容器嵌套布局法”&#xff0c;核心是通過兩層容器嵌套構建網頁結構&#xff1a;外層容器負責控制布局的“宏觀約束”&#xff08;如頁面最大寬度、背景色等&#xff09;&#xff0c;內層容器聚焦“微觀排版”&#xff08;內容居中、內邊距調整、紅色內容…

基于深度學習的自然語言處理:構建情感分析模型

前言 自然語言處理&#xff08;NLP&#xff09;是人工智能領域中一個非常活躍的研究方向&#xff0c;它致力于使計算機能夠理解和生成人類語言。情感分析&#xff08;Sentiment Analysis&#xff09;是NLP中的一個重要應用&#xff0c;其目標是從文本中識別和提取情感傾向&…

JWT原理及利用手法

JWT 原理 JSON Web Token (JWT) 是一種開放的行業標準&#xff0c;用于在系統之間以 JSON 對象的形式安全地傳輸信息。這些信息經過數字簽名&#xff0c;因此可以被驗證和信任。其常用于身份驗證、會話管理和訪問控制機制中傳遞用戶信息。 與傳統的會話令牌相比&#xff0c;JWT…

DeepSeek 助力 Vue3 開發:打造絲滑的日歷(Calendar),日歷_睡眠記錄日歷示例(CalendarView01_30)

前言&#xff1a;哈嘍&#xff0c;大家好&#xff0c;今天給大家分享一篇文章&#xff01;并提供具體代碼幫助大家深入理解&#xff0c;徹底掌握&#xff01;創作不易&#xff0c;如果能幫助到大家或者給大家一些靈感和啟發&#xff0c;歡迎收藏關注哦 &#x1f495; 目錄DeepS…

git的diff命令、Config和.gitignore文件

diff命令&#xff1a;比較git diff xxx&#xff1a;工作目錄 vs 暫存區&#xff08;比較現在修改之后的工作區和暫存區的內容&#xff09;git diff --cached xxx&#xff1a;暫存區 vs Git倉庫&#xff08;現在暫存區內容和最一開始提交的文件內容的比較&#xff09;git diff H…

Linux中的LVS集群技術

一、實驗環境&#xff08;RHEL 9&#xff09;1、NAT模式的實驗環境主機名IP地址網關網絡適配器功能角色client172.25.254.111/24&#xff08;NAT模式的接口&#xff09;172.25.254.2NAT模式客戶機lvs172.25.254.100/24&#xff08;NAT模式的接口&#xff09;192.168.0.100/24&a…

【數據結構】「隊列」(順序隊列、鏈式隊列、雙端隊列)

- 第 112篇 - Date: 2025 - 07 - 20 Author: 鄭龍浩&#xff08;仟墨&#xff09; 文章目錄隊列&#xff08;Queue&#xff09;1 基本介紹1.1 定義1.2 棧 與 隊列的區別1.3 重要術語2 基本操作3 順序隊列(循環版本)兩種版本兩種版本區別版本1.1 - rear指向隊尾后邊 且 無 size …

Java行為型模式---解釋器模式

解釋器模式基礎概念解釋器模式&#xff08;Interpreter Pattern&#xff09;是一種行為型設計模式&#xff0c;其核心思想是定義一個語言的文法表示&#xff0c;并定義一個解釋器&#xff0c;使用該解釋器來解釋語言中的句子。這種模式將語法解釋的責任分開&#xff0c;使得語法…

[spring6: PointcutAdvisor MethodInterceptor]-簡單介紹

Advice Advice 是 AOP 聯盟中所有增強&#xff08;通知&#xff09;類型的標記接口&#xff0c;表示可以被織入目標對象的橫切邏輯&#xff0c;例如前置通知、后置通知、異常通知、攔截器等。 package org.aopalliance.aop;public interface Advice {}BeforeAdvice 前置通知的標…

地圖定位與導航

定位 1.先申請地址權限(大致位置精準位置) module.json5文件 "requestPermissions": [{"name": "ohos.permission.INTERNET" },{"name": "ohos.permission.LOCATION","reason": "$string:app_name",&qu…

【數據結構】揭秘二叉樹與堆--用C語言實現堆

文章目錄1.樹1.1.樹的概念1.2.樹的結構1.3.樹的相關術語2.二叉樹2.1.二叉樹的概念2.2.特殊的二叉樹2.2.1.滿二叉樹2.2.2.完全二叉樹2.3.二叉樹的特性2.4.二叉樹的存儲結構2.4.1.順序結構2.4.2.鏈式結構3.堆3.1.堆的概念3.2.堆的實現3.2.1.堆結構的定義3.2.2.堆的初始化3.2.3.堆…

區間樹:多維數據的高效查詢

區間樹&#xff1a;多維數據的高效查詢 大家好&#xff0c;今天我們來探討一個在計算機科學中非常有趣且實用的數據結構——區間樹。想象一下&#xff0c;你是一位城市規劃師&#xff0c;需要快速找出某個區域內所有的醫院、學校或商場。或者你是一位游戲開發者&#xff0c;需要…

SQL 魔法:LEFT JOIN 與 MAX 的奇妙組合

一、引言 在數據庫操作的領域中&#xff0c;數據的關聯與聚合處理是核心任務之一。LEFT JOIN作為一種常用的連接方式&#xff0c;能夠將左表中的所有記錄與右表中滿足連接條件的記錄進行關聯&#xff0c;即便右表中沒有匹配的記錄&#xff0c;左表的記錄也會被保留&#xff0c;…

手寫tomcat

package com.qcby.annotation;import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;Target(ElementType.TYPE)// 表示該注解只能用于類上 Retention(Retentio…

Android平臺下openssl動態庫編譯

1. 下載Linux平臺下的NDK軟件包 NDK 下載 | Android NDK | Android Developers 下載完成后執行解壓命令 # unzip android-ndk-r27d-linux.zip 2. 下載openssl-1.1.1w源碼包&#xff0c;并解壓 # tar -xzvf openssl-1.1.1w.tar.gz 3. 進入解壓后的openssl-1.1.1w目錄 …

【C++基礎】面試高頻考點解析:extern “C“ 的鏈接陷阱與真題實戰

名稱修飾&#xff08;Name Mangling&#xff09;是C為支持重載付出的代價&#xff0c;而extern "C"則是跨越語言邊界的橋梁——但橋上的陷阱比橋本身更值得警惕 一、extern "C" 的核心概念與高頻考點1.1 鏈接規范與名字改編機制C 為支持函數重載&#xff0…