CSS基础选择器:
//元素选择器
div{
}
//类选择器
.my-class{
}
// id选择器
#test{
}
// * 通配符选择器
*{}
// 并集选择器
div,.my-class,#test{
}
//组合选择器
div.my-class{
} // div元素,并且class类要为my-class
div .my-class{
} // div 元素的子孙元素类为 my-class
注:
并集选择器:不同选择器具有相同的样式,可以将他们写在一起,节省代码,必选代码冗余。如果一个元素受多个选择器影响,则会一并起到作用,并且后面的选择器样式会覆盖掉前面选择器的样式。
交集选择器:两个选择器共同来影响一个元素的样式。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*一个并集选择器*/
h1,h2,h3,p{
font-size:12px;
color:green;
}
/*并集选择器内依次有交集选择器(h2.special)、类选择器(special)、ID选择器(#one)*/
h2.special,.special,#one{
text-decoration: underline;
color: red;
}
/*交集选择器*/
h2.special{
color:blue;
font-size: 30px
}
</style>
</head>
<body>
<h2>示例文字000</h2>
<h2 class="special">示例文字001</h2>
<p class="special">示例文字002</p>
<h4 id="one">示例文字003</h4>
<h4>示例文字004</h4>
</body>
</html>
CSS层次选择器:
<style>
/* 层次选择器 */
/* 1、子集选择器 */
/* div 下面所有的子元素p(不包含孙子元素) */
div>p{
color: red;
}
/* 兄弟选择器 */
/* .main-span 元素的第一个紧挨着的兄弟元素 */
.main-span1 + p{
color:blue;
}
/* 后代选择器 */
/* div 中所有的p元素 */
div p{
color:brown;
}
/* 通用选择器 */
/* 所有的后面同级元素 */
.main-span2 ~ p{
color:cyan;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 层次选择器 */
/* 1、子集选择器 */
/* div 下面所有的子元素p(不包含孙子元素) */
div>p{
color: red;
}
/* 兄弟选择器 */
/* .main-span 元素的第一个紧挨着的兄弟元素 */
.main-span1 + p{
color:blue;
}
/* 后代选择器 */
/* div 中所有的p元素 */
div p{
color:brown;
}
/* 通用选择器 */
/* 所有的后面同级元素 */
.main-span2 ~ p{
color:cyan;
}
</style>
</head>
<body>
<div>
<p>Hello</p>
<p>World</p>
<span>
<p>haha</p>
</span>
</div>
---------------------------------------
<p>Top</p>
<div class="main-span1">
Main
</div>
<p>Bottom</p>
<p>Last</p>
--------------------------------------
<p>Top</p>
<div class="main-span2">
Main
</div>
<p>Bottom</p>
<p>Last</p>
</body>
</html>
动态伪类选择器:
伪类可以作用于任何元素,如div,button。
<style>
/* div鼠标悬停 */
div:hover{
color: red;
}
/* 链接 */
a:link{
color:olive;
}
/* 悬停 */
a:hover{
color:blue;
}
/* 按住未松开的样式 */
a:active{
color:green;
}
/* 访问后 */
a:visited{
color:red;
}
/* 链接或输入框 */
a:focus{
color:orange;
}
</style>
结构伪类选择器:
定义和用法**
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。例如:div: first-child,意思是指第一个div。
:last-child
:nth-child(odd) 奇数
:nth-child(even) 偶数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* */
div:first-child{
color:black;
}
/* */
div:nth-child(3n+3){
color: red;
border: 2px solid red;
margin-bottom: 2px;
}
/* div:nth-child(even){
color: green;
border: 2px solid green;
margin-bottom: 2px;
} */
</style>
</head>
<body>
<div>
1
</div>
<div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
</div>
<div>
6
</div>
<div>
7
</div>
</body>
</html>
示例2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.table{
width: 40%;
}
.table thead tr:first-child{
color: #fff;
background-color: #2d61af;
}
.table tbody tr:nth-child(3n+1){
background-color: #abcdef;
}
</style>
</head>
<body>
<table class="table" border="1" cellspacing="0">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>28</td>
<td>Boy</td>
</tr>
<tr>
<td>Kate</td>
<td>29</td>
<td>Girl</td>
</tr>
<tr>
<td>Kate</td>
<td>29</td>
<td>Girl</td>
</tr>
<tr>
<td>Kate</td>
<td>29</td>
<td>Girl</td>
</tr>
<tr>
<td>Kate</td>
<td>29</td>
<td>Girl</td>
</tr>
<tr>
<td>Kate</td>
<td>29</td>
<td>Girl</td>
</tr>
<tr>
<td>Kate</td>
<td>29</td>
<td>Girl</td>
</tr>
<tr>
<td>Kate</td>
<td>29</td>
<td>Girl</td>
</tr>
</tbody>
</table>
</body>
</html>
querySelector:
querySelectorAll: 会返回一个node list,查找不到会返回一个空数组。
解决浏览器同源策略方案:
Mac:
chrome49以前版本
open -a “Google Chrome” —args —disable-web-security
chrome49以后版本
open -a /Applications/Google\ Chrome.app —args —disable-web-security —user-data-dir
Safari
open -a ‘/Applications/Safari.app’ —args —disable-web-security
Window:
chrome.exe —disable-web-security
chrome文件路径:
C:\Program Files (x86)\Google\Chrome\Application
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="http://www.163.com">网易</a>
<button onclick="back()">Back</button>
<button onclick="forward()">forward</button>
<button onclick="push()">Push State</button>
<script>
function back(){
window.history.back();
}
function forward(){
window.history.forward();
}
function push(){
var stateObj = { foo: 'bar'};
window.history.pushState(stateObj, 'hello', 'bar.html');
}
window.onpopstate = function(event){
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
}
</script>
</body>
</html>