一、CSS選擇器常見的有幾種?
- *選擇器
*{
margin: 0px;
padding: 0px;
}
選擇所有的元素，一般用于margin，padding設置為o。
- id選擇器
#id{
color: blue;
}
以#開頭，id名稱只能有一個不能有兩個，頁面上所有的id都不能一樣。
- 類選擇器
.class{
color: blue;
}
選擇class=""的所有元素。
- 標簽選擇器
p{
color: blue;
}
直接選擇一個html標簽
- 屬性選擇器
<style>
input[type="text"]{
outline: none;
}
</style>
</head>
<body>
<form name="myForm" action="" method="get">
<input name="usernamne" type="text" placeholder="用戶名" maxlength="10"/><br/>
<input name="password" type="password" placeholder="密碼"/>
<input type="submit" value="提交" />
</form>
</body>
屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用
- 組合選擇器
a,p{
color: blue;
}
Paste_Image.png
- 偽類選擇器
a:hover{
color: blue;
}
Paste_Image.png
二、選擇器的優(yōu)先級是怎樣的?
從高到低分別是：
- 在屬性后面使用 !important，會覆蓋頁面內任何位置定義的元素樣式
- 作為style屬性寫在元素標簽上的內聯樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
- 多個選擇器與這個元素匹配時，如果一個規(guī)則比其他規(guī)則更特定，它就會勝出。
Paste_Image.png
三、class 和 id 的使用場景?
- 把一些特定樣式放到一個class類中，需要此樣式的標簽，可以在添加此類。
- id需要具有唯一性，并且盡量在外圍使用，如網頁的大致布局。
四、使用CSS選擇器時為什么要劃定適當的命名空間？
- 簡潔明了，可讀性好
- 便于團隊開發(fā)和維護
- 免于與其他樣式發(fā)生沖突
五、以下選擇器分別是什么意思?
#header{
} /*id選擇器*/
.header{
} /*class選擇器*/
.header .logo{
} /*后代選擇器，選擇.head下面的所有.logo元素*/
.header.mobile{
} /*選擇同時具有.header.mobile的的元素*/
.header p, .header h3{
} /*選擇header下的p和h3元素。*/
#header .nav>li{
} /*選擇id為header后代中，nav下的直接子元素li。*/
#header a:hover{
} /*選擇id為header后代中a元素，設置a的鼠標懸停狀態(tài)*/
六、:first-child和:first-of-type的作用和區(qū)別
.box>hi:first-child 選擇box中所有元素的第一個h1
.box>h1:first-of-typ 選擇box中所有h1標簽中第一個h1
七、運行如下代碼，解析下輸出樣式的原因。
Paste_Image.png
八、text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
text-align: center的作用是讓文本居中，但是只能運用于塊級元素中。比如div里面的圖片、文字。
Paste_Image.png
九、如果遇到一個屬性想知道兼容性，在哪查看?
在can i use上查看
Paste_Image.png
