html5的高级选择器,web@css高级选择器(after，befor用法),基本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()選擇器等同于元素
:not()選擇器稱為否定選擇器
:empty()選擇器表示的就是空。是一點內容都沒有，哪怕是一個空格
:target()選擇器 點擊a標簽#111目標id為111的標簽
sadadas
123
:lang()項目需要做國際化，并且中英文環境下，樣式會有不同。
a:lang(en){color:'red'}選中3個以en開頭的
phpstudy
HTML
511遇見
常用偽元素: ::first-letter,::first-line,::before,::after
用途1
.app:before{
content: '';
border: 1px #df147f solid;
width: 50px;
position: absolute;
left: 25px;
top:-5px;
}
.app:after{
content: '';
border: 1px #ff102c solid;
width: 50px;
position: absolute;
left: 25px;
bottom:-5px;
}
用途2 清浮動
css3中新加了個 ::selection
css3中新寫法::
2.基本樣式:長度顏色,字體樣式,文本樣式,背景樣式
長度顏色
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
}
字體樣式
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", "微軟雅黑";
}
文本樣式
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;
}
abcdefabcdefabcdefabcdeabcdefabcdef背景樣式
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;
}
總結
以上是生活随笔為你收集整理的html5的高级选择器,web@css高级选择器(after，befor用法),基本css样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python能做数据库开发吗_5分钟快速
- 下一篇： 继续教育计算机组成原理a试卷,计算机组成