CSS樣式選擇器
阿新 • • 發佈：2018-12-01
樣式的分類
1.行內樣式：直接在標籤裡新增樣式
例：建立一個div，直接在標籤裡寫它的樣式
<div style="width: 200px;height: 200px;background-color: red"></div>
結果如下
2.內部樣式：在head標籤裡建立style標籤，在其裡面寫樣式
如果要寫內部樣式或外部樣式，就需要用到樣式選擇器
樣式選擇器分類
1.標籤選擇器：直接在style標籤中寫其標籤名 語法 {}
例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; background-color: green; } </style> </head> <body> <div></div> </body> </html>
結果如下
2.類選擇器 class 語法 .{}
給標籤一個class,再在style中寫樣式
例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .div1{ width: 200px; height: 200px; background-color: orange; } </style> </head> <body> <div class="div1"></div> </body> </html>
結果如下
3.id選擇器：給標籤一個id 語法： #{} id的名字不能重複
例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div id="div1"></div> </body> </html>
結果如下
4.後代選擇器 語法：通過一個空格實現
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 200px;
border: 1px solid red;
}
#div1 p{
color: green;
}
</style>
</head>
<body>
<div id="div1">
<div> <p>hello world</p></div>
<p>今天是2018年12月第一天</p>
</div>
</body>
</html>
結果如下
5.子代選擇器 通過 >s實現（直系）
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 200px;
border: 1px solid red;
}
#div1>p{
color: green;
}
</style>
</head>
<body>
<div id="div1">
<div> <p>hello world</p></div>
<p>今天是2018年12月第一天</p>
</div>
</body>
</html>
結果如下
6.交集選擇器 中間什麼也不加
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p.p{
color: red;
}
</style>
</head>
<body>
<p class="p">hello world</p>
<p>今天星期六了</p>
<p class="p">今天是12月份第一天</p>
</body>
</html>
結果如下
