1、 是否有類前綴的css選擇器,css元素的排列規則主要分為?
1、代表內聯樣式,如: style=””,權值為1000。
2、代表ID選擇器,如:#content,權值為100。
3、代表類,偽類和屬性選擇器,如.content,權值為10。
4、代表類型(元素)選擇器和偽元素選擇器,如div p,權值為1。 按照CSS代碼的執行先后順序。如果有重復的規則,按照后執行的定義。最終規則是多個定義規則的綜合。重點:高級規則定義對于不同表格的文字樣式定義。(不同表格使用不同ID、使用類樣式定義)一頁中的多種超級鏈接樣式定義。多個相同規則不同對象的CSS共同定義。對于同一對象定義的多種CSS方式考慮哪種更科學。
2、 css的命名規則?
一、網頁制作中規范使用DIV+CSS命名規則,可以改善優化功效特別是團隊合作時候可以提供合作制作效率。
所有的命名最好都小寫
屬性的值一定要用雙引號("")括起來,且一定要有值如class="DIVcss",id="divcss"
每個標簽都要有開始和結束,且要有正確的層次,排版有規律工整
空元素要有結束的tag或于開始的tag后加上"/"
表現與結構完全分離,代碼中不涉及任何的表現元素,如style、font、bgColor、border等
<h1>到<h5>的定義,應遵循從大到小的原則,體現文檔的結構,并有利于搜索引擎的查詢。
給每一個表格和表單加上一個唯一的、結構標記id
給圖片加上alt標簽
盡量使用英文命名原則
盡量不縮寫,除非一看就明白的單詞
二、相對網頁外層重要部分CSS樣式命名:
外套 wrap ----------------用于最外層
頭部 header --------------用于頭部
主要內容 main ------------用于主體內容(中部)
左側 main-left ------------左側布局
右側 main-right -----------右側布局
導航條 nav -----------------網頁菜單導航條
內容 content ---------------用于網頁中部主體
底部 footer -----------------用于底部
DIV+CSS命名小結:
無論是使用“.”(小寫句號)選擇符號開頭命名,還是使用“#”(井號)選擇符號開頭命名都無所謂,但我們最好遵循。
主要的、重要的、特殊的、最外層的盒子用“#”(井號)選擇符號開頭命名,其它都用“.”(小寫句號)選擇符號開頭命名,同時考慮命名的CSS選擇器在HTML中重復使用調用。
通常我們最常用主要命名有:
wrap(外套、最外層)、header(頁眉、頭部)、nav(導航條)、menu(菜單)、title(欄目標題、一般配合h1\h2\h3\h4標簽使用)
、content (內容區)、footer(頁腳、底部)、logo(標志、可以配合h1標簽使用)、banner(廣告條,一般在頂部)、copyRight(版權)。
3、 css復合選擇器有哪三種?
1、元素選擇器 標簽名{ }
2、id選擇器 #id屬性值{ }
3、類選擇器 .class屬性值{ }
4、選擇器分組(并集選擇器)
作用:通過它可以同時選中多個選擇器對應的元素(通常用于集體聲明)
語法:選擇器1,選擇器2,選擇器n{ }
5、復合選擇器(交集選擇器)
作用:選擇更準確更精細的目標元素并為其設置屬性
語法:選擇器1選擇器2選擇器n{ }
!注意選擇器之間不能有空格,要緊挨在一起
6、通配選擇器
作用:用來選中頁面中所有的元素
語法:*{ }
7、后代元素選擇器
作用:選中指定元素的指定后代元素
語法:祖先元素 后代元素{ }
8、子元素選擇器
作用:選中指定父元素的子元素
語法:父元素>子元素
9、偽類選擇器
偽類表示元素的一種特殊狀態
:hover 移入時元素的狀態
:visited 已被訪問過后的元素的狀態
:active 被點擊時元素的狀態
10、 屬性選擇器
作用:根據元素中的屬性或屬性值來選取指定元素
語法:[屬性名]選取含有指定屬性的元素
? [屬性名=“屬性值”]選取含指定屬性值的元素
? [屬性名^="屬性值"] 選取屬性值以指定內容開頭的元素
? [屬性名$="屬性值"] 選取屬性值以指定內容結尾的元素
? [屬性名*="屬性值"] 選取屬性值包含指定內容的元素
11、兄弟元素選擇器
+選擇器
作用:選中一個元素后緊挨著的指定的兄弟元素
語法:前一個+后一個(作用在后一個)
~選擇器
作用:選中后邊所有的制定兄弟元素
語法:前一個~后邊所有
4、 postcss和cssmodule是什么?
postcss是什么?
根據官網的解釋,它是一種javascript編寫的工具,用來轉化css的??梢哉J為它是處理css的插件集合,需要配合諸如webpack、gulp等編譯工具才能展現它強大的能力。
目前社區提供了非常多的插件,比較有名的如下:
autoprefixer 可以為css的屬性配置兼容性的前綴,不需要手動添加postcss-preset-env 允許你使用更加現代的css特性stylelint 檢查css語法錯誤cssnano css的壓縮器等等postcss的原理如果大家了解babel的原理,那就應該聽說過AST即抽象語法樹。編譯器將字符串進行詞法分析、語法分析,再做轉換,最終達到預期的結果。postcss也是同樣的原理,這個包已經為使用者提供了解析的方法parse,并且也提供了很多轉化的API,利用這些就可以自己開發一款postcss插件了。
css Module是什么?先前呢,我們使用css選擇器,它是對整個頁面是有效的,也就是全局的,當你每次迭代需求的時候,需要考慮每次添加新的css是否會影響到其他地方,所以我們有時選擇為樣式表添加命名空間。css Module為我們提供了另外一種開發方式,它可以使css具有局部作用域。
用法如下:
用法是如此的簡單,基本一看就會,css-loader為我們提供了css Module的開關,只要為css-loader添加參數選項modules就可以開啟。注意:它必須放在less或者sass的loader之前。
那它如何做到局部作用域的呢?
打開element面板可以發現,它把class變成了md5戳,對應每個組件,保持唯一。
vue的scoped由此我們聯想到vue的scoped,它也解決了css局部作用域的問題!
它在dom上生成了一個data屬性,并且給class選擇器添加了屬性選擇器,類似于之前的md5戳。不過由于添加了屬性選擇器,使得選擇器的優先級變高了,想在組件外面覆蓋css屬性就變得不那么容易了!
喜歡我的回答就關注我吧,有問題可以發表評論,我們一起學習,共同成長!