您現在的位置是:電腦技術吧?>? 基礎知識 ??>??css有多少選擇符,css的選擇符??>??正文詳情

css有多少選擇符,css的選擇符

昂雨華2019-11-27 10:01:55 人圍觀
簡介css三種基本選擇符原來的名字可以這么一段時間以前,我在一個網站上看到這樣的內容:這個也可以嗎?這是我的第一印象。不過,經過一番調查,我們知道這確實有效。另外,“U”的

原來命名可以這樣的  前一段時間,在某一站點看到了這樣的內容:

  這也可以?是我對此的第一印象。

不過,稍作調查知道了,這樣寫確實是有效的。

此外,這個?_?的符號表情,看起來是不是相當有存在感?再看看搭配的css屬性,display: none !important;即定義元素一定不顯示,是不是也非常符合這個表情想要表達的意思?  只要遵循css語法,就可以很好地應用這種不常見的命名。

  命名字符的規定  英文單詞的組合你一定很熟悉,例如.top_nav用來表示頂部導航,不僅用了合法的選擇符,而且也很符合語義化的要求。

  另外,你應該也知道,選擇符命名的開頭字符,不可以是數字,例如.3-column不是合法的選擇符。

使用不合法的選擇符的后果是,對應的css樣式規則會因為選擇符無法正確解析,而變為無效。

  事實上,css語法對于命名字符有更多的規定。

以下是W3C關于命名標識符的說明中的內容:  In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U 00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code.  意思是說,css中允許使用的命名字符,包括大小寫英文字母、數字、連字符-、下劃線_及其他ISO 10646字符集(等同于Unicode)中的字符。

同時,起始字符部分不能是數字,或連續2個-,或1個-后接1個數字。

此外,允許使用轉義字符和任意ISO 10646字符的數字代碼。

  經過測試,IE6對起始字符是下劃線_和單個連字符-的情況,也會認定樣式規則無效。

  字符轉義  可以看出,命名允許使用的字符其實是非常多的。

但是,有一個地方需要注意,就是特殊字符。

特殊字符是指在css語法中,被認定用來表示特定含義的字符(相當于編程語言中的關鍵字)。

例如,...這樣的class命名是不合法的,因為.是css選擇符中表示class的字符,因此不允許直接用在命名中(...這位沉默著的class名你感覺如何?)。

  css中的特殊字符包含:!, , #, $, %, , ', (, ), *, , ,, -, ., /, :, ;, , =, , ?, @, [, , ], ^,`, {, |, }, 和~。

  這個時候,想要在命名中也加入這些特殊字符,就要使用字符轉義(character escape)。

字符轉義通過反斜杠實現,在css選擇符中,你可以通過在特殊字符前加的方法,取消特殊字符的特定含義,使其可以正確地被用于命名。

例如,特殊字符#就可以用#來表示。

  反斜杠的作用還不只如此。

前面說到,任意ISO 10646字符都可以使用。

按照ISO 10646的定義,所有的字符都可以用十六進制的代碼來表示(尤其是一些不易直接輸入的字符需要這樣表示)。

css語法中,以反斜杠開頭,后接最多6位十六進制數字,即構成一個ISO 10646字符的代碼。

這和直接輸入ISO 10646字符是一樣的,但由于形式上是代碼,因此是最可靠的。

  取消特殊字符的特定含義,除了前邊的直接在前邊加的寫法外,還可以用ISO 10646代碼。

比如#也可以用23或者00023表示。

請注意,如果代碼不滿6位(前面幾位是0),一定要在末尾留一個空格,這才能組成一個正確的ISO 10646代碼(這個空格是分隔標識用,算作代碼的一部分,不會引發選擇符中的特殊含義)。

如果不想有這個空格,請使用完整的6位十六進制代碼。

  比如,下面是一個合法的命名示例。

html: XML/HTML Code復制內容到剪貼板

  1. div class=^_^/div
  css中的定義:  CSS Code復制內容到剪貼板  .5E _5E {width:50px;height:50px;background:tomato;}  這里的^屬于特殊字符,但通過代碼寫法后,就可以正確解析了。

  關于css字符轉義的更多介紹,推薦你閱讀CSS character escape sequences,這位作者還給了一個很有用的轉義工具。

  讓命名更有趣  還需要提示一下的是,ISO 10646包含的字符,有很多即使看起來很奇特,但由于不是特殊字符,是可以直接輸入的。

盡管可能因為編輯器字體原因無法顯示,但仍然有效。

