什麼是css,css選擇器簡介

2020-12-16 國哥筆記

什麼是CSS

css是 Cascading（層疊 ）Style（樣式） Sheet（表）的簡稱，及層疊樣式表，CSS技術用來美化html頁面，html相當於蓋房子，CSS相當於裝修，使用CSS可以把樣式代碼和html分離

什麼是css

html頁面中引入css的方式

1、內聯樣式：在標籤的style屬性中引入css，不推薦使用，不能復用

<div style="color: red; border: 1px solid blue">我是一個div</div>

2、內部樣式：通過style標籤引入CSS，可以在當前頁面復用，學習時經常使用，工作中不推薦使用，因為不能多頁面復用

<style type="text/css">h2{color: purple; background-color: green;}</style>

3、外部樣式：通過link標籤引入外部css樣式文件，可多頁面復用，推薦工作中使用，需要單獨創建樣式文件

<link rel="stylesheet" href="first.css">

優先級（多種引入方式操作同一個標籤，以哪個為準）

內聯優先級最高內部和外部同時存在，則就近原則標籤默認效果優先級最低選擇器

選擇器可以幫助我們選中需要添加樣式的標籤

1、標籤名選擇器：通過標籤的名稱找到指定標籤

格式：元素名{ }

2、類選擇器：通過標籤的class屬性值選中指定標籤,多個標籤可以有相同的class值

格式：.d1{ }

3、id選擇器：通過id找到標籤，一個html文件中id不能重複

格式： #id{}

4、派生選擇器（後代選擇器）：類似於路徑，找到符合要求的標籤，會匹配所有的後代標籤

格式： ul li a{} #id li a{}

5、子元素選擇器：和後代類似，但是只能獲得子元素

格式： ul>li>a{}

6、分組選擇器：可以將多種選擇器結合到一起使用，用來統一設定樣式

格式: h1,h2,#abc,.m{ }

7、偽元素選擇器：偽元素選擇器選擇的是元素的狀態，狀態分為以下幾種：

link 表示元素未被點擊時的狀態hover 表示滑鼠懸停時的狀態active 表示元素被點擊時的狀態visited 表示元素被點擊後的狀態格式： #id:hover{ }

總結選擇器：標籤名選擇器，類選擇器，id選擇器，派生選擇器，子元素選擇器，分組選擇器，偽元素選擇器

