css：樣式 選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- <style type="text/css"></style> 當前頁面都可以用 -->
<style type="text/css">
h1{
}
</style>
<!-- 外部樣式 跨檔案頁面樣式 -->
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
<!--
選擇器
1.基本選擇器 tag #id .class
2.層次選擇器
空格 所有子代 12345....
> 第1代 1
+ 第一個兄弟節點
~ 後面所有兄弟節點
3.表單選擇器
:type屬性 jquery
4.屬性過濾器
[attr] 包含這個屬性
[attr=val] 屬性值=val
[attr!=val] 屬性值!=val 不能使用
[attr^=val] 屬性值以val開始
[attr$=val] 屬性值以val結束
優先順序 正常情況下 選擇範圍越大 優先順序越低 !important
-->
<style type="text/css">
a[href] {
color: red;
}
/*color: red !important;*/
/*li{
color: red;
}
.li1,.li3{
color: aqua;
}
#list{
color: pink;
}
.li4 span{
background-color: #FFC0CB;
}
#list ~ li{
}
input[type=text]{
color: aqua;
}*/
/* :text 不使用這種寫法 */
</style>
</head>
<body>
<a>a</a>
<a href="">a</a>
<a href="#">a</a>
<a href="javascript:void(0)">a</a>
<!-- style="" 行內樣式 只用於行內 -->
<h1 style=""></h1>
<!-- ul>li.li${列表$}*5 -->
<ul>
<li class="li1">列表1</li>
<li class="li2" id="list">列表2</li>
<li class="li3">
<span>
列表3
</span>
</li>
<li class="li4">
<span>
列表4
<div>
<span></span>
</div>
</span>
</li>
<li class="li5">列表5</li>
</ul>
<!-- 表單選擇器 -->
<form action="" method="post">
<input type="text" name="" id="" value="" />
<input type="submit" value=""/>
</form>
<!-- emment 快捷鍵的語法 -->
</body>
</html>