整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
對帶有指定屬性的 HTML 元素設置樣式。
ps：這個屬性你可以自定義，隨便啦，想寫什么寫什么。
eg:
vue中的scoped作用域屬性就是用它來實現的。
在template模板中給style標簽加上scoped屬性就可以實現不同template頁面其樣式互不干擾
當然，屬性選擇器遠遠不止這些：
我們可以給相同的屬性不同的值定義不同的樣式
還可以向正則表達式那樣，給屬性值開頭不同，結尾不同，中間含義不同分別設置不同的樣式！
input[attr^=a] ------ 屬性值【開頭】為【“a”】的元素
input[attr$=a] ------ 屬性值【結尾】為【“a”】的元素
input[attr*=a] ------ 屬性值中含有【“a”】的元素
ps: 我屬性前面的input是標簽選擇器的意思，你也可以用類名，id, 標簽什么的都可以!
就像這樣：
還有就是我上面css中寫屬性選擇器中，我把屬性的中用引號包裹了，事實上，你帶不帶引號都對！看個人習慣!
選擇第一個子元素：
父元素>子元素:first-child{}
ps：如果有很多父元素，要選擇指定的用選擇器就行 指定父元素>一堆子元素：first-child
選擇最后一個子元素：
父元素>子元素:last-child{}
用法相同。
匹配屬于父元素中唯一子元素的元素。
要匹配的子元素:only-child {}
當你使用這個選擇器的時候，它會找一個自己是不是獨生子女（父元素沒有出了自已以外的其它子元素了），如果是獨生子女，那就匹配成功，不是，不好意思，匹配失敗！
匹配屬于其父元素的特定類型的唯一子元素的每個元素。
要指定的子元素類型類型:only-of-type{}
這個真的不是很好理解，和only-child不同（only-child選擇器選擇的是父元素中只有一個子元素，而且只有唯一的一個子元素。也就是說，匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素。），在偽類選擇器前面是要指定的子元素類型, 然后當它匹配時候，會找自己在父元素里面是不是獨一份（假設我們把標簽比作男女的話，它的父親有很多個孩子，但是其它的都是男孩，只有它是女孩），如果是，匹配成功，否則匹配失敗
eg:
ps：大家看了這個選擇器，現在可以把它忘掉了，因為講道理來說，既然它是父元素里的唯一此標簽子元素，我們完全可以通過: 父元素>此子元素標簽 直接就把它定位了！完全不需要這么麻煩！
子元素列表 :nth-child(要選擇的第幾個)
需要注意一點就是，他不是從0開始選擇，比如你要選擇第一個子元素，那么
子元素列表 :nth-child(1)即可
子元素列表:nth-last-child((要選擇的倒數第幾個)
同 :nth-child類似，它也是從1開始的，nth-last-child(1)代表倒數第一個，也就是最后一個！
eg:
子元素列表：nth-child(odd) 匹配下標是奇數的子元素 子元素列表：nth-child(even) 匹配下標是偶數的子元素
嗯，可以用它來實現經典的隔行變色是在恰當不過的了！
除此之外，:nth-child里面還可以寫一些計算。
:nth-child(數字n) 表示匹配該數字的倍數的意思，比如nth-child(3n)就表示匹配該元素下的所有3的倍數：
eg:
:nth-child(數字n) ,這個數字還可以進行簡單的計算，比如，如果我寫 :nth-child(3n-1)，則會匹配到下標分別為 2,5,8的子元素，因為3的一倍為3,3減1得到下標2的子元素, 3的2倍為6, 6減1得到下標5的子元素。
子元素集合:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素.
好吧，官方描述可能坑，我們用例子來理解：
不同于 :nth-child(n) (選取父元素的第 N 個子元素，不論元素的類型。n 可以是數字（從 1 開始），關鍵詞（even/odd）,或者公式（3n + 1, 2n + 1...）)
:nth-of-type(n)與 :nth-child(n) 的區別就在于 :nth-child(n) 不論元素的類型，而nth-of-type(2)選取父元素的第 N 個類型為 你所知道 的子元素。
上圖中，父元素有2個span標簽，第一個span標簽在父元素的子元素集合中下標為2的位置，第二個span在父元素的子元素集合中下標為3的位置
我們使用 span:nth-child(2) 會選中第一個sapn標簽，因為下標為1的子元素是p標簽，
但是使用 span:nth-of-type(2) 則會選中第二個span標簽，因為在該父元素的子元素集合中，第二個span標簽是依據該父元素的子元素集合中的span標簽集合中的第二個！！！！！！！
子元素集合:nth-last-of-type(n) n 可以是數字、關鍵詞或公式。
這個用法同 :nth-of-type(n) 保持一致，只不過它是從倒數開始。
比如 span:nth-last-of-type(2)意思就是說選擇父元素的倒數第二個span標簽。
eg:
:focus {}
表示該表單光標獲得焦點時觸發。
:
:enabled{} 選擇啟用狀態的元素
凡是沒有設置屬性為disabled的表單都會匹配到，disabled為禁用該表單的意思
與:enabled{} 相對的，:disabled{}為選擇 選擇禁用狀態的元素 例如：<input type="text" disabled />
:valid {} 驗證輸入合法時觸發
與:valid {} 相對于，:invalid{}選擇器在匹配不合法時觸發,這里就不寫例子了
:before
在【當前元素】之前插入【額外內容】 ，需要配合【content】一起
使用。【content】的值就是插入的內容，這個和:after是很常用的，因為可以把一個標簽當三個標簽來用，大網站經常用它來提示性能。
同:before{}對應，:after{}會在元素之后插入內容，同樣，也需要配合content來使用
::selection 指鼠標選中“網頁文本”狀態的設定。
默認，我們的瀏覽器選中網頁文本效果都是藍色背景，白色文字：
我們可以通過::selection來更改默認樣式:
ps: 記著是兩個冒號！！！！！ ::selection
好了，差不多就是這些，要是后面還有比較重要的我在補充！
文通過js代碼實現了按住鍵盤的SHIFT鍵，通過鼠標點擊網頁復現框實現區間選中的功能，還是比較實用的。 完整的代碼實現例子如下：
<!DOCTYPE html>
<html>
<head>
<title>測試頁面</title>
<meta name="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
//選擇全部
function checkAllItem(obj){
var box = document.getElementsByName("box");
for(var index=0;index<box.length;index++){
if(obj.checked){
box[index].checked = true;
}else{
box[index].checked = false;
}
}
}
//全局變量
var shiftKeyDown = false;
function keyDownHandler(event){
shiftKeyDown = true;
}
function keyUpHandler(event){
shiftKeyDown = false;
}
function selectRow(obj){
if(shiftKeyDown){
var checks = $(":checkbox[name='box']");
var currentIndex = checks.index($(obj)[0]);
var lastIndex = -1;
var box = document.getElementsByName("box");
for(var index=0;index<box.length;index++){
if(box[index].checked){
if(index!=currentIndex){
lastIndex = index;
if(index < currentIndex)
break;
}
}
}
if(lastIndex ==-1){
return ;
}
if(lastIndex < currentIndex){
for(var i=lastIndex;i<=currentIndex;i++){
if(obj.checked){
box[i].checked = true;
}else{
box[i].checked = false;
}
}
}else{
for(var i=currentIndex;i<=lastIndex;i++){
if(obj.checked){
box[i].checked = true;
}else{
box[i].checked = false;
}
}
}
}
}
</script>
</head>
<body onkeydown="keyDownHandler(event)" onkeyup="keyUpHandler(event);">
<h3>javascript代碼實現按住shift鍵完成復選框的區間選中</h3>
<table style="width: 60%;" border="1">
<tr>
<td style="width: 10%" ><input type="checkbox" name="allBox" onclick="checkAllItem(this);"/>全選 </td>
<td>列1</td><td>列2</td></tr><tr>
<td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr><tr>
<td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
</table>
</body>
</html>
果我們想在 HTML 元素中設置 CSS 樣式，則需要通過 CSS 選擇器進行控制。換句話說，CSS 選擇器就是用于指向需要添加 CSS 樣式的標簽，讓 CSS 樣式知道自己需要作用到那個標簽上去。
CSS 的繼承性是指被包在內部的標簽將擁有外部標簽的樣式性，即子元素可以繼承父元素的屬性。
以下分別介紹了幾種常用的選擇器與其可繼承的屬性。
我們通過設置標簽的 id 屬性來設置id選擇器。CSS 中 id 選擇器以 # 來定義。如以下則是設置 id 為“box”的 CSS 樣式。為 div 添加一個高度為 100px，寬度為 100px，背景顏色為紅色的樣式。
常用的選擇器還有類選擇器。類選擇器通過設置標簽的 class 屬性去設置樣式。CSS 中 class 選擇器以 . 來定義。如以下則是設置class 為“box”的 CSS 樣式。為div添加一個高度為 100px，寬度為 100px，背景顏色為藍色的樣式。
標簽選擇器是為某一類標簽設置 CSS 樣式。在 CSS 中直接以標簽名設置樣式。如以下是設置 div 的 CSS 樣式。給 div 加上一個高度為 100px,寬度為 100px,背景顏色為粉色的樣式。
我們也可以直接在標簽內寫 CSS 代碼。通過加上 style 屬性，就可以在 style 內添加 CSS 樣式了。
CSS 中可繼承的屬性有以下幾種。
font | 組合字體 |
font-family | 規定元素的字體系列 |
font-weight | 設置字體的粗細 |
font-size | 設置字體的尺寸 |
font-style | 定義字體的風格 |
font-variant | 設置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。 |
font-stretch | 允許你使文字變寬或變窄。所有主流瀏覽器都不支持。 |
font-size-adjust | 為某個元素規定一個 aspect 值，字體的小寫字母 "x" 的高度與 "font-size" 高度之間的比率被稱為一個字體的 aspect 值。這樣就可以保持首選字體的 x-height。 |
text-indent | 文本縮進 |
text-align | 文本水平對齊 |
line-height | 行高 |
word-spacing | 增加或減少單詞間的空白（即字間隔） |
letter-spacing | 增加或減少字符間的空白（字符間距） |
text-transform | 控制文本大小寫 |
direction | 規定文本的書寫方向 |
color | 文本顏色 |
visibility | 規定元素是否可見 |
caption-side | 規定表格標題的放置方式 |
border-collapse | 為表格設置合并邊框模型 |
border-spacing | 設置相鄰單元格的邊框間的距離（僅用于“邊框分離”模式） |
empty-cells | 設置是否顯示表格中的空單元格（僅用于“分離邊框”模式） |
table-layout | 顯示表格單元格、行、列的算法規則 |
list-style-type | 設置列表項標記的類型 |
list-style-image | 使用圖像來替換列表項的標記 |
list-style-position | 設置在何處放置列表項標記 |
list-style | 在一個聲明中設置所有的列表屬性 |
quotes | 設置嵌套引用（embedded quotation）的引號類型 |
cursor | 規定要顯示的光標的類型（形狀） |
page | 檢索或指定顯示對象容器時使用的頁面類型 |
page-break-inside | 設置元素內部的 page-breaking 行為 |
orphans | 設置或返回一個元素必須在頁面底部的可見行的最小數量（用于打印或打印預覽） |
speak | 規定內容是否將以聲音形式呈現 |
speak-punctuation | 規定如何念出標點符號 |
speak-numeral | 規定如何念出數字 |
speak-header | 指定如何處理表格標題。應該在每個單元格之前朗讀標題，還是僅在標題與前一個單元格不同的單元格之前念出標題。 |
speech-rate | 規定說話的速度 |
volume | 規定說話的音量 |
voice-family | 規定語音的語音家族 |
pitch | 規定說話的聲音 |
pitch-range | 規定語音的變化（單調還是動聽的聲音？） |
stress | 規定語音中的“壓力” |
richness | 指定語音的豐富程度。（聲音豐富還是稀薄？） |
azimuth | 設置聲音的來源 |
elevation | 設置聲音的來源 |
以上就是編程獅(w3cschool.cn)小編為你整理的 CSS 選擇器及其繼承屬性的總結。希望可以幫到你~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
