色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3選擇器種類,標簽選擇器有哪些

老白2年前39瀏覽0評論

css3選擇器種類,標簽選擇器有哪些?

1. 標簽名選擇器 div { color:Red;} /即頁面中的各個標簽名的css樣式

2.類選擇器 .divClass {color:Red;} /即定義的每個標簽的class 中的css樣式

3.ID選擇器 #myDiv {color:Red;} /即頁面中的標簽的id

4.后代選擇器(類選擇器的后代選擇器) .divClass span { color:Red;} /即多個選擇器以逗號的格式分隔 命名找到準確的標簽

5.群組選擇器 div,span,img {color:Red} /即具有相同樣式的標簽分組顯示

css3選擇器種類,標簽選擇器有哪些

DW中常用css樣式四種類型詳細解析說明?

1、外部樣式

格式:<link type="text/css" rel="stylesheet" href="css路徑" />

舉例:<link type="text/css" rel="stylesheet" href="layout.css"/>

用處:這種形式是把css單獨寫到一個css文件內,然后在源代碼中以link方式鏈接。它的好處是不但本頁可以調用,其它頁面也可以調用,是最常用的一種形式。

備注:Rel:指明連接的是什么文件; Type:指明引入的文件的格式類型; Href:指明文件的路徑,以引入文件為基準的相對路徑。

2、內部樣式

格式: <style type="text/css">選擇器 {聲明1、聲明2………}</style>

這樣的話,該文件中的所有P標簽都將應用該style樣式,而不需要在沒一個html標簽中寫。

用處:這種形式是內部樣式表,它是以<style>和</style>結尾,寫在源代碼的head標簽內。這樣的樣式表只能針對本頁有效。不能作用于其它頁面

3、舉例:

<html>

<head>

<title></title>

<style>

P{

font-size:50px;

color:red;

text-deceration:line

}

</style>

</head>

<body>

</body>

</html>

4、行內樣式:就是直接在html標簽后面寫樣式代碼

<p style=”font-size:50px;color:red;text-deceration:line”>啊啊啊啊</p>

用處:這種在標簽內以style標記的為內部樣式,內部樣式只針對標簽內的元素有效,因其沒有和內容相分離,所以不建議使用。

5、導入樣式

@import url("/css/global.css");

鏈接樣式是以@import url標記所鏈接的外部樣式表,它一般常用在另一個樣式表內部。如layout.css為主頁所用樣式,那么我們可以把全局都需要用的公共樣式放到一個 global.css的文件中,然后在layout.css中以@import url("/css/global.css")的形式鏈接全局樣式,這樣就使代碼達到很好的重用性。

6、CSS 規(guī)則由兩個主要的部分構成:選擇器,以及一條或多條聲明。

selector {declaration1; declaration2; ... declarationN }

選擇器通常是您需要改變樣式的 HTML 元素。

每條聲明由一個屬性和一個值組成。

屬性(property)是您希望設置的樣式屬性(style attribute)。每個屬性有一個值。屬性和值被冒號分開。

selector {property: value}

下面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色,同時將字體大小設置為 14 像素。

在這個例子中,h1 是選擇器,color 和 font-size 是屬性,red 和 14px 是值。

h1 {color:red; font-size:14px;}

提示:請使用花括號來包圍聲明。

是什么選擇器?

head img 選擇器:就是指定CSS要作用的標簽,那個標簽的名稱就是選擇器。意為:選擇哪個容器。

CSS的選擇器分為兩大類:基本選擇題和擴展選擇器。

基本選擇器:

標簽選擇器:針對一類標簽

ID選擇器:針對某一個特定的標簽使用

類選擇器:針對你想要的所有標簽使用

通用選擇器(通配符):針對所有的標簽都適用(不建議使用)

postcss和cssmodule是什么?

postcss是什么?

根據(jù)官網的解釋,它是一種javascript編寫的工具,用來轉化css的。可以認為它是處理css的插件集合,需要配合諸如webpack、gulp等編譯工具才能展現(xiàn)它強大的能力。

目前社區(qū)提供了非常多的插件,比較有名的如下:

autoprefixer 可以為css的屬性配置兼容性的前綴,不需要手動添加postcss-preset-env 允許你使用更加現(xiàn)代的css特性stylelint 檢查css語法錯誤cssnano css的壓縮器等等postcss的原理

如果大家了解babel的原理,那就應該聽說過AST即抽象語法樹。編譯器將字符串進行詞法分析、語法分析,再做轉換,最終達到預期的結果。postcss也是同樣的原理,這個包已經為使用者提供了解析的方法parse,并且也提供了很多轉化的API,利用這些就可以自己開發(fā)一款postcss插件了。

css Module是什么?

先前呢,我們使用css選擇器,它是對整個頁面是有效的,也就是全局的,當你每次迭代需求的時候,需要考慮每次添加新的css是否會影響到其他地方,所以我們有時選擇為樣式表添加命名空間。css Module為我們提供了另外一種開發(fā)方式,它可以使css具有局部作用域。

用法如下:

用法是如此的簡單,基本一看就會,css-loader為我們提供了css Module的開關,只要為css-loader添加參數(shù)選項modules就可以開啟。注意:它必須放在less或者sass的loader之前。

那它如何做到局部作用域的呢?

打開element面板可以發(fā)現(xiàn),它把class變成了md5戳,對應每個組件,保持唯一。

vue的scoped

由此我們聯(lián)想到vue的scoped,它也解決了css局部作用域的問題!

它在dom上生成了一個data屬性,并且給class選擇器添加了屬性選擇器,類似于之前的md5戳。不過由于添加了屬性選擇器,使得選擇器的優(yōu)先級變高了,想在組件外面覆蓋css屬性就變得不那么容易了!

喜歡我的回答就關注我吧,有問題可以發(fā)表評論,我們一起學習,共同成長!