国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

html之css選擇器學習

番茄西紅柿 / 3422人閱讀

 

相關內容：

 

  1. 什么是css選擇器
  2. 標簽選擇器
  3. 類選擇器
  4. id選擇器
  5. 并集選擇器（分組選擇器）
  6. 交集選擇器
  7. 后代選擇器
  8. 子標簽選擇器
  9. 屬性選擇器
  10. 相鄰兄弟選擇器
  11. 偽類選擇器
  12. 偽元素選擇器（偽對象選擇器）

 

 

首發時間：2018-03-02

修改：

  1. 2018-04-30：修改了排版，增加了偽類選擇器，偽元素選擇器，在原本簡略的介紹的基礎上增加了描述并修改了某些術語描述。
  2. 2018-05-05：修改了部分偽類選擇器的注解，由于之前發生了小迷糊，所以導致代碼結果正確，但注解不是那個意思。雖然認識并沒有錯，但由于是后面才進行正確解釋，所以前面可能造成誤解，所以修改了部分偽類選擇器的注解。

 

什么是css選擇器：

 

介紹：

css可以設置標簽的樣式，為了更好的設置樣式以及為了方便給某些標簽指定樣式（批量的給某些標簽增加樣式），所以有了css選擇器，css選擇器可以篩選出指定的標簽。篩選出來之后就可以給對應的標簽設置樣式。

 

css選擇器的語法：

css選擇器的定義由兩部分組成：一個是選擇器，一個是樣式定義，比如： image 

 

 

標簽選擇器

介紹：

標簽選擇器直接根據標簽名來選擇標簽，比如想篩選出所有div標簽，可以使用image

 

 

示例：

{:;:;
} {:;:;}{:; }{:;:;
}

 

補充：

  • *代表所有標簽，可以使用*{}來選擇出所有標簽。

類選擇器：

介紹：

  • 類class是標簽的一個屬性image，類選擇器選擇所有標簽中class的屬性值等于類選擇器指定的屬性的所有標簽（注意，類的屬性值可以在多個標簽中相同）。比如image

 

語法：

  • 類選擇器以一個點號代表 。點號后面跟對應的class中含有的屬性值，即可選擇出含有指定class屬性值的標簽。image

 

 

示例：

DOCTYPE html><html><head><meta charset="utf-8"><title>title><style>.center{/* 樣式定義*/text-align: center;}.normal{font-weight:normal;}style>head><body>  <h1 class=center normal>類選擇器h1>  <div class="center">div>body>html>

補充：

  • class中的屬性值可以有多個，使用空格分隔，類選擇器可以只針對其中一個屬性值。image

 

 

id選擇器

介紹：

  • 與類選擇器功能類似，不過選擇的屬性是id，選擇出id的屬性值與id選擇器相同的標簽（理論上id的屬性是唯一的，不同標簽的id屬性值應該不同）image

 

語法：

  • 使用#來進行id選擇，#后面跟著id屬性值,比如：image

 

 

示例：

DOCTYPE html><html><head><meta charset="utf-8"><title>title><style>#header{/* 樣式定義*/background-color: orange;width: 960px;height: 100px;margin:0 auto;}style>head><body>  <div id="header">div>body>html>

 

補充：

  • 注意，id的屬性值應該是唯一，所以id選擇器只用來選擇出某個標簽。

并集選擇器（分組選擇器）

 

介紹：

并集選擇器（分組選擇器）由多個選擇器組成，是將指定的多個選擇器都定義同樣的樣式。多個選擇器的關系是并立的，相當于在原本多帶帶定義的基礎上合并定義。

 

語法：

使用,來分隔多個選擇器，比如image相當于image，所以明顯的并集選擇器可以節省不少代碼。

 

 

示例：

DOCTYPE html><html><head><meta charset="utf-8"><title>title><style>#header,#footer{width: 960px;margin:0 auto;}#header{background-color: orange;height: 100px;}#footer{background-color: skyblue;height: 500px;}h1,h2,h3{color: green;margin:0;}style>head><body>  <div id="header">div>  <div id="footer">  <h1>百度h1>  div>body>html>

 

 

交集選擇器：

介紹：

交集選擇器由多個選擇器組成，只有同時符合多個選擇器的標簽才會被選擇出來。

 

語法：

多個選擇器直接沒有間隔，直接拼接起來。比如image

 

示例：

DOCTYPE html><html><head><meta charset="UTF-8" /><title>Documenttitle><style >div.a{ /* 選擇div標簽中class=a的 */background-color: blue;}style>head><body><div class=a>1div> <div >2div><div><p class=a>123p> div>body>html>

 

補充：

  • 要注意與下面的后代選擇器的區別

后代選擇器：

 

介紹：

  • 后代選擇器由多個選擇器組成，后面的選擇器選擇范圍基于前面的選擇器。比如image
  • 后代選擇器可以選擇出子標簽，也可以選擇出孫子標簽，孫孫子標簽?？傊?，它可以選擇出它的后代。只要符合條件的后代就能被選擇出來。

 

 

語法：

