2.前言
css一旦生效，就會應用於全域性，所以很容易出現衝突。為了解決這個問題css隔離就順勢而生。blazor誕生於2023年，至今為止已經2年多了，然而css隔離直至.net 5出現才支援。
3.razor元件間隔離
razor元件間css隔離應當是使用最為簡單，也是使用最為方便的一種css隔離方式。實現razor元件間css隔離非常簡單，只需要在元件所在的目錄下建立同名的「.razor.css」檔案即可——若資料夾a下存在名為「component.razor」的元件，則只需要在資料夾a下建立「component.razor.css」，即可實現為「component.razor」元件設定單獨的樣式而不影響其他元件。
以預設模板為例，新建「index.razor.css」，其內容如下：
h1 新建「counter.razor.css」，其內容如下：
h1 其效果如下：
razor元件間css隔離.min
上面的元件css檔案將會被生成為「專案名.styles.css」的檔案，在.net 5中會被預設新增到「index.html」中，如上兩個css檔案會被編譯為如下結果：
/* /pages/counter.razor.rz.scp.css /
h1[b-g5zg69lne1]
/ /pages/index.razor.rz.scp.css */
h1[b-f3rb2cn7la]
在瀏覽器中檢視dom元素，其結果如下：
也就是說，這兩個元件內的dom被新增上了乙個以「b-」開頭加10個隨機字元的屬性，這似乎與angular相似（本人沒有用過，只是在瀏覽器中見到過類似的東西）。blazor中的css隔離，似乎是通過隨機屬性名來實現的。那麼，通過id和class生成styles.css是什麼樣的呢？其同樣是通過隨機屬性名來實現的。例如，下面一段元件css檔案，
#zxyao-a
#zxyao-b
.zxyao-cls
其會被編譯成如下結果：
/* /pages/index.razor.rz.scp.css */
#zxyao-a[b-f3rb2cn7la]
#zxyao-b[b-f3rb2cn7la]
.zxyao-cls[b-f3rb2cn7la]
其結果如下：
razor元件間css隔離2.min
也就是說，無論元件css檔案彙總如何寫，其都會轉化為css選擇器[隨機屬性]的形式。
4.css隔離的子元件支援
預設情況下，元件css僅僅只會應用都當前元件。例如，有以下兩個元件：
/* index.razor */
/* components/child.razor */
這是子元件
如果在」index.razor.css「中樣式如下，
.my-text
那麼其僅僅只對」index.razor「起作用——border出現在最外層 index 元件上。
子元件支援1.min
如果想讓其對本元件及其子元件」.my-text「元素起作用，可以使用」::deep「進行標記：
::deep .my-text
子元件支援2.min
是不是發現，本元件的「.my-text」的border沒了。如前面所講，在這裡，::deep將會被隨機屬性所替代，也就是說，其編譯結果如下：
/* /pages/index.razor.rz.scp.css */
[b-f3rb2cn7la] .my-text
其中，b-f3rb2cn7la是指本元件根元素，如圖所示。
子元件支援3.min
如果本組間沒有唯一的父元素標籤，則本組間中的每乙個原生的html標籤都會有相同的隨機屬性，例如下面這個元件，其「div」與「h1」都會具有相同的隨機屬性，並會用改屬性替代「::deep」標識。「child「元件中的元素將不會出現改隨機屬性。
則blazor會忽略外層的元件，直至在本組間內找到第乙個原生的html元素為止，然後為該層所有原生的html元素新增上隨機屬性。
因此，當本元件的根元素與子元件需要設定樣式的元素css選擇器相同時，如果想要隔離樣式在本元件與子元件都生效，有兩種方式：一是為本組間和子元件同時寫css樣式，二是再用乙個元素包裹所有的元件和元素，即換個根元素。
5.css預處理器的支援
很多時候，我們可能會使用scss或less來編寫樣式檔案，blazor原生並不支援這些預處理器，我們可以使用任務執行程式資源管理器來在專案生成前編譯scss或less，或者是使用一些第三方的庫來支援，比如微軟官方所提到的delegate.sassbuilder。我試用了下delegate.sassbuilder，可能由於我的使用方式不對，css檔案的生成貌似是晚於專案生成的，無法在第一次生成程式時對css檔案進行編譯，接下來我將分享另外一種方式，即使用」任務執行程式資源管理器「。
這裡我簡單使用了下」node-sass「，直接通過命令列編譯，並未使用gulp或webpack之類的高階工具，解決方案步驟如下（node-sass的安裝這裡就不再講了）：
編寫scss檔案編譯命令列程式」scss.bat「
在專案的根目錄下新建scss.bat檔案：
scss編譯2.min
並寫入如下命令。
node-sass -r ./ -o ./ --source-map true --source-map-contents sass --output-style compressed
該命令將會編譯scss檔案，並生成壓縮後的css檔案和相應的source map檔案。
新增bat檔案到task runner
在scss.bat檔案上右鍵，選擇」add to task runner「選項。
scss編譯3.min
繫結執行任務
開啟檢視|其他視窗|任務執行程式資源管理器，在找到scss命令，然後右鍵，選擇繫結|生成前，繫結後可在右側繫結視窗下生成前下看到該命令。
scss編譯4.min
啟用任務執行程式後，會在解決方案目錄下生成」commands.json「檔案，我的此檔案內容如下，」-vs-binding「選項表明了任務繫結的執行時間的位置。
},「-vs-binding」:
}接下來，只需要直接執行程式，即可以看下效果。
當然在scss中，我們也可以使用」::deep「標記，其也能正確的顯示，例如：
/* pages/index.razor.scss */
.my-text
}/* components/child.razor.scss */
h1 對應的razor元件如下：
/* pages/index.razor */
@page 「/」
/* components/child.razor */
這是子元件
亞馬遜測評 www.yisuping.com
客戶端Blazor中的應用程式設定
目錄 載入客戶端應用程式設定 向客戶端公開設定 從客戶端獲取設定 我通過asp.net 寵壞了，希望應用程式設定能正常工作，但是客戶端 blazor 還沒有乙個容易配置的應用程式設定文章。我想要的是能夠通過 azure 應用服務應用程式設定在每個環境 dev test beta prod 上設定一些...
MySQL事務 隔離性中的隔離級別
建表 create table student id int primary key,name varchar 100 engine innodb charset utf8 測試資料 insert into student values 1 張三 如果乙個事務讀到了另乙個未提交事務修改過的資料，那麼...
事務的隔離級別舉例 MySQL中的事務隔離級別
mysql中的事務隔離級別 事務就是對一系列的資料庫操作進行統一的提交或者回滾操作，如果插入成功，那麼一起成功，如果中間一條出現異常，就回滾之前的所有操作。這一點和redis中的事務不同的是，redis中的任意命令執行失敗，其餘命令依然會被執行。事務的特性 1.原子性 atomicity 乙個事務中...