web@css高級選擇器,基本css樣式
1.高階選擇器:子代後代，相鄰通用兄弟，交集並集，屬性，偽類，偽元素
子代後代選擇器
div>p{} div p{}
相鄰通用兄弟
div+p{} div~p{}理解：div同學的同桌p div同學的【同學（有p的）】
交集並集選擇器
div,p div.div註意:類選擇寫後面
屬性選擇器
[id] [class=‘div‘] [class^*$=‘d‘]
偽類選擇器,偽元素選擇器（重點講解）
定義:偽類用於向某些選擇器添加特殊的效果
偽元素用於向某些選擇器設置特殊效果。
總結區別:
偽類本質上是為了彌補常規CSS選擇器的不足；
偽元素本質上是創建了一個 有內容的 虛擬容器；
css3中:偽類和::偽元素;
可以同時使用多個偽類，而只能同時使用一個偽元素；
常用偽類: :not() :focus :link :visited :hover :active :first-child :nth-child():nth-last-child():nth-of-type(n):only-child :only-of-type
結構性偽類選擇器
:root()選擇器等同於<html>元素
:not()選擇器稱為否定選擇器
:empty()選擇器表示的就是空。是一點內容都沒有，哪怕是一個空格
:target()選擇器 點擊a標簽#111目標id為111的標簽
<p id="111">sadadas</p>
<a href="#111">123</a>
:lang()項目需要做國際化，並且中英文環境下，樣式會有不同。
a:lang(en){color:‘red‘}選中3個以en開頭的
<a lang="en-us" href="http://www.phpstudy.net"> phpstudy </a>
<a lang="en-uk">HTML</a>
<a lang="en" href="http://www.511yj.com"> 511遇見</a>
常用偽元素: ::first-letter,::first-line,::before,::after
css3中新加了個 ::selection
css3中新寫法::
2.基本樣式:長度顏色,字體樣式,文本樣式,背景樣式
長度顏色
<style type="text/css">
body {
background-color: yellowgreen;
}
div {
/*長度單位*/
/*px in pt mm cm em rem vw vh*/
width: 100px;
/*width: 720pt; 10in*/
/*width: 10em; 通常160px 10rem*/
/*width: 50vw; 50% view width*/
height: 100px;
/*顏色單位*/
/*單詞 rgb() rgba() #六個十六進制位*/
色光三原色：紅、綠、藍。
/*background-color: cyan;*/
/*background-color: rgb(255, 0, 0);*/
/*background-color: rgba(255, 0, 0, 0);*/
/*滿足AABBCC形式可以簡寫為abc*/
background-color: #a0c
}
字體樣式
<style type="text/css">
span {
/*大小*/
font-size: 30mm;
/*字重: bold粗 (normal標準 lighter較淡的) 100~900*/
font-weight: 900;
/*行高: 行高設置大於等於字體大小,字體在行高中垂直居中顯示*/
line-height: 50mm;
/*樣式: 一般不關心*/
font-style: normal;
/*字族:可以自定義字族當Segoe UI Emoji不存在,或不起作用,再選取 微軟雅黑 */
font-family: "Segoe UI Emoji", "微軟雅黑";
/*css語法: 空格隔開為多個值賦值(加粗,style，size/hight，famil), ,隔開為一個值多值賦值*/
font: lighter 50mm/80mm "Segoe UI Emoji", "微軟雅黑";
}
</style>
文本樣式
<style type="text/css">
span {
color: red;
/*水平居中方式:left center right*/
text-align: center;
/*字劃線: underline line-through overline none*/
text-decoration: overline;
/*字間距*/
letter-spacing: 3px;
/*詞間距*/
word-spacing: 10px;
}
div {
width: 300px;
/*顯示方式*/
display: inline-block;
}
div {
font-size: 12px;
/*垂直排列方式: top baseline bottom*/
vertical-align: baseline;
/*縮進*/
text-indent: 2em;
}
/*遇到連體的英文,html將其解析為一個單詞(作為一個整體)*/
.div {
/*按標簽的設定寬度強行換行,可以在單詞(整體)內部換行*/
word-wrap: break-all;
}
</style>
<div class="div">abcdefabcdefabcdefabcdeabcdefabcdef</div>
背景樣式
<style type="text/css">
div {
width: 300px;
height: 300px;
background-color: red;
}
div {
/*背景圖片*/
background-image: url("data/bg_repeat.gif");
/*平鋪: no-repeat repeat-x repeat*/
background-repeat: no-repeat;
/*定位*/
/*10px == 10px center 設置一個值,第二個值默認為center*/
/*10px 10px 第一個值控制水平位置,第二個值控制垂直位置*/
/*background-position: right center;*/
/*定位相關的涉及到滾動時的效果: scroll fixed*/
background-attachment: fixed;
}
div {
/*整體設置*/
background: url("data/bg_repeat.gif") 10px 10px no-repeat red;
}
</style>
web@css高級選擇器,基本css樣式