后代選擇器中多個選擇器用空格隔開。image

 

示例：

DOCTYPE html><html><head><meta charset="utf-8"><title>title><style>#header h1{ /* 選擇id為header的標簽的后代中的h1標簽 */color: green;}div .blue{/* 選擇div標簽的后代中class為blue的標簽 */color:blue;}style>head><body>  <div id="header"><h1>header的標簽下的h1標簽h1>  div>  <div class="blue">  這是一個class=blue的div標簽    div>  <div >  <h1 class="blue">div下面的class=blue的標簽h1>  div>body>html>

 

補充：

  • 后代選擇器顧名思義，它只會在后代中查找image

 

子標簽選擇器：

 

介紹：

同樣由多個選擇器組成，與后代選擇器不同的是它只會選擇直接子代，不會選擇出孫子標簽之類的非子標簽。

 

語法：

子標簽選擇器比后代選擇器多出一個>來標注只選擇子標簽。比如image

 

 

示例：

DOCTYPE html><html><head><meta charset="utf-8"><title>title><style>#footer > .blue{color:blue;}style>head><body><div id="footer" ><h1 class="blue">id="footer"下面的子標簽h1><div><span class="blue">id="footer"下面的非子標簽span>div>div>body>html>

 

 

屬性選擇器：

 

介紹：

屬性選擇器是根據屬性選擇出指定標簽image

 

語法：

屬性選擇器使用[]來包裹屬性

  • 僅針對屬性時：[屬性名]{}  比如image
  • 針對屬性跟屬性值時：
    • 對應屬性等于指定值：[屬性名=屬性值]{}image
    • 對應屬性包含指定值（有些屬性可以包含多個屬性值，這個包含是指可以等于其中一個屬性值）:[屬性名~=屬性值]image
    • 以指定值開頭的屬性值(CSS3支持)：[屬性值^=指定值]{}image
    • 以指定值結尾的屬性值(CSS3支持)：[屬性值$=指定值]{}
    • 屬性值字符串包含指定值的(CSS3支持)：[屬性值*=指定值]{}

 

示例：

DOCTYPE html><html><head><meta charset="utf-8"><title>title><style>[type]{ /* 選中包含type 屬性的標簽 */border:1px solid red;}[type="text"]{ /* 選中type屬性="text"的標簽 */color:green;}[class~="t1"]{ /* 選中class屬性包含t1的標簽 */ color:blue;}[name^="user"]{ /* 選中name屬性以user開頭的標簽 */ background-color: pink;}[name*="amy"]{ /* 選中name屬性字符串包含amy的標簽 */background-color: purple;}style>head><body><div><input type="text" ><input type="password" class="t1"><input type="text" name="username"><input type="text" name="AamyB">div>body>html>

 

 

相鄰兄弟選擇器：

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2313.html

相關文章

  • CSS學習筆記(十六) CSS最佳實踐之可維護性篇

    摘要：國內各大公司都已經投入使用，在一些常見的網站，如淘寶騰訊小米等移動站點，隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及，這里推薦閱讀同學寫的專題文章。 前言 CSS代碼難維護眾所皆知。 為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現； 作用于某個元素上的樣式又可能來自單個樣式規...

    newtrek 評論0 收藏0

  • CSS學習筆記(十六) CSS最佳實踐之可維護性篇

    摘要：國內各大公司都已經投入使用，在一些常見的網站，如淘寶騰訊小米等移動站點，隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及，這里推薦閱讀同學寫的專題文章。 前言 CSS代碼難維護眾所皆知。 為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現； 作用于某個元素上的樣式又可能來自單個樣式規...

    keke 評論0 收藏0

  • 前端學習之路之CSS （二）

    摘要：選擇器選擇器可以為標有特定的元素指定特定的樣式中選擇器以來定義。選擇器選擇器用于描述一組元素的樣式，選擇器有別于選擇器，可以在多個元素中使用在中，類選擇器以一個點號顯示。?Infi-chu: http://www.cnblogs.com/Infi-chu/ ? id選擇器id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式,CSS 中 id 選擇器以 # 來定義。 #id_n...

    wapeyang 評論0 收藏0

  • 前端（二）之 CSS

    摘要：前端之前端之前言前言昨天學習了標記式語言，也就是無邏輯語言。今天學習，被稱之為網頁的化妝師。為前端頁面的樣式，由選擇器作用域與樣式塊組成。年初，組織負責的工作組開始討論第一版中沒有涉及到的問題。其討論結果組成了年月出版的規范第二版。前端之 CSS 前言 昨天學習了標記式語言，也就是無邏輯語言。了解了網頁的骨架是什么構成的，了解了常用標簽，兩個指令以及轉義字符；其中標簽可以分為兩大類： 一類...

    張率功 評論0 收藏0

  • 前端筆記之CSS（上）

    摘要：宋體注意使用某種特定的字體系列宋體完全取決于用戶機器上該字體系列是否可用這個屬性沒有指示任何字體下載。但是記住，最終選擇上的是最后的那個后代元素。 層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對...

    番茄西紅柿 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<