HTML和CSS前端教程03-CSS選擇器

来源:https://www.cnblogs.com/haochen273/archive/2019/01/22/10305818.html
-Advertisement-
Play Games

[TOC] 1. CSS定義 層疊樣式表 2. 創建CSS的三種方法 2.1. 元素內嵌（權重最高） 2.2. 文檔內嵌 通過選擇器的方法調用指定的元素並設置相關的CSS 2.3. 外部引用 定義一個style01.css文件 在主文件中應用style 大量HTML使用同一組CSS，就可以將這些樣式 ...


目錄

1. CSS定義

層疊樣式表

2. 創建CSS的三種方法

2.1. 元素內嵌（權重最高）

<p style="color:red;font-size:50px;">

2.2. 文檔內嵌

通過選擇器的方法調用指定的元素並設置相關的CSS

<style type="text/css">
    p{
        color:red;
        font-size: 30px;
    }
</style>

2.3. 外部引用

  • 定義一個style01.css文件
@charset "utf-8";

p{
    color:red;
    font-size: 30px;
}
  • 在主文件中應用style
<!--在header中-->
<link rel="stylesheet" type="text/css", href="style01.css">

大量HTML使用同一組CSS，就可以將這些樣式保存到一個單獨的.CSS文件中，通過link引用就可以了

3. CSS層疊和繼承

  • 樣式表層疊： 同一元素通過不同方式設置樣式表所產生的樣式重疊
  • 樣式表繼承： 某一個被嵌套的元素得到它父類元素樣式
  • 瀏覽器樣式： 這個元素在瀏覽器運行時附加的樣式

3.1. 瀏覽器樣式

<b>b元素有加粗元素</b>

<span style="font-weight:bold;">span元素沒有加粗樣式，但是可以設置</span>  

<b style="font-weight:normal;">b元素手動取出加粗元素</b>

3.2. 樣式表層疊


<link rel="stylesheet" type="text/css", href="style01.css">

<style type="text/css">
    p{
        color:red;
        font-size: 30px;
    }
</style>

<!--同時疊加（不是覆蓋）三個元素-->
<p style = "font-size:50px; color:orange;">我要疊加三個樣式</p>

優先順序： 元素內嵌 <- 文檔內嵌 <- 外部引用 <- 瀏覽器

可以在不同樣式中添加!important關鍵字來強行設置優先順序
color: green !important

3.3. 樣式繼承

<style type="text/css">
    p{
        color:red;
        font-size: 30px;
    }
</style>

<p>這是<b>HTML5</b></p>

此時顯示的是這是HTML5,我們只設置了p為紅色，但是b也為紅色了，因為b是在p內部

  • 如果一個元素沒有設置父元素相關的樣式，那麼就會使用繼承機制將父類樣式繼承下來
  • 樣式繼承只適用於元素的外觀(文字，顏色，字體等)，佈局樣式無法繼承

4. CSS選擇器

定位到你想要設計的樣式元素來設計元素

4.1. 選擇器的總匯

(1) 基本選擇器

使用頻率最高的一些選擇器

1.通用選擇器*

  • *表示通用選擇器，匹配所有HTML元素包括<HTML>和<body>標簽

  • 可以為所有元素匹配並配置樣式，但是無法篩選不必要元素

  • 定義一個CSS


@charset "utf-8"

* {
  border: 1px solid red;
}
/*通用選擇器可以匹配到html和body元素*/

<link rel="stylesheet" type="text/css", href="style01.css">

<p>這是一個段落</p>

<p>這是一個加粗</p>
<span>這是一個什麼都沒有</span>

2.元素選擇器p


@charset "utf-8"

p {
  border: 1px solid red;
}
/*通用選擇器可以匹配到html和body元素*/

3.ID選擇器#adc

ID是唯一的，不可重覆使用


@charset "utf-8"

#abc {
  border: 1px solid red;
}

<link rel="stylesheet" type="text/css", href="style01.css">

<p id="abc">這是一個段落</p>

<p>這是一個加粗</p>
<span>這是一個什麼都沒有</span>

