CSS偽類樣式（less父級選擇器&）

link是未訪問的時候，visited是已訪問的時候，hover是鼠標移動到鏈接上時，active選定的時候

創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司是一家服務(wù)多年做網(wǎng)站建設(shè)策劃設(shè)計制作的公司,為廣大用戶提供了網(wǎng)站設(shè)計、做網(wǎng)站，成都網(wǎng)站設(shè)計，廣告投放，成都做網(wǎng)站選創(chuàng)新互聯(lián)公司，貼合企業(yè)需求，高性價比，滿足客戶不同層次的需求一站式服務(wù)歡迎致電。

提示：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

同樣使用less樣式

關(guān)于CSSLESS的幾個問題，CSS/javascript

需要特別注意的是，由于瀏覽器端使用時是使用ajax來拉取.less文件，因此直接在本機文件系統(tǒng)打開（即地址是file://開頭）或者是有跨域的情況下會拉取不到.less文件，導(dǎo)致樣式無法生效。

還有一種情況容易導(dǎo)致樣式無法生效，就是部分服務(wù)器（以IIS居多）會對未知后綴的文件返回404，導(dǎo)致無法正常讀取.less文件。解決方案是在服務(wù)器中為.less文件配置MIME值為text/css（具體方法請搜索）。或者還有一種更簡單的方法，即是直接將.less文件改名為.css文件即可。

less樣式如何使用cssmodule

1.Less

變量：@變量名

混合：在a類中使用b類的所有屬性， .a{ .b(); color:#fff}

嵌套：使用嵌套代替原始css的層疊， 表示當(dāng)前選擇器的父級

運算：+ - * /，可以對任何數(shù)字、顏色或變量進行運算

轉(zhuǎn)義：

函數(shù)：Less 內(nèi)置了多種函數(shù)用于轉(zhuǎn)換顏色、處理字符串、算術(shù)運算等

命名空間和訪問符

作用域：首先在本地查找變量和混合（mixins），如果找不到，則從“父”級作用域繼承

注釋： // 行注釋，/.../塊注釋

導(dǎo)入：@import "library";可以導(dǎo)入一個 .less 文件，此文件中的所有變量就可以全部使用了, .less 擴展名，可以省略掉

2.css modules

CSS的規(guī)則都是全局的，任何一個組件的樣式規(guī)則，都對整個頁面有效。產(chǎn)生局部作用域的唯一方法，就是使用一個獨一無二的class的名字，不會與其他選擇器重名。 CSS Modules是通過哈希算法將類名編譯，保證類名的唯一性。

聲明全局規(guī)則：

靈活按需導(dǎo)入以便復(fù)用代碼，避免樣式全局污染，但不利于寫組件單元測試

3.CSS bem規(guī)范

BEM - Block Element Modfier（塊，元素，編輯器）

在選擇器中用三種符號來表示擴展關(guān)系

-中劃線 ：僅作為連字符使用，表示某個塊或者某個子元素的多單詞之間的連接記號。

__ 雙下劃線：雙下劃線用來連接塊和塊的子元素

-- 雙中劃線：用來描述一個塊或者塊的子元素的一種狀態(tài)

type-block__element--modifier

Block:不是指html中的塊元素，任何獨立的頁面元素都可以視為一個塊，這個獨立的塊容器有一個唯一的css類名，也就是這個塊的名字

Element:屬于塊的某部分，任何的在Block中的DOM節(jié)點，都是一個element。在一個已知的block中，所有的element在語義上都是相等的，Block下的所有Element不考慮層級嵌套關(guān)系，扁平化處理都屬于Block，即連續(xù)的__下劃線只能出現(xiàn)一次

Modifier:用于修飾塊或元素，體現(xiàn)在外觀或行為上的改變，都可作為一個修飾器，如active狀態(tài)，add/edit的操作

注意事項：

1）保證各個部分只有一級B__E--M，修飾器需要和對應(yīng)的塊或元素一起使用，避免單獨使用。不能有 .block__el1__el2 的格式

2）僅以類名作為選擇器，不使用ID或標簽名來約束選擇器

...import'./index.less'...divclassName="article"divclassName="article__body"pclassName="article__title"title/pbuttonclassName="article__button--primary"/buttonbuttonclassName="article__button--success"/button/div/div//index.less文件.article{max-width:1200px;__body{padding:20px;}__title{font-weight:700;}__button{padding:5px8px;--primary{background:blue;}--success{background:green;}}}

為什么用less css來寫樣式，只在火狐里有效，IE 和 chrome都無法識別，我是在客戶端使用的哈！

您好！很高興為您答疑！

請?zhí)峁┩暾a，目前看，linkhref，link hrefscripttype中缺少空格，你加上空格試試。

您可以在火狐社區(qū)了解更多內(nèi)容。希望我的回答對您有所幫助，如有疑問，歡迎繼續(xù)在本平臺咨詢。

將less文件轉(zhuǎn)換成css文件

兩種方式，分別為：1、手動生成；2、使用webstorm自動生成。

1、項目的文件結(jié)構(gòu)

2、在less文件的根目錄

Shift +?鼠標右鍵 +?選擇‘在此處打開命令窗口’

3、輸入命令：lessc +?空格 +?less文件名

如：lessc main.less

4、繼續(xù)輸入命令：lessc +?空格 +?less文件名 +?空格 +?大于號 +?空格 +?css文件名

如：lessc main.less main.css

1、File + Settings

2、Tools + File Watchers

3、點擊‘確定’即可

4、當(dāng)你修改less文件時，css文件將自動生成。

css less 怎么用呢？怎么讓html網(wǎng)頁支持less呢？

在瀏覽器中使用less.js開發(fā)是很好的，但不推薦用于生產(chǎn)環(huán)境中。瀏覽器端使用是在使用LESS開發(fā)時最直觀的一種方式。如果是在生產(chǎn)環(huán)境中，尤其是對性能要求比較高的場合，建議使用node或者其它第三方工具先編譯成CSS再上線使用。

注意：

確保包涵.less樣式表在less.js腳本之前

當(dāng)你引入多個.less樣式表時，它們都是獨立編譯的。所以，在每個文件中定義的變量、混合、命名空間都不會被其它的文件共享。

必須通過服務(wù)器環(huán)境訪問頁面，否則報錯

瀏覽器選項：

你可以引入script

src="less.js"/script之前通過創(chuàng)建一個全局less對象的方式來指定參數(shù)！

分享標題：less樣式css,less樣式繼承
標題路徑：http://m.rwnh.cn/article30/dscoipo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、App設(shè)計、移動網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、定制網(wǎng)站、手機網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)