比如,html:  XML/HTML Code復制內容到剪貼板  music on~  對應css:  CSS Code復制內容到剪貼板  .?{width:50px;height:50px;background:mistyrose;color:#333;}  對應的實際元素是(對的,我要證明這個寫法有效!):  music on~  如果你想表示關于音樂內容的區域,這樣字符圖形也許可以說比英文單詞更加符合語義。

而更重要的是,這種寫法更有趣!  在使用這些字符的時候,請注意,css和html的編碼都應使用utf-8。

如果html是服務器端語言(比如php)生成的,則編碼選項應設置為utf-8。

  關于如何找到各種字符,歡迎到Unicode查詢站點Unicode character table。

  看到這里,你是否已經想開始寫點不一樣的選擇符命名呢?我已經試過一些  html:  XML/HTML Code復制內容到剪貼板

  1. div class=(??*)/div div class=(??)/div
  css:  CSS Code復制內容到剪貼板  .(??){width:50px;height:50px;background:skyblue;}  .(??*){width:50px;height:50px;background:aquamarine;}  以后覺得詞不達意的時候,就用這種吧,一定可以給某個看你代碼的人一個驚喜。

  結語  實際地了解css語法對于命名標識符的規定后才知道,命名時原來還有如此多的空間可以發揮。

一起試試更多的有趣的選擇符吧!

版權聲明:本文由 昂雨華 整理編輯。

原標題:css選擇符類型,css空格符

轉載注明出處:http://www.dn9ww09s.icu/basics/14547.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • win7桌面圖標異常,win7不顯示桌面圖標

    win7桌面圖標異常,win7不顯示桌面圖標 相關圖片win7桌面圖標怎么變小超人編輯今天想談談win7的一些基礎課程。本課程介紹Windows 7桌面圖標的顯示方法。主要針對Windows7家庭普通版和高級版用戶。沒有個性化配置條目,因win7桌面不顯示...

  • 無障礙專車,滴滴無障礙專車

    無障礙專車,滴滴無障礙專車 相關圖片滴滴關愛出行無障礙車近年來,為有特殊需要的旅客提供專屬服務越來越受到重視。未來,滴滴的安卓版已經宣布,它將能夠使用無障礙汽車為特殊人群。讓我們看看滴滴無障礙車的預...

  • 百分比,百分比怎么求

    百分比,百分比怎么求 相關圖片計算百分比許多CSS屬性的值可以是百分比值。雖然從形式上講,百分比值的形式是數字后跟%值(注意數字和%值之間不能有空格),但其含義在不同的情況下會有所不同。因此,百分率可...

  • 余額寶有上限嗎,余額寶

    余額寶有上限嗎,余額寶 相關圖片余額寶即將取消余波的投資方法非常簡單,即使是新手理財也能輕松操作。但近日支付寶安卓版余額寶宣布調整個人投資上限。今天,小編為大家帶來了一款個人投資上限的支付寶余額...

  • 鼠標滾輪放大縮小功能,鼠標滾輪放大縮小

    鼠標滾輪放大縮小功能,鼠標滾輪放大縮小 相關圖片cad鼠標滾輪放大縮小設置您和我都知道,將鼠標滾輪事件添加到HTML5網頁可以更好地讓用戶與網頁交互。在HTML5中,鼠標滾輪不僅可以上下滑動網頁,其實你還可以依靠這個來完成更多的...

  • 兼職貓發一次招聘多少錢,兼職貓怎么發布手機任務

    兼職貓發一次招聘多少錢,兼職貓怎么發布手機任務 相關圖片兼職貓個人認證可以發什么如今,越來越多的大學生會利用業余時間做兼職,不僅鍛煉身體,還能掙零花錢。所以作為一個企業,你想通過它找到可靠的大學生。那么,兼職貓如何才能...

  • 怎么讓瀏覽器支持HTML5,什么瀏覽器支持HTML5

    怎么讓瀏覽器支持HTML5,什么瀏覽器支持HTML5 相關圖片手機瀏覽器支持HTML5HTML5、CSS3等相關技術,如canvas、websocket等,將web應用開發推向了一個新的高度。該技術將HTML、CSS和JavaScript結合起來UC瀏覽器支持HTML5嗎...

  • app有什么用,好用app

    app有什么用,好用app 相關圖片應用軟件魔獸軍團伴侶是一款官方的魔獸世界游戲助理軟件。那么你是如何運作魔獸軍團的?如果你對魔獸軍團感興趣看片軟件哪個最好用...

  • 's和s'的用法,最高級的用法

    's和s'的用法,最高級的用法 相關圖片比較級的用法和句型準限定選擇器您應該避免過度修改選擇器,例如,如果您可以編寫。NAV{},盡量不要寫UL。導航{}。過度修改選擇器將影響選擇器的性能、類的可重用性和私有度。這...

  • 軟件undefined是什么意,下載undefined是什么意思

    軟件undefined是什么意,下載undefined是什么意思 相關圖片undefined吧win10系統越來越穩定,許多微軟用戶正在將自己的計算機系統升級為win10系統。然而,許多用戶報告他們正在下載更新的FBL﹣expression profesundefined錯誤代碼...

熱評文章

  • 哈羅單車開鎖,哈羅單車怎么開鎖

    哈羅單車開鎖,哈羅單車怎么開鎖 相關圖片哈羅單車開鎖破解近日,不少朋友向小編反映,小明自行車的車鎖經常打不開。那么如何應對安卓版小明自行車無法解鎖的情況。今天,超人小編為大家帶來了小明自行車解鎖失敗的解...

  • 茨林面板,面板

    茨林面板,面板 相關圖片顯示面板快捷鍵可以提高我們平時的工作效率。今天,我將介紹Dreamweaver文件面板的快捷鍵。vcm面板...

  • 電腦開機要選擇系統,win7系統如何去除桌面水印

    電腦開機要選擇系統,win7系統如何去除桌面水印 相關圖片電腦開機兩個系統選擇win系統下設置了6個文件夾,包括視頻、圖片、文檔、下載、音樂和桌面。但是由于有六個文件夾,整個資源管理器頁面變得更加復雜。有沒有辦法把這臺電腦下面...

  • 表單提交,已提交表單

    表單提交,已提交表單 相關圖片html提交表單以JSON編碼格式提交表單數據是HTML5對web發展和演進的又一重大貢獻。以前,我們的HTML表單數據是通過服務器端的鍵值模式傳輸的,缺乏數據組織管理,非常原網頁表單提交...

  • 白條閃付入口沒了,白條閃付的開通條件

    白條閃付入口沒了,白條閃付的開通條件 相關圖片京東白條閃付微信支付看到身邊的小伙伴們打開京東白條,生活變得更加方便。你還想開京東白條付款嗎?如果你想打開京東白條的flash支付,但是你不知道打開的入口在哪里,你可以看...

  • 支付寶中的理財安全嗎,支付寶什么理財最安全

    支付寶中的理財安全嗎,支付寶什么理財最安全 相關圖片支付寶月度理財安全嗎樂邁寶是一款宣傳用戶可以邊消費邊賺錢的軟件。聽起來不可思議,因為這意味著我們買得越多,賺得越多。這顯然是促進消費的一種手段。所以很多人擔心它是...

  • 選擇符有哪些,選擇符

    選擇符有哪些,選擇符 相關圖片p是什么選擇符當我第一次開始編寫CSS時,我對代碼的高度自由感到困惑。也就是說,如果同一個設計是由不同的人實現的,那么最終的代碼必須是不同的。但有個問題。如果不同的人通...

  • 如何將pdf轉換為doc,如何將doc轉換成pdf

    如何將pdf轉換為doc,如何將doc轉換成pdf 相關圖片如何將pdf格式轉換成wordDoc是一種常見的word文檔格式。雖然DOC文檔比較常見,但有時為了方便閱讀DOC文檔,我們會將DOC轉換成PDF文件。所以今天的超人編輯在這里分享如何將do如何將wor...

  • 頁面頁眉與頁面頁腳只出現在,頁面頁腳設置在哪里

    頁面頁眉與頁面頁腳只出現在,頁面頁腳設置在哪里 相關圖片頁眉和頁腳頁腳的位置是頁面的頁腳,通常用于放置幫助鏈接和版權信息。頁腳應該自然位于頁面的底部,但根據一般慣例,如果頁腳之前的頁面內容相對較小,或者使用垂直分辨率較...

  • 文件轉換格式,文件是pdf格式怎么轉換

    文件轉換格式,文件是pdf格式怎么轉換 相關圖片zip格式怎么轉換pdfPdf文件在office中非常實用,但由于不易隨意編輯,很多人不習慣直接編寫Pdf文件。此時,我們可以編輯文檔,然后將其轉換為PDF格式。借助于快速的PDF轉換pdf怎么轉換...

關注微信

变脸官网查询