4. 類選擇器.


@charset "utf-8"

.abc {
  border: 1px solid red;
}

<link rel="stylesheet" type="text/css", href="style01.css">

<p class="abc">這是一個段落</p>

<p class="abc">這是一個加粗</p>
<span>這是一個什麼都沒有</span>

也可以限定元素

@charset "utf-8"

p.abc {
  border: 1px solid red;
}
/*只能適用於段落*/

也可以使用多個class

@charset "utf-8"

.abc {
  border: 1px solid red;
}
.def {
  font-size: 30px;
}

<p class="abc def">這是一個加粗</p>

5. 屬性選擇器[...]

@charset "utf-8"

[href]{
  color: red;
}
<a href="http://www.baidu.com">這是一個百度</a>

也可以設置相關的屬性值

@charset "utf-8"

[type="password"]{
  border: 1px solid red;
}
<input type="password">

通過正則表達式來設置匹配

@charset "utf-8"

[href^="http"]{
  color: orange;
}
/*只能開頭是http才能匹配*/
<a href="http://www.baidu.com">百度</a>  
<a href = "javascript:void(0)">好搜</a>

通過精確匹配

@charset "utf-8"

[href*="baidu"]{
  color: orange;
}
/*只能包含baidu才能匹配*/

(2) 複合選擇器

將不同選擇器進行組合形成的新的特定匹配

1.分組選擇器

多個選擇器逗號分隔，同時設置一組樣式

@charset "utf-8"

p,b,i,span {
  color: orange;
}

#abc,.abc,i,span {
  color: orange;
}

2.後代選擇器

選擇<p>元素內部所有的<b>元素，不在乎<b>的層次深度

@charset "utf-8"

p b {
  color: orange;
}
<p>這是一個HTML5<b>教程</b></p>

效果為： 這是一個HTML5教程

3. 子選擇器

與後代選擇器類似，但是只能運用於兒子，孫子就不行了
```css
@charset "utf-8"

p>b {
color: orange;
}
```

4.相鄰兄弟選擇器

匹配第一個元素相鄰的第二個元素

@charset "utf-8"

p+b {
  color: orange;
}

5.普通兄弟

類似，只是靠的不是特別近

@charset "utf-8"

p~b {
  color: orange;
}

(3) 偽元素選擇器::

1. 塊級首行::first-line

  • 只適用於<p>、<div>等的首行文本選定
:: first-line {
  color: orange;
}

2. 塊級首字母::first-letter

p:: first-letter {
  color: orange;
}

3. 文本前插入::before

  • 在文本前插入內容
a:: before {
  content: '點擊-';
}

3. 文本後插入::after

(4) 偽類選擇器

1. 結構性偽類:

  • 可以根據元素在文檔中的位置選擇元素
1.1. 根元素選擇器
:root {
  border: 1px solid red;
}
1.2. 子類選擇器
ul>li:first-child {
  color: red;
}
/*父類的第一個兒子*/
ul>li:last-child {
  color: red;
}
/*父類的最後一個兒子*/
ul>li:only-child {
  color: red;
}
/*選擇只有一個子元素的那個元素*/
dive>p: only-of-type {
  color: red;
}
/*選擇只有一個指定類型的子元素的那個元素*/
1.3.nth-child(n)系列
ul>li:nth-child(2) {
  color: red;
}
/*選擇第2個*/
ul>li:nth-last-child(2) {
  color: red;
}
/*選擇倒數第2個*/
ul>li:nth-of-type(2) {
  color: red;
}
/*特定類型第2個*/
ul>li:nth-last-of-type(2) {
  color: red;
}
/*特定類型倒數第2個*/

2.UI偽類

用於匹配表單的數據

enabled
input:enabled {
  border: 1px solid red;
}
/*選擇表單中的enable元素*/
<form>
  <input tupe="text" disabled>
  <input tupe="text">

</form>
checked
input:checked {
  display: none;
}
default
input:default {
  display: none;
}
valid和not valida
input:valid {
  border: 1px solid green;
}

