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样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。