版權聲明：本文為部落客原創文章，轉載請注明出處。 https://blog.csdn.net/twilight_karl/article/details/54696007
類選擇器
class 屬性規定元素的類名（classname）
類選擇器以一個點号顯示
.center {text-align: center}
class類似一個标記。
“p.類名”表示标記了該類的p标簽的樣式，這個類的樣式隻能被p使用。即
p class=”标記名”
而”.類名”表示元素也可以基于它們的類而被選擇，所有标簽都可以包含這個類
*.important {color:red;}
.important {color:red;}
以上兩者相等
一個标簽可以包含多個類，包含多個類時用空格隔開，不分先後
當兩個類有各自的樣式，可以有同時包含兩個類時才出現的樣式
.important.warning {background:silver;}
<!--執行個體-->
<html>
<head>
<title>網頁标題</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="type/html;charset=htf-8"/>
<style type="text/css">
<!--元素基于它們的類而被選擇-->
p.try1 {
color:blue;
}
<!--所有元素都可使用-->
.try2 {
text-align:center;
}
</style>
</head>
<body>
<p>這是單獨的段落</p>
<p class="try1 try2">這是在"class=try1 try2"的段落</p>
<h1 class="try2">這是标題，class=try2</h1>
</body>
</html>
<!--兩個标記同時存在時的特殊樣式-->
<html>
<head>
<title>網頁标題</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="type/html;charset=htf-8"/>
<style type="text/css">
.s1{
color:red;
}
.s2{
font-size:20px;
}
.s1.s2{
font-style:italic;
}
</style>
</head>
<body>
<p class="s1"> 段落s1</p>
<p class="s2"> 段落s2</p>
<p class="s1 s2"> 段落s1 s2 </p>
</body>
</html>
class 也可被用作派生選擇器：
<style type="text/css">
.s1 h1 {
font-size:10px;
}
.s1 h2 {
background: #666;
}
</style> ID選擇器
id 選擇器可以為标有特定 id 的 HTML 元素指定特定的樣式。
id 選擇器以 “#” 來定義。例如：
#red {color:red;}
#green {color:green;}
在現代布局中，id 選擇器常常用于建立派生選擇器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的樣式隻會應用于出現在 id 是 sidebar 的元素内的段落。
ID區分大小寫
即使被标注為特定ID的元素隻能在文檔中出現一次，這個 id 選擇器作為派生選擇器也可以被使用很多次：
例如：
<style type="text/css">
#s h2{
color:red;
}
#s h1{
color:blue;
}
</style> <html>
<head>
<title>網頁标題</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="type/html;charset=htf-8"/>
<style type="text/css">
#red {
color:red;
}
</style>
</head>
<body>
<p id="red">這是ID=red的段落</p>
<p>這是普通段落</p>
</body>
</html>
僞元素選擇器
a:link 正常樣式
a:hover 滑鼠放上的樣式
a:active 滑鼠按下時的樣式
a:visited 通路過的樣式
派生選擇器
後代選擇器
li strong {
font-style: italic;
font-weight: normal;
} 以上的代碼表示在清單（li）中的strong标記所具有的樣式。當strong單獨使用時不具有以上樣式。
類似于
<html>
<head>
<title>網頁标題</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="type/html;charset=htf-8"/>
<style type="text/css">
li strong {
font-style: italic;
font-weight: normal;
}
</style>
</head>
<body>
<strong>This is a normal Strong</strong>
<ul>
<li><strong>This is a Strong in li</strong></li>
</ul>
</body>
</html> <html>
<head>
<title>網頁标題</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="type/html;charset=htf-8"/>
<style type="text/css">
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
</style>
</head>
<body>
<strong>這是普通的strong</strong>
<h2>這是普通的h2</h2>
<h2><strong>這是h2中的strong</strong></h2>
</body>
</html> 子元素選擇器
h1 > strong {color:red;}
隻将h1下一層的strong使用該樣式。”>”兩端可以沒有空格
與後代選擇器的差別：
個人認為可以将所有标簽看成一個樹結構
後代選擇器的範圍包含孩子和孫子節點。
子元素選擇器的範圍隻包含孩子節點。
<html>
<head>
<title>網頁标題</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="type/html;charset=htf-8"/>
<style type="text/css">
h1 > strong {
color:red;
}
</style>
</head>
<body>
<h1>這是<strong>第一個</strong></h1>
<h1>這是<p><strong>第二個</strong></p>strong</h1>
</body>
</html>
相鄰兄弟選擇器
h1+p{clolr:blue;}
二者有相同父元素則稱為兄弟。
緊貼在h1後的p，并且h1和p具有相同父節點。則使用該樣式
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {color:blue;}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
HTML div标簽
可定義文檔中的分區或節（division/section）,把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)