input:invalid {
  border: 1px solid red;
}
required
input:required {
  border: 1px solid red;
}

3. 動態偽類

根據條件改變匹配元素

/*Url沒有訪問的顏色*/
a:link {
  color: red;
}
/*Url被點擊的顏色*/
a:visited {
  color: blue;
}
/*滑鼠懸停的顏色*/
a:hover {
  color: orange;
}
/*滑鼠長按的顏色*/
a:active {
  color: green;
}
<a href="baidu.com">百度</a>
focus-文本框獲取的
/*滑鼠獲取到文本框的顏色*/
input:focus {
  border: 1px solid green;
}

其他偽類選擇器

not否定選擇器
/*選擇百度除外的URL*/
a:not([href*="baidu"]) {
    color: green;
}
empty
/*空元素隱藏*/
:empty {
    display: none;
}
target-定位到錨點
/*空元素隱藏*/
b:target {
    color: red;
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 筆記：沙盒文件的創建（我懶，偷偷複製過來的，無奈臉。。。。）
    NSString *filePath = [documentsDirectory stringByAppendingPathComponent:@"xxx.txt"]; https://www.cnblogs.com/FBiOSBlog/p/5819418.html https://blog.csd ...
  • Android-藍牙的網路共用與連接分析
    一、概述 本次分析是基於android7.0的源碼，主要是介紹如何通過反射來打開藍牙的網路共用以及互聯網的連接。 二、藍牙的網路共用 1. 網路共用部分源碼分析 關於packages/apps/Settings/src/com/android/settings/TetherSettings.java ...
  • 筆記：iOS字元串的各種用法（字元串插入、字元串覆蓋、字元串截取、分割字元串）（別人的代碼直接複製過來的，我臉皮有點厚）
    NSString* str=@"hello";//存在代碼區，不可變 NSLog(@"%@",str); //1.【字元串插入】 NSMutableString* str1=[[NSMutableStringalloc]initWithString:@"hello"];//存在堆區，可變字元串 NS... ...
  • 富文本編輯器Quill(二)上傳圖片與視頻
    image與video在Quill formats中屬於Embeds，要在富文本中插入圖片或者視頻需要使用insertEmbed api。 insertEmbed 插入圖片需要位置，內容類型以及圖片的url： 獲取位置： 上傳圖片 首先toolbar中添加image，還需要一個隱藏input元素用來 ...
  • HTML和CSS前端教程05-CSS盒模型
    [TOC] 1. CSS盒模型 元素的尺寸 1.1 元素的尺寸 | 屬性 | 值 | 說明 | | | | | | width | auto、長度值或百分比 | 元素的寬度 | | height | auto、長度值或百分比 | 元素的高度 | | min width | auto、長度值或百分比 ...
  • 199，一個被正則表達式遺忘的號碼段？
    前不久換手機號，東想西想，最後選了個電信的199號碼段。這下好了，當我註冊某些網站的賬號時，彈出個非法號碼欄位，驚了！怎麼回事？？？ 於是想到：當我們註冊某網站的時候，需要輸入手機號進行註冊。比如唯品會的註冊界面，當你輸入的手機號不對時就會出現錯誤提示：請輸入正確的手機號碼。 這個是怎麼實現的呢？比 ...
  • 點擊HTML頁面問號出現提示框
    本demo的功能：點擊頁面按鈕在其邊緣出現提示信息，點擊頁面任何一處則消失。 如下圖： 1.所需插件： jquery插件； layer插件； 2.HTML內容： ==註意==： 1. class="j help tips"這個class是核心，不可缺少。 2. data tips屬性是必須的。 3. ...
  • HTML和CSS前端教程03-CSS文本樣式
    [TOC] 1.CSS顏色 建議就用十六進位 2.CSS長度的度量單位 建議就用px 3.CSS文本樣式 字體的大小，樣式以及方位 3.1. 字體屬性 | 屬性名 | 說明 | 例子 | | | | | | | 字體大小 | | | | 英文字體是否轉為小型字母 | `font variant: n ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類