css選擇class中的第一個怎么選？使用first-of-type？

tanglijun 發布于2019-08-30 15:55 / 1997人閱讀

摘要：找到結構里面的所有的標簽記作如果最后一個元素的為，把字體顏色改為

Dom結構


    我是span
    我是h1
    我是h1
    我是h1
    我是h1
    我是h1

1.指定標簽

h1:first-of-type {
    color: red;
    // #test底下所有的h1找出來，其中第一個h1的字體顏色改為red；
}

2.指定class

.hha:first-of-type {
    color: blue;
    // 1.找到所有class為hha的標簽，上面的Dom結構里有、;
    // 2.找到Dom結構所有h1、span（為了方便理解記作list1，list2）；
    // 3.如果list1、list2中第一個標簽的class是hha，第一個class為hha的字體改為blue;
}

舉一反三，下面的代碼會把字體顏色改為orange？

.hha:last-of-type {
  color: orange;
}

以h1標簽為例，所以第一步省略。
2.找到Dom結構里面的所有的h1標簽（記作list3）

3.如果list3最后一個元素的class為hha，把字體顏色改為orange

云服務器 GPU云服務器怎么使用css css怎么使用選擇包含class es6中的class

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117180.html

CSS 選擇器

摘要：加號相連的兩個選擇器實現同級緊鄰的元素選擇的功能。我最好的朋友是米老鼠。樣式緊挨的第一個同級元素是我最好的朋友是米老鼠。注意區分新增的屬性選擇器。是中新增的選擇器，用于標示當前處于活動的錨標記。選擇器的取反，這個很好理解。概覽在 CSS 中，選擇器用于選擇需要添加樣式的元素。 CSS 選擇器非常豐富，現將 CSS 1 - 3 目前所有的選擇器列舉如下。選擇器例子例子描述 ...

cnio 2019-08-28 18:18 評論0 收藏0
CSS 1-選擇器

摘要：當兩個規則的權值相同時，誰更具體用誰，也就是權值高的選擇器作用的越具體優先級越高。 CSS選擇器 1.id選擇器 #id{ } ,#id選中元素2.類選擇器 .class{ } ,.類名稱選中元素3.標簽選擇器 div{ } ,標簽名選中元素4.通配符選擇器 { } ,選中所有元素5.組合選擇器：分組選擇器 E,F ，逗號隔開，同時選中E,F元素后代選擇器 E F 空格隔開，選中E元素...

yhaolpz 2019-08-29 15:29 評論0 收藏0
我終于理解了偽類和偽元素

摘要：偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間的區別，以致于混淆概念。除了上面這個本質區別以外，在中，偽類用單冒號表示而偽元素用雙冒號表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間...

張遷 2019-08-30 14:05 評論0 收藏0
前端面試題-偽類和偽元素

摘要：四偽類列舉狀態偽類狀態偽類是基于元素當前狀態進行選擇的。目前，只有火狐瀏覽器支持偽類，并在火狐瀏覽器中使用時需要添加前綴試驗階段。一、偽類和偽元素的引入 1. 規范說明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...

Cristic 2019-08-30 14:09 評論0 收藏0
前端面試題-偽類和偽元素

摘要：四偽類列舉狀態偽類狀態偽類是基于元素當前狀態進行選擇的。目前，只有火狐瀏覽器支持偽類，并在火狐瀏覽器中使用時需要添加前綴試驗階段。一、偽類和偽元素的引入 1. 規范說明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...

entner 2019-08-01 18:41 評論0 收藏0