整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
果在項目里面使用了通用的reset.css樣式，但是在具體的頁面里面要對同一個樣式進行覆蓋式修改，不借助與scoped的和inner style，你會怎么做？會不會像我一樣在剛接觸的時候給要覆蓋的樣式后面加上!important屬性
本文將告訴大家關于CSS選擇器和優(yōu)先級總結，同時告誡大家不能任性使用!important
舉個詳細點例子，下面這段代碼輸出的樣式是什么樣的？以及為什么是你說說的答案？
CSS三大特性—— 繼承、 優(yōu)先級和層疊。
繼承：即子類元素繼承父類的樣式;
優(yōu)先級：是指不同類別樣式的權重比較;
層疊：是說當數量相同時，通過層疊(后者覆蓋前者)的樣式。
首先來看一下css選擇符(css選擇器)有哪些?
1.標簽選擇器(如：body,div,p,ul,li)
2.類選擇器(如：class="head",class="head_logo")
3.ID選擇器(如：id="name",id="name_txt")
4.全局選擇器(如：*號)
5.組合選擇器(如：.head .head_logo,注意兩選擇器用空格鍵分開)
6.后代選擇器 (如：#head .nav ul li 從父集到子孫集的選擇器)
7.群組選擇器 div,span,img {color:Red} 即具有相同樣式的標簽分組顯示
8.繼承選擇器(如：div p,注意兩選擇器用空格鍵分開)
9.偽類選擇器(如：就是鏈接樣式,a元素的偽類，4種不同的狀態(tài)：link、visited、active、hover。)
10.字符串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)
11.子選擇器 (如：div>p ,帶大于號>)
12.CSS 相鄰兄弟選擇器器 (如：h1+p,帶加號+)
當兩個規(guī)則都作用到了同一個html元素上時，如果定義的屬性有沖突，那么應該用誰的值的，CSS有一套優(yōu)先級的定義。
不同級別
總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性
同一級別
同一級別中后寫的會覆蓋先寫的樣式
上面的級別還是很容易看懂的，但是有時候有些規(guī)則是多個級別的組合，像這樣
CSS優(yōu)先級：是由四個級別和各級別的出現(xiàn)次數決定的。
四個級別分別為：
優(yōu)先級的算法：
算法：將每條規(guī)則中，選擇符對應的數相加后得到的”四位數“，從左到右進行比較，大的優(yōu)先級越高。
為了更好的理解這些計算規(guī)則，舉些例子如下：
選擇器的解析原則
以前一直認為選擇器的定位DOM元素是從左向右的方向，查看了網上的相關資料之后才發(fā)現(xiàn)原來自己一直都是錯的。鄭重的聲明選擇器定位DOM元素是從右往左的方向，這樣的好處是盡早的過濾掉一些無關的樣式規(guī)則和元素 。具體分析，請看這里
什么？CSS選擇器是從右往左解析
簡潔、高效的css
所謂高效就是讓瀏覽器查找更少的元素標簽來確定匹配的style元素。
1.不要再ID選擇器前使用標簽名
解釋：ID選擇是唯一的，加上標簽名相當于畫蛇添足了，沒必要。
2.不要在類選擇器前使用標簽名
解釋：如果沒有相同的名字出現(xiàn)就是沒必要，但是如果存在多個相同名字的類選擇器則有必要添加標簽名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}
3.盡量少使用層級關系；
#divclass p.colclass{color:red;}改為 .colclass{color:red;}
4.使用類選擇器代替層級關系
5. 保持CSS的可讀性
SS 的偽類選擇器和偽元素選擇器，讓 CSS 有了更為強大的功能。
偽類大家聽的多了，偽元素可能聽到的不是那么頻繁，其實 CSS 對這兩個是有區(qū)分的。
有個錯誤有必要每次講到偽類都提一下，有時你會發(fā)現(xiàn)偽類元素使用了兩個冒號 (::) 而不是一個冒號 (:)，這是 CSS3 規(guī)范中的一部分要求，目的是為了區(qū)分偽類和偽元素，大多數瀏覽器都支持下面這兩種表示方式。
通常而言，
符合標準而言，單冒號(:)用于 CSS3 偽類，雙冒號(::)用于 CSS3 偽元素。
當然，也有例外，對于 CSS2 中已經有的偽元素，例如 :before，單冒號和雙冒號的寫法 ::before 作用是一樣的。
所以，如果你的網站只需要兼容 webkit、firefox、opera 等瀏覽器或者是移動端頁面，建議對于偽元素采用雙冒號的寫法，如果不得不兼容低版本 IE 瀏覽器，還是用 CSS2 的單冒號寫法比較安全。
言歸正傳，今天要說的就是:focus-within 偽類選擇器。
它表示一個元素獲得焦點，或，該元素的后代元素獲得焦點。劃重點，它或它的后代獲得焦點。
這也就意味著，它或它的后代獲得焦點，都可以觸發(fā) :focus-within。
:focus-within 的冒泡性
這個屬性有點類似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素 html，都可以接收觸發(fā) :focus-within 事件，類似下面這個簡單的例子這樣：
就是這樣：
這個選擇器的存在，讓 CSS 有了進一步的讓元素持久停留在一種新狀態(tài)的的能力。
下面幾個例子，看看 :focus-within 可以提供什么能力，做些什么事情。
它或它的后代獲得焦點，這一點使得讓感知獲焦區(qū)域變得更大，所以，最常規(guī)的用法就是使用 :focus-within 感應用戶操作聚焦區(qū)域，高亮提醒。
下面的效果沒有任何 JS 代碼：
這里是什么意思呢？:focus-within 做了什么呢？
核心思想用 CSS 代碼表達出來大概是這樣：
運用上面思想，我們可以把效果做的更炫一點點，在某些場景制作一些增強用戶體驗的效果：
在之前的一篇文章里，介紹了兩種純 CSS 實現(xiàn)的 TAB 導航欄切換方法：
純CSS的導航欄Tab切換方案
現(xiàn)在又多了一種方式，利用了 :focus-within 可以在父節(jié)點獲取元素獲得焦點的特性，實現(xiàn)的TAB導航切換：
主要的思路就是通過獲焦態(tài)來控制其他選擇器，以及最重要的是利用了父級的 :not(:focus-within) 來設置默認樣式：
:focus-within 一個人能力有限，通常也會配合其他偽類實現(xiàn)一些不錯的效果。這里要再簡單介紹的是另外一個有意思的偽類 :placeholder-shown。
意思大概就是，當 input 類型標簽使用了 placeholder 屬性有了默認占位的文字，會觸發(fā)此偽類樣式。配合:not()偽類，可以再改變當默認文字消失后的樣式，再配合本文的主角，我們可以實現(xiàn)表單的一系列效果。
CSS 代碼大概呈現(xiàn)成這樣：
實際效果如下：
可以看到，上面的效果沒有用到任何 JS，可以實現(xiàn)：
這個是其他很多文章都有提到過的一個功能，利用 focus-within 便捷的實現(xiàn)離屏導航，可以說將這個屬性的功能發(fā)揮的淋漓盡致：
實現(xiàn)掘金登錄動效切換
juejin.im是我很喜歡的一個博客網站，它的登錄有一個小彩蛋，最上面的熊貓在你輸入帳號密碼的時候會有不同的狀態(tài)，效果如下：
利用本文所講的 focus-within ，可以不借助任何 Javascript，實現(xiàn)這個動效：
兼容性
好了，例子舉例的也差不多了，下面到了殺人誅心的兼容性時刻，按照慣例，這種屬性大概率是一片紅色，看看 CANIUSE，截圖日期（2018/08/02），其實也還不算特別慘淡。
原文出處：https://www.cnblogs.com/coco1s/p/9406413.html 作者：ChokCoco
下拉選擇框主要用于在有限的空間里設置多個選項。它既可以用作單選，也可以用作復選。代碼格式如下。
<select name="..." size="..." multiple>
<option value=".." selected>
...
</option>
...
</selected>
其中size屬性定義下拉選擇框的函數；name屬性定義下拉選擇框的名稱；multiple屬性表示可以多選，如果不設置本屬性，那么只能單選；value屬性定義選項的值；selected屬性表示默認已經選擇本選項
（1）編寫代碼如下圖所示，在<body>標簽中加入以下代碼。
（2）在瀏覽器中打開文件，預覽效果圖如下所示，即可看到下拉選擇框。其中顯示為3行選項，用戶可以按住Ctrl鍵，選擇多個選項。
普通按鈕用來控制其他定義了處理腳本的處理工作。代碼格式如下。
<input type="button" name="..." value="..." onClick="...">
其中type="button"定義按鈕，name屬性定義普通按鈕的名稱；value屬性定義普通按鈕的顯示文字；onClick屬性定義表單行為，也可以是其他事件，通過指定腳本函數來定義按鈕的行為。
（1）編寫代碼如下圖所示，在<body>標簽中加入以下代碼。
（2）在瀏覽器中打開文件，預覽效果圖如下所示，單機【拷貝】按鈕即，即可將文本框1中內容復制到文本框2中.
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
