常用css選擇器
| 選擇器 | 代碼 | 例子 | 說(shuō)明 |
|---|---|---|---|
| 通用選擇器 | * | *{} | 選擇所有字符劈猿，使用極少，存在意義不大 |
| 標(biāo)簽選擇器 | 元素名稱 | div{...} | 使用標(biāo)簽選擇元素潮孽，優(yōu)先級(jí)最低揪荣，使用最廣泛 |
| 類選擇器 | .<類名> | .class{...} | 根據(jù)class值選擇元素 |
| id選擇器 | #id{...} | #one{...} | 根據(jù)id值選擇屬性，優(yōu)先級(jí)最高 |
| 屬性選擇器 | [<條件>] | [herf]{} | 根據(jù)屬性選擇元素 |
| 并集選擇器 | <選擇器>往史，<選擇器> | em仗颈，strong{} | 同時(shí)匹配多個(gè)選擇器，取他們的并集 |
| 后代選擇器 | <選擇器><選擇器> | #wrap p{...id為wrap下的所有p標(biāo)簽....} | 先應(yīng)用第二個(gè)的元素椎例，且在第一個(gè)元素中 |
| 子代選擇器 | <選擇器>><選擇器> | ul>li | 匹配第二個(gè)選擇器挨决，屬于第一個(gè)選擇器的子代 |
| 兄弟選擇器 | <選擇器>+<選擇器> | p+a{} | 匹配緊跟第一個(gè)選擇器的選擇器，并應(yīng)用元素 |
| 偽選擇器 | ::<偽元素>或:<偽類> | p::first-line订歪、a:hover{} | w偽選擇器不是直接對(duì)應(yīng)HTML定義的元素,而是像選擇器增加特殊效果 |
基本選擇器
? ? ?最基本選擇器為標(biāo)簽選擇器脖祈，類選擇器，id選擇器陌粹，優(yōu)先級(jí)從低到高為：標(biāo)簽撒犀，類， id選擇器
實(shí)例代碼:
<style type="text/css">
/標(biāo)簽選擇器
p{
font-size: 50px;
color: blue;
}
/類選擇器
.first{
font-size: 50px;
color: green;
}
/ID選擇器
#one{
font-size: 50px;
color: pink;
}
</style>
屬性選擇器
? ?? 重點(diǎn)介紹:
| E[attribute $= value] | 選擇屬性 attribute 的值以 value 結(jié)尾的E元素 |
| E[attribute ^= value] | 選擇屬性 attribute 的值以 value 開(kāi)頭的E元素 |
| E[attribute *= value] | 選擇屬性 attribute 的值包含 value 子字符串的E元素 |
E代表元素掏秩，attribute表示屬性或舞，value表示確切的值?E可以省略
E[attribute $= value] 選擇器
? ??選擇指定屬性其值已"value"結(jié)尾，例如:
<style>
a[href $= "doc"],
a[href $= "docx"] {
background: url('img.png) no-repeat left center;
}
</style>
.......
<a href = "a.doc">DOC文件</a>
E[attribute ^= value] 選擇器
? ?? 選擇指定屬性其值的前綴為“value”蒙幻；
a[href ^= "http://"] {
padding-right: 20px;
background: url(img/external.gif) no-repeat right top;
}
E[attribute *= value]
? ?? 選擇指定屬性其值至少包括一次“value”作為子串映凳。
[class*="warning"] {
color: #fff;
background: red;
}
并集選擇器
<style type="text/css">
.one,#id,p,h1{
font-size: 50px;
color: yellow;
}
</style>
<body>
<div class="one">鋤禾日當(dāng)午</div>
<p >汗滴禾下土</p>
<span id="id">誰(shuí)知盤中餐</span>
<h1>粒粒皆辛苦</h1>
</body>
后代選擇器
<style type="text/css">
div p b{
font-size: 30px;
}
</style>
.......
<div>
<p><b>憫農(nóng)</b></p>
</div>
子代選擇器
<style type="text/css">
ul > li{
font-size: 50px;
color: red;
}
</style>
......
<ul><li>傷仲永</li></ul>
? ??子代和后代的區(qū)別是子代只包含元素的直接后代，不包含元素后代的后代邮破，而后代則包含元素的子代極其元素后代的后代
兄弟選擇器
<style type="text/css">
h1+p{
font-style: italic;
font-size:52px;
}
</style>
...
<body>
<h1>兄弟選擇器</h1>
<p>兄弟選擇器的效果</p>
<p>原格式</p>
</body>
偽類選擇器诈豌，偽對(duì)象選擇器
? ??CSS提供了五種基本偽類選擇器仆救，分別對(duì)應(yīng)HTML標(biāo)記的五種狀態(tài)。
| 偽類 | 作用 | 應(yīng)用對(duì)象 |
|---|---|---|
| :hover | 定義標(biāo)記在鼠標(biāo)懸停(劃過(guò))時(shí)的樣式 | 所有顯示標(biāo)記 |
| :focus | 定義標(biāo)記在獲取焦點(diǎn)時(shí)的樣式 | a標(biāo)簽 |
| :visited | 定義標(biāo)記被訪問(wèn)過(guò)后的樣式 | a標(biāo)簽 |
| :active | 定義標(biāo)記在選定時(shí)刻下的樣式 | a標(biāo)簽 |
? ??偽對(duì)象選擇器根據(jù)對(duì)象內(nèi)部的局部元素定義其樣式矫渔。
| 偽對(duì)象選擇器 | 作用 |
|---|---|
| :first-letter | 定義文本的第一個(gè)字符樣式 |
| :first-line | 定義文本的首行樣式 |
| :before | 定義對(duì)象之前內(nèi)容的樣式 |
| :after | 定義對(duì)象之后內(nèi)容的樣式 |
用css做一個(gè)課程表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>課程表</title>
<style type="text/css">
/*為主體設(shè)置格式*/
body{
margin:0% auto;padding: 0;text-align: center;
}
/*課程表大小格式*/
.whole{
width: 900px;
height: 1024px;
background-image: url("背景.jpeg");
margin: 0 auto;
}
/*課程表頂部*/
.TOP{
width: 900px;
height: 5px;
background-color: #1abbff;
margin-top: 30px;
}
/*設(shè)置body的子代div屬性*/
body>div{
margin-left: auto; margin-right: auto;text-align: center;
}
/*設(shè)置星期顯示的格式*/
.WEEK{
width: 900px;
height: 60px;
background-color: #dae3ff;
filter: alpha(opacity=60);/*設(shè)置為半透明*/
opacity: 0.6;
}
/*設(shè)置WEEK的后代css樣式*/
.WEEK ul{
padding-left: 60px;
}
.WEEK ul li{
font-family: 黑體;
font-size: 40px;
color: #34f0ff;
text-align: center;
width: 120px;
}
div,ul,li,p,dd,dt,dl,ol,from,img{margin: 0px;padding: 0;border:0px}
ul,li,ol{list-style:none}
.float{float:left}/*浮動(dòng)*/
/*設(shè)置課程格式*/
.courses{
width: 900px;
height: 860px;
margin-top: 0px;
}
.Num{
width: 60px;
height: 860px;
margin-top: 1px;
background-color: aqua;
filter: alpha(opacity=60);
opacity: 0.6;/*不透明度*/
}
.Num ul li{
font-family:"Adobe 黑體 Std R";
font-size: 25px;
color: blue;
width: 60px;
height: 70px;
line-height: 70px;
text-align: center;
}
.one ul li{width: 80px;height: 150px;}
.one,.two,.three,.four,.five,.six,.seven ul{margin-top: 1px;}
.dingding li{
width: 90px;
height: 130px;
border-radius: 10px;/*加圓框*/
border: antiquewhite solid ;
margin-left: 3px;
margin-bottom: 3px;
box-shadow: coral inset 0 10px 8px;/*添加陰影效果彤蔽，內(nèi)投影*/
}
.dingding li p {
font-size: 15px;
color: beige;
width: 90px;
height: 150px;
display: -webkit-box;/*設(shè)置橫列展示效果*/
-webkit-box-align: center;
-webkit-box-pack:center;
}
.dianlu{
background-color: black;
}
.daolun{
background-color: cyan;
}
.sx{
background-color:red;
}
.ps{
background-color: #ff3139;
}
.ty{
background-color: darkolivegreen;
}
.web{
background-color: blanchedalmond;
}
.cao{
background-color: indigo;
}
</style>
</head>
/*主體部分*/
<body>
<div class="whole">
<div class="TOP"></div>
<div class="WEEK">
<ul>
<li class="float">周一</li>
<li class="float">周二</li>
<li class="float">周三</li>
<li class="float">周四</li>
<li class="float">周五</li>
<li class="float">周六</li>
<li class="float">周日</li>
</ul>
</div>
<div class="courses">
<div class="Num float">
<ul>
<li >1</li>
<li >2</li>
<li >3</li>
<li >4</li>
<li >5</li>
<li>6</li>
<li >7</li>
<li >8</li>
<li >9</li>
<li>10</li>
</ul>
</div>
<!--Monday-->
<<div class="one float" >
<ul class="dingding">
<li style="border: none;box-shadow: none;width: 150px"></li>
</ul>
</div>
<!--Tuesday-->
<div class="two float">
<ul class="dingding">
<li ><p>UI圖形設(shè)計(jì)</p></li>
<li class="ps"><p>photoshop</p></li>
<li style="border: none;box-shadow: none;width: 130px"></li>
<li class="cao"><p>操作系統(tǒng)</p></li>
</ul>
</div>
<!--Wednesday-->
<div class="three float">
<ul class="dingding">
<li class="cao"><p>操作系統(tǒng)</p></li>
<li style="border: none;box-shadow: none;width: 130px"></li>
<li style="border: none;box-shadow: none;width: 130px"></li>
<li class="web"><p>web前端</p></li>
<li class="daolun"><p>軟件工程導(dǎo)論</p></li>
</ul>
</div>
<!--Thursday-->
<div class="two float">
<ul class="dingding">
<li class="sx" ><p >數(shù)學(xué)</p></li>
<li class="dianlu"><p>電子與電路</p></li>
<li style="border: none;box-shadow: none;width: 130px"></li>
<li class="ty"><p>大學(xué)體育</p></li>
</ul>
</div>
</div>
</div>
</body>
</html>
