css：
Cascading Style Sheet 層疊樣式表——修飾、美化網頁，化妝師
CSS優先級，即是指CSS樣式在瀏覽器中被解析的先后順序。
行間樣式 > 內嵌css樣式 > 外鏈css樣式（在style之前引入）
如果外鏈css樣式在style之后引入，則外鏈css樣式覆蓋內嵌css樣式，誰在后面以誰為準。
行間樣式直接寫在標簽里：

<div style="width: 100px;height: 100px;background: bisque"></div>

內嵌css樣式寫在head的style里：

<style> div{width: 100px;height: 100px;background: red; } </style>

外鏈css樣式：

通過link標簽，引用一個外部的css文件

<link rel="stylesheet" href="index.css">

基本選擇器：

<style> /* *通配符選擇器 匹配任何元素 */ *{margin: 0;padding: 0; } /*元素選擇器 選擇相同的元素對相同的元素設置一種css樣式選中頁面中所有的此元素*/ div{width: 100px;height: 100px;background: red; } /* id選擇器 給標簽設置一個id屬性，在寫樣式時，在id名字前面加個 # */ #box{width: 150px;height: 150px;background: bisque; } /* class選擇器 給標簽設置一個class屬性，在寫樣式時，在class名字前面加個.一般給具有相同屬性的元素設置同一個class */ .box{width: 120px;height: 120px;background: blueviolet; } </style>

復雜選擇器：

<style> /* 群組選擇器 對幾個有相同屬性的選擇器進行樣式設置 兩個選擇器之間必須用逗號隔開*/ div,p{width: 120px;height: 120px;background: bisque; } /* ~ 兄弟選擇器 操作的對象是該元素下的所有兄弟元素*/ div ~ p{width: 100px;height: 100px;background: blueviolet; }/* > 子代選擇器 選擇某個元素下面的子元素*/ div > div{width: 50px;height: 50px;background: blue; }/* + 相鄰選擇器操作的對象是該元素的同級元素選擇div相鄰的下一個兄弟元素選擇到緊隨目標元素后的第一個元素*/ div + p{width: 100px;background: blueviolet;height: 100px; } </style>

后代選擇器：

<style> li{ /*去掉li標簽前面的東西*/ /*list-style: none;*/width: 50px;height: 50px;background: bisque; } div ol li{list-style: none; } </style>

偽類選擇器：

<style> /*LoVe HAte*/ a:link{/*link 未被點擊的鏈接*/color: red; } a:visited{/*已被點擊的鏈接*/color: blueviolet; } a:hover{/*鼠標懸停其上的元素 這個一定要掌握*/color: yellowgreen; } a:active{/*鼠標已經再其上按下但是還沒有釋放的元素*/color: aqua; } div{width: 100px;height: 100px;background: bisque; } div:hover{ /*改變的是div本身*/background: blueviolet;cursor: pointer;/*手指*/cursor: help;/*幫助*/cursor: wait;/*等待*/cursor: default;/*默認*/ } div:hover p{ !*改變的是p*!width: 50px;height: 50px;background: blue; } a:link,a:visited,a:hover,a:active{color: blue;cursor: pointer;/*去掉下劃線*/text-decoration: none; } </style>

選擇器優先級：

1.先比id(最高位) ? class（中間位） tagName（個數位）
　　　　1　　　　 2 　　　　　　 3
2.id選擇器個數不相等，id越多，優先級越高
3.id選擇器個數相同,則看class,class多的優先級高
4.class個數相等，就看tagName個數

轉載于:https://www.cnblogs.com/ikamu/p/8447657.html

總結

以上是生活随笔為你收集整理的前端（2）CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。