css基礎知識+css選擇符（元素選擇符、關係選擇符）
阿新 • • 發佈：2018-12-26
首先介紹在HTML檔案中匯入CSS檔案的幾種方式：
1、行內樣式：<p style="color:red">行內樣式使用css</p>
2、頁內樣式：在head標籤裡設定
<span style="font-size:18px;"><head>
<style>
p{
color:red
}
</style>
</head>
<body>
<p>頁內使用css樣式</p>
</body></span>3、外部連結方式：首先你要先在外部準備好做好的css樣式表
<span style="font-size:18px;"><head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<p>外部連結css樣式表設定樣式，要注意heaf="這裡就是要匯入css樣式表的地址"</p>
</body></span>接下來我就像大家介紹css層疊樣式
元素選擇符：類選擇符、id選擇符、類選擇符、通配選擇符
型別選擇符：以元素的類標籤進行選擇
<span 
id選擇符：
<span style="font-size:18px;"><head>
<style>
#s{
color:hsl(0,0,50);
}
</style>
</head>
</span>
類選擇符：
<span style="font-size:18px;"> 
通配選擇符：
<span style="font-size:18px;"><head>
<style>
*{
color:red;
}
</style>
</head></span>
通配選擇符選擇的型別較為抽象，慎用！
接下來為大家哦介紹關係選擇符：包含選擇符、子選擇符、相鄰選擇符、兄弟選擇符
包含選擇符：
<span style="font-size:18px;">ul li{
color:red;
}</span>ul標籤以下的所有li標籤都被設定了樣式
子選擇符：
<span style="font-size:18px;"><head>
<style>
ol>li{
color:red;
}
</style>
</head></span>ol下面的子一級元素被選中
相鄰選擇符：
<span style="font-size:18px;"><head>
<style>
li+li{
text-indent:2em;
color:red;
}
</style>
</head></span>選中li標籤後面緊挨著的兄弟級別li元素
兄弟選擇符
<span style="font-size:18px;"><head>
<style>
li~li{
color:red;
text-indent:2em;
}
</style>
</head></span>選擇li標籤後面所有的兄弟級別元素
以上就是我要介紹的。
另外再補充幾點：
首行縮排：text-indent：4em；
居中顯示：teext-align：center；
關於優先順序：
行內css>頁內css>外部css
id>.class
後面設定的樣式若是重複了前面的，則前面設定的樣式
具體的要覆蓋抽象的
比如當用同時設定通配選擇符合元素選擇符，使用元素選擇符的那部分將不被通配選擇符那一部分覆蓋。