屬性選擇器
例1：
<style>
button[disabled]{
cursor:default;
}
/*讓存在disabled屬性的button不顯示小手*/
</style>
例2：
<style>
input[type="search"]{
background:none;
outline:none;
border:1px solid #ccc;
}
/*讓type值為search的input的無背景色、去掉選中時的藍色邊框、添加灰色邊框*/
</style>
例3：
<style>
div[class^="icon"]{
color:pink;
}
/*給icon開頭的類名的div的文字設定為pink*/
/*
補充：class$="**", 以**結尾的類名
class*="**", 類名内部包含**
*/
</style>
選擇器的權值：
!important >内聯樣式（1000）>id選擇器（100）>類選擇器/僞類選擇器/屬性選擇器（10）>元素/标簽選擇器（1）
結構僞類選擇器
:first-child 第一個子元素
<style>
ul li:first-child{
color:pink;
}
/*ul下的第一個li元素内容顔色為pink*/
/*【前提ul下第一個元素要是li标簽】*/
</style>
:last-child 最後一個元素
<style>
ul li:last-child{
color:green;
}
/*ul下的最後一個li元素内容顔色為green*/
/*【前提ul下最後一個元素要是li标簽】*/
</style>
:nth-child() 括号内可以是：具體第幾個、偶數、奇數、數學公式
【參數和标簽是并且的關系，第n個并且第n個是目标标簽才有效】
<style>
ul li:nth-child(7){
/* ul下第7個并且為li标簽的元素 */
}
ul li:nth-child(even){
/* ul下排号為偶數的li标簽的元素 */
}
ul li:nth-child(odd){
/* ul下排号為奇數的li标簽的元素 */
}
/* 可以使用偶數奇數來做隔行變色 */
ul li:nth-child(2n+1){
/* n從0開始，得到的也就是奇數，同odd */
}
ul li:nth-child(5n){
/* 選擇的是所有排号是5的倍數的 */
}
ul li:nth-child(n+5){
/* 選擇的是從第5個開始往後的 */
}
ul li:nth-child(-n+5){
/* 選擇的是從第5個開始往前的 */
}
</style>
:first-of-type
<style>
div span:first-of-type{
/* 選取div下的第一個span标簽，哪怕div下第一個是p也無所謂 */
}
</style>
:last-of-type
<style>
div span:last-of-type{
/* 選取div下的最後一個span标簽 */
}
</style>
:nth-of-type() 注意和 nth-child()的不同之處
【n和元素标簽不是并且的關系，先選出了所有的目标标簽，再做鎖定】
<style>
div span:nth-of-type(7){
/* 選取div下的第7個span标簽 */
}
</style>
僞元素選擇器
::before
<style>
div::before{
content="我是耿-";
display=inline-block;
height:100px;
background-color:pink;
}
/* 在div裡内容之前插入content中的内容，*/
/* 預設行内元素，和文字内容同行顯示用inline-block，不要用block */
</style>
<body>
<div>昔冰呀，哈哈哈</div>
</body>
::after
<style>
div::after{
content="所學一點知識，少敲一點代碼";
background-color:pink;
}
/* 在div裡内容之後插入content中的内容，
預設行内元素
*/
</style>
<body>
<div>昔冰呀，哈哈哈</div>
</body>
