為了讓我們的網頁更加漂亮，也是學習前端必須的內容所以學習css選擇器是必須的，下面廢話不多說讓我們學習起來，
目錄
什么是css?
css常見的三種寫法
常見的css屬性
css中顏色表示方法
css選擇器
什么是css選擇器？
css選擇器
基本選擇器
css優先級排序
屬性選擇器
css3新增加的選擇器(在css3中添加，小編就是簡單說幾個）
什么是css?
沉疊樣式表：HTML中誕生的技術，用來修飾HTML網頁，
css常見的三種寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>網頁</title>
<style >
div{
color: aqua;
}
</style>
<link rel="stylesheet" type="text/css" href="css/text.css"/>
</head>
<body>
<div style="color: #0000FF;">第一種寫法</div>
<div >第二種寫法</div>
<div class="color" >第三種寫法</div>
</body>
</html>
第三種方法下css部分（在開發中，這種方式是常見的方式）
.color{
color: #FF0000;
}現象：
常見的css屬性
| width | 寬 |
| height | 高 |
| font-size | 字體大小 |
| border (線的大小 線的型別 線的顏色) | 邊線 |
css中顏色表示方法
第一種
color: red;
color: 顏色單詞;第二種：
color: (#ff,#ff,#ff)
/* rgb按照三源色比例進行配置，按照16進制書寫 */第三種：
color: rgb(255,255,255)
/* rgb按照三源色比例進行 */第四種：
color: rgba(255,255,255,0.3)
/* rgb按照三源色比例進行,a表示透明度，范圍0~1 */css選擇器
什么是css選擇器？
方便開發找到和修改渲染標簽的方式
css選擇器
基本選擇器
| id選擇器（在網頁中表示唯一，不建議使用數子開頭） | #標簽名稱 |
| 類選擇器（表示就是‘.’，clsss選擇器) | .標簽名稱 |
| 標簽選擇器 | 標簽名稱 |
| 通配符選擇器 | *（代表通配符，代表任意） |
包含選擇器
| 子代選擇器（如：div下的p標簽） | div>p |
| 后代選擇器(如：div下所有的p標簽,以空格表示） | div p |
復合選擇器
| 用逗號隔開 | 可以多個選擇器公用一個標簽 |
| 范圍選擇器 | 對范圍選擇器進行渲染 |
寫法示例
#fixed-input{
color: red;
}
.color{
color: rgba(255,255,255,0.3)
/* rgb按照三源色比例進行,a表示透明度，范圍0~1 */
}
div{
width: auto;
}
*{
margin: 0px;
/* 外邊距 設定為0，清除外邊距 行內標簽默認都有 */
padding: 0px;
/* 內邊距 */
border: 1px solid red;
}
/* 子代選擇器 */
header>.top {
height: 37px;
width: 100%;
background-color: #1D011B;
}
/* 后代選擇器 */
header top{
height: 37px;
width: 100%;
background-color: #1D011B;
}
/* 復合選擇器 */
header .top{
height: 37px;
width: 100%;
background-color: #1D011B;
}css優先級排序
!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性
屬性選擇器
| div[text] | div中的text標簽 |
| input[type$='i'] | 以i結尾 |
| input[type^='i'] | 以i開頭 |
| input[type*='e'] | 通配有e |
示例
/* input標簽中text=haha值的標簽 */
input[text='haha']{
color: #0000FF;
}
/* input標簽中有e字母的標簽 */
input[type*='e']{
color: #000000;
}
/* input標簽中有e字母開頭的標簽 */
input[type^='i']{
color: #0000FF;
}
/* input標簽中有e字母結尾的標簽 */
input[type$='i']{
color: #721170;
}css3新增加的選擇器(在css3中添加，小編就是簡單說幾個）
（學習地址：CSS 參考手冊 (w3school.com.cn)）
| :root | 選擇檔案的根元素， |
| element+element | 標簽1同一個級別下的下一個標簽2 |
| :first-child | 選擇屬于父元素的第一個子元素的每個 <p> 元素， |
/* 沒有點擊的效果 */
a:link{
color: #000000;
/* 設定沒有下劃線 */
text-decoration: none;
}
/* 被點擊后效果 */
a:visited{
color: #721170;
}
/* 滑鼠放上去的效果 */
a:hover{
color: #721170;
}
/* 被點擊效果 */
a:active{
color: #0000FF;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/287582.html
標籤：其他