一、簡單選擇器
至于什么意思按我自己的理解（可能不準確）就是按不同選擇器HTML按css不同的樣式布局
- 通用選擇器
*{
background-color: white;
}
用*號來定義會在引用的HTML的所有標簽里都應用一遍
- 元素選擇器
body{
background-color: lightgrey;
}
用HTML里的標簽來定義同城是HTML的標簽都可以指定一類標簽來應用
- 類選擇器
.table_css{
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 2px;
}
用.xxx來定義其中xxx不能以數(shù)字開頭不能有中文
- ID選擇器
#table_css{
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 2px;
}
用#xxx來定義其中xxx不能以數(shù)字開頭不能有中文
二、css樣式的引用
既然定義了這么多選擇器怎么使用呢？
- 內(nèi)聯(lián)
<div style="background-color: white"></div>
把樣式直接寫在標簽的里面（盡量少用）
- 定義在HTML<head>中
<style>
div{
width: 200px;
height: 200px;
border: 2px solid black;
}
</style>
- 單獨定義css文件再引用到HTML中
<link rel="stylesheet" href="selectedcss.css">
三、css樣式的使用
- 內(nèi)聯(lián)的方式就不多解釋了
<div style="background-color: white"></div>
在哪個標簽里寫的哪個標簽就會應用寫的樣式
- 通用選擇器定義的當你引用css樣式時所以標簽都會應用
- 元素選擇器定義的
body{
background-color: lightgrey;
}
類似于這樣定義的只是所有body會應用
- 類選擇器
.table_css{
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 2px;
}
<table class="table_css">
定義好的類選擇器在需要應用的標簽位置用class來應用
- ID選擇器
< table id="table_css">
同類選擇器差不多也是在需要應用的標簽位置用id來應用
四、偽類選擇器
- hover 鼠標懸停
- link 未訪問過鏈接
- visited 訪問過鏈接
- active 鼠標點擊的時候
- focus 獲取焦點時候的樣式
使用方式是在對應的選擇器后加:hover
.table_css:hover{
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 2px;
}
五、選擇器權值
- 元素選擇器 1
- 類選擇器 10
- 偽類選擇器 10
- ID選擇器 100
- 內(nèi)聯(lián)選擇器 1000