相關焦點

  • HTML+CSS:css選擇器介紹之標籤選擇器、類選擇器以及ID選擇器
    上篇文章給大家說了css的三種不同的引入方式，今天給大家說一下css的三種選擇器：標籤選擇器、類選擇器和ID選擇器。那麼有人就會問了，什麼是選擇器？我們寫的css樣式聲明（定義）由兩部分組成，形式如下：選擇器{ 樣式；}，在{}之前的部分就是「選擇器」，「選擇器」指明了{}中的「樣式」的作用對象，也就是「樣式」作用於網頁中的哪些元素。比如我們之前寫的span{ color:#f00; }中的span就為一個選擇器。
  • CSS入門
    ");</style>style.css:h1{ color: blue;}css導入原則：就近原則3.CSS選擇器CSS選擇器：選擇你想要的元素的樣式的模式。3.1 基本選擇器1.標籤選擇器<!
  • Css語法特點是什麼?Css和html、javascript的關係是什麼?
    cssCss語法特點是什麼？Css樣式表主要由很多樣式規則組成，規則主要由兩部分構成+選擇器+一條或多條聲明（屬性和值）。css規則而一個頁面的CSS少則幾百條多則幾千條規則，主要注意的css選擇器、元素標籤名、類名、id命名都是是很靈活的，如果沒有統計的要求，
  • CSS學習筆記總結
    >多種引入方式出現衝突時優先級問題行內式>內嵌式和外聯式誰放在後面會覆蓋之前出現衝突的樣式選擇器(selector)在頁面中使用簡練的代碼快速選擇元素標記選擇器>tagName{直接使用標籤名作為選擇元素的依據,非常引起誤操作}類別選擇器.className{直接使用.類名選擇元素}
  • 11 - 前端開發 - CSS 選擇器
    >CSS2 中的選擇器html選擇器（標籤選擇器）程序源碼：<!id選擇器程序源碼：<!關聯選擇器（包含選擇符）程序源碼：<!組合選擇器（選擇符組）定義格式：選擇器1 , 選擇器2 , 選擇器3…{樣式…}EX：h1,h2,h3{樣式…} /* h1 / h2 / h3 都使用此樣式
  • CSS與HTML結合有四種方式
    Css的簡介：層疊樣式Css做什麼用：設置網頁的顯示效果CSS將網頁顯示的效果分離，減少耦合性，方便修改和管理CSS與HTML結合CSS與HTML結合有四種方式：（1）、在HTML的標籤上，提供一個屬性，style=』』CSS代碼」（內嵌樣式）（2）、在HTML的文件，提供一個標籤<style type=」text/css」>CSS代碼<style
  • CSS語法與規則 — 重學CSS
    @import: https://www.w3.org/TR/css-cascade-4/然後 import 就在 css cascade 4 的規範裡面因為 CSS 的全稱就是 Cascade Style Sheet（級聯表）@media: https://www.w3.org/TR/css3
  • Web前端學習第22課,理解CSS標識選擇器、類選擇器和屬性選擇器
    前面的課程中我們學習了幾種選擇HTML文檔中元素的方法。它們分別是：標籤選擇器、標籤分組選擇器、上下文選擇器（也叫祖先後代選擇器）。標籤選擇器就是以HTML文檔的標籤名作為選擇器。標籤分組選擇器，也叫逗號選擇器，它可以選擇多個標籤，並且為這多個標籤元素設置一個相同的樣式。
  • (02)CSS 選擇器詳解 | CSS
    前言：本篇行文順序為，在第一部分介紹「 HTML 文檔樹結構」，在完全理解這個「樹結構」的基礎上，才可以很好地掌握文章下邊緊接著的兩個大選擇器（組合選擇器和偽類選擇器）。因為只有有了這個「結構樹」，我們本篇討論的「選擇器」才能夠起作用。又是很大、很雜、很基礎、很重要的知識點，屬必掌握項。
  • CSS中behavior屬性語法簡介
    CSS中behavior屬性語法簡介 你對CSS中behavior屬性的語法是否熟悉，這裡向大家簡單描述一下，在進行CSS網頁布局的時候，我們經遇到刷新要保留表單裡內容的時候，CSS中的behavior就為我們很好的解決了這個問題。
  • HTML+CSS:認識css的概念與語法,了解css的優勢
    之前的文章給大家介紹了下網頁中常用的html的基本知識，從這篇文章開始我們開始介紹css的內容。可以這麼說學完了html你可以做出網頁的框架，學好了css之後呢，你就可以給做好的框架進行美化填色，做出各種各樣的網頁。
  • 編程技術—CSS技術<一>
    今天接著說網頁製作之 【css】技術~~按照昨天的學習，已經能對一個網頁初步的實現了，今天講的這個css就相當於給頁面穿一件漂亮的衣服~~話不多說，直接看我的總結如下：css是什麼?有什麼用?HTML------->頁面的結構CSS:----------->美化頁面2.
  • CSS工程化
    css的問題類名衝突的問題當你寫一個css類的時候，你是寫全局的類呢？還是寫多個層級選擇後的類呢？你會發現，怎麼都不好！一旦樣式多起來，這個問題就會變得越發嚴重，其實歸根結底，就是類名衝突不好解決的問題。
  • css3 @keyframes規則
    @keyframes規則定義及用法在css中，@keyframes規則可以使用來創建動畫，創建動畫是通過逐步改變從一個CSS樣式到另一個CSS樣式，在動畫過程中，您可以更改CSS樣式的設定多次，指定的變化時發生時使用％，或關鍵字"from"和
  • php學習之css入門(一)
    2.css基礎css基本語法css樣式表由語法規則組成，由多個語法規則組成樣式表一個css語法規則由「選擇器」和「聲明語句」組成選擇器：如何的精準的定位到某個或某些html標記的方法，選擇器有很多種方式
  • 盤點web前端動畫技術,css動畫是通過什麼實現的?
    、網頁樣式（css）、網頁互動（JavaScript）三部分組成，對於新手來說理解他們之前的關係有些困難，我們可以把網頁前端比成一座房子，html代表房子的基礎和架構、css表示房子的裝修風格是中式、歐式還是其他風格的，JavaScript代表這個房子中能夠產生交互的東西，比如門和窗戶它們都有打開和關閉的動作。
  • CSS3 target偽類簡介
    擴展閱讀：https://developer.mozilla.org/en/CSS/：targethttps://www.red-team-design.com/get-to-know-your-css3-target-pseudo-classhttps://css-tricks.com/css3-tabs/原文：https://
  • JavaScript中的CSS: CSSX
    在客戶端的觀點中，HTML和CSS很難依賴JavaScript。如果沒有他們，內容就不會顯示。他們分組將會讓項目的複雜性減少很多。基於上述這些原因，我開始寫CSSX客戶端庫。CSSX簡介要讓CSSX可用，需要先在你的頁面中加載cssx.min.js文件和使用npm install cssx安裝npm模塊。如果你有build處理，那麼你對npm包會有興趣。
  • CSS核心基礎 一些常見的選擇器的使用 小白教程
    在CSS中，執行這一任務的樣式規則部分被稱為選擇器。在CSS中有很多的選擇器，包含標記（標籤）選擇器、類別選擇器、id選擇器、通配符選擇器、標籤指定選擇器、後代選擇器、併集選擇器等，我們來簡單介紹一下！
  • HTML+CSS:掌握css的繼承以及代碼的優先級問題
    上邊文章我們說了使用css的三種不同的選擇器，本篇文章我們主要介紹css的繼承規則以及css代碼的權重優先級問題。（1）css的繼承規則CSS的某些樣式代碼是具有繼承性的，那麼究竟什麼是繼承呢？（2）css代碼的權重優先級css就像工程師一樣是很嚴謹的，有的時候我們為同一個元素設置了不同的CSS樣式代碼，那么元素會啟用哪一個CSS樣式呢?我們來看一下面的代碼：上邊的代碼中，p和.first都匹配到了p這個標籤上，那麼會顯示哪種顏色呢？