高級選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*基本選擇器*/
/*通配符選擇器 標籤選擇器 類名選擇器 ID選擇器*/
/*高級選擇器*/
/*並集選擇器 通過逗號連接，可以寫兩個選擇器用一套樣式*/
.list-1,p{
color: red;
}
/*後代選擇器 中間用空格引用，選擇某個標籤的後代*/
.box div{
font-size: 32px;
}
/*直接後代選擇器 中間用大於號連接。一層一層找下去，直到找到目標元素*/
.box>div>ul>li{
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="list-1">hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
<div>
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
</div>
</div>
<p>你好</p>
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
</body>
</html>
標籤的顯示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*
塊元素：獨佔一行，可以設置寬高
行內元素:不獨佔一行，不可以設置寬高
行內塊元素：不獨佔一行。可以設置寬高
缺點：元素裏面的內容行數不齊時，容易塌陷
*/
div{
width: 200px;
height: 200px;
background-color: red;
/*display: inline;*/
/*轉換成行內元素*/
display: inline-block;
/*轉換成行內塊元素*/
}
span{
width: 200px;
height: 200px;
background-color: yellow;
/*display: block;*/
/*轉換成塊元素*/
display: inline-block;
/*轉換成行內塊元素*/
}
</style>
</head>
<body>
<div>塊元素</div>
<span>行內元素</span>
</body>
</html>
僞類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*僞類選擇器 加在 選擇器和大括號中間*/
.box{
width: 200px;
height: 200px;
background-color: red;
}
.box:hover{
/*鼠標移入生效,鼠標離開消失*/
font-size: 50px;
width: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
hello
</div>
</body>
</html>
文本修飾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
text-decoration: none;
/*刪除下劃線*/
}
a:hover{
text-decoration: underline;
/*鼠標移入添加下劃線*/
}
p{
/*underline : 下劃線
line-through : 刪除線
overline : 上劃線*/
text-decoration: overline;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
<p>今天天氣不錯</p>
</body>
</html>
css的優先級
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*id選擇器大於類名選擇器大於標籤選擇器大於通配符選擇器*/
/*僞類選擇器優先級爲1*/
/*通配符選擇器 優先級0*/
*{
color: red;
}
/*標籤選擇器 優先級1*/
div{
color: green;
}
/*類名選擇器 優先級10*/
.box{
color: blue;
}
/*id選擇器 優先級100*/
#pox{
color: pink;
}
</style>
</head>
<body>
<div class="box" id="pox">hello word</div>
<div>hello word</div>
<p>hello word</p>
<span>hello word</span>
</body>
</html>
