1、 css選擇器的定義做了有什么體會,css復合選擇器有哪三種?
1、元素選擇器 標簽名{ }
2、id選擇器 #id屬性值{ }
3、類選擇器 .class屬性值{ }
4、選擇器分組(并集選擇器)
作用:通過它可以同時選中多個選擇器對應的元素(通常用于集體聲明)
語法:選擇器1,選擇器2,選擇器n{ }
5、復合選擇器(交集選擇器)
作用:選擇更準確更精細的目標元素并為其設置屬性
語法:選擇器1選擇器2選擇器n{ }
!注意選擇器之間不能有空格,要緊挨在一起
6、通配選擇器
作用:用來選中頁面中所有的元素
語法:*{ }
7、后代元素選擇器
作用:選中指定元素的指定后代元素
語法:祖先元素 后代元素{ }
8、子元素選擇器
作用:選中指定父元素的子元素
語法:父元素>子元素
9、偽類選擇器
偽類表示元素的一種特殊狀態
:hover 移入時元素的狀態
:visited 已被訪問過后的元素的狀態
:active 被點擊時元素的狀態
10、 屬性選擇器
作用:根據元素中的屬性或屬性值來選取指定元素
語法:[屬性名]選取含有指定屬性的元素
? [屬性名=“屬性值”]選取含指定屬性值的元素
? [屬性名^="屬性值"] 選取屬性值以指定內容開頭的元素
? [屬性名$="屬性值"] 選取屬性值以指定內容結尾的元素
? [屬性名*="屬性值"] 選取屬性值包含指定內容的元素
11、兄弟元素選擇器
+選擇器
作用:選中一個元素后緊挨著的指定的兄弟元素
語法:前一個+后一個(作用在后一個)
~選擇器
作用:選中后邊所有的制定兄弟元素
語法:前一個~后邊所有
2、 keyframes創建動畫的好處?
@keyframes 語法規則在動畫過程中,可以多次更改CSS樣式。指定的變化發生時使用%,或關鍵字"from"和"to",這和0%到100%相同。0%是開頭動畫,100%是當動畫完成。為了獲得最佳的瀏覽器支持,應該始終定義為0%和100%的選擇器。
@keyframes就是個動畫,可以理解成多個transform組成的一個組。語法:@keyframes 動畫名 { from{ css1} to{ css2 } }
@keyframes 動畫名{0% {css1}50% {css2}100% {css3}}注:使用animation屬性來控制動畫的外觀,還使用選擇器綁定動畫。
二、animation屬性值
當調用這個動畫時用animation ,animation由六個屬性組成:
animation-name 指定要綁定到選擇器的關鍵幀的名稱animation-duration 動畫指定需要多少秒或毫秒完成animation-timing-function 設置動畫將如何完成一個周期animation-delay 設置動畫在啟動前的延遲間隔animation-iteration-count 定義動畫的播放次數animation-direction 指定是否應該輪流反向播放動畫animation : 動畫名 時間 速度曲線 開始的時候延遲 播放次數 輪流反向播放 舉個例子看看:
讓正方形從左上角向右上角再向右下角到左下角最后回到左上角,并且顏色也會隨之變化
CSS3中使用@keyframes創建動畫,實例講解代碼塊div{animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
3、 dw2020新建css規則?
1.首先,新建一個HTML文檔,這里以Div css布局為例。
2.點擊插入菜單下的“Div(D)”,彈出對話框。
3.點擊“新建css規則”,定義一個選擇器,“確定”完成。
4.設置大小及背景顏色,“確定”完成。
4、 CSS選擇器權重如何計算?
很古老的話題了
id=100
class=10
tag(標簽)=1
按照這個規律去計算,比如
#qietu div{}
100+1 = 101
.qietu .box{}
10+10=20
可以得出第一個的權重要比第二個要高。另外關于權重的擴展知識面,我推薦了解下BEM命名規則,這個觀念很好,可以從側面杜絕權重問題的產生,還有一個就是提高權重的方法 !important;