CSS筆記--選擇器
阿新 • • 發佈：2018-12-12
CSS筆記--選擇器
mate的使用
<meta charset="UTF-8">
<title>Document</title>
<meta name="keywords" content="java培訓,大前端培訓">
<meta name="description" content="據說中國口碑最好的IT培訓機構！">
<meta http-equiv="refresh" content="5; http://www.itcast.cn" keywords：為了可以方便速索
description：是網站的描述資訊
refresh：頁面重新整理，內容是數字；地址，多久之後跳轉到這個地址。
css的外部引入
<link rel="stylesheet" href="1.css">
<link rel="icon" href 表格
<table width="400" height="400" border="1" cellspacing="0" align="center" bgcolor="pink">
<tr>
<th colspan="2">京東會員</th>
<!-- <td></td> -->
</tr>
<tr 介紹：
- table：設定長和高
- 背景色（bgcolor）
- colspan:合併列
選擇器
- 標籤選擇器
- 類選擇器
- id選擇器
案例
<style type="text/css">
類選擇器
.G{
font-size: 200px;//字型大小和顏色
color: #000099;
}
.o1{
font-size: 200px;
color: #990000;
}
.o2{
font-size: 200px;
color: orange;
}
.g1{
font-size: 200px;
color: #000099;
}
.l{
font-size: 200px;
color: #009900;
}
.e{
font-size: 200px;
color: #990000;
}
</style>
</head>
<body>
<span class="G">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g1">g</span>
<span class="l">l</span>
<span class="e">e</span>
</body>
萬用字元選擇器
*{
font-size: 100px;
color: red;
}
交集選擇器
div.test[標籤+類選擇器]
div#test[標籤+id選擇器]
後代選擇器
類選擇器
/*.box{
font-size:40px;
color:red;
}
後代選擇器[標籤+標籤]
div span{
font-size: 50px;
}*/
類+標籤
/*.box span{
background-color: blue;
}*/
/* .box .miss{
color:red;
}*/
.box span{
color:red;
}
子代選擇器
div>span{
color:red;
font-size:40px;
}
p>span{
color:green;
font-size:60px;
}
子代和後帶的區別就是，後代不論隔了多少代，子代僅僅是一代。
並集選擇器
.box,#miss,span,h1{
font-size:100px;
color: #fff;
background-color: green;
}