前端(选择器)

1.plate(plate元素)

2.bento(bento元素)

3. #fancy , (id为fancy的元素)

4.plate apple , (plate祖先元素下的apple后代元素)

5. #fancy pickle , (id为#fancy的祖先元素下的pickle后代元素)

6..small , (组为small的元素)

7. orange.small , (组为small的orange元素)

8.bento>orange.small , (bento父元素下的组为small的orange子元素)

9. plate,bento,div , (plate,bento兄弟元素在div元素中)

10. * , (代表所有元素)

11.plate> , (plate父元素的所有子元素)

12. plate + apple , (兄弟元素选择器,plate元素的后一个元素)

13. bento~pickle , (兄弟元素选择器,bento元素后的多个pickle元素)

14. plate>apple , (plate父元素下的apple子元素)

15.plate orange:first-child , (子元素选择器,plate元素下的第一个orange元素)

16. plate :only-child, (所有plate元素下的元素)

17. #fancy :last-child,pickle:last-child ,(id为fancy的元素的最后一个和pickle元素的最后一个)

18. div plate:nth-child(3),(div元素中的第三个plate元素)

19. div bento :nth-last-child(4) ,(div元素中倒数第四个bento元素)

20.apple:first-of-type (第一个apple元素)

21.plate:nth-of-type(even) ,(所有偶数个的plate元素)

22. plate:nth-of-type(3),plate:nth-of-type(5) ,(plate元素下的第3个和第5个元素)

23. plate apple.small:only-of-type ,(plate元素下满足apple.small元素的唯一一个元素)

24.orange.small:last-of-type,apple.small:last-of-type ,(是orange.samll和apple.small元素的最后一个元素)

25. bento:empty , (bento元素里没有包括额外元素)

26. apple:not(.small) ,(apple里没有组是.small的元素)

----------------------------------------------------------------------

选择器       语法

元素选择器:标签名 { }

类选择器:.className{ }

ID选择器:#id { }

复合选择器:选择器1选择器2{ }

并集选择器:选择器1,选择器2,选择器3 { }

通用选择器:*{ }

后代选择器�:祖先元素 后代元素 后代元素 { }

子元素选择器:父元素 > 子元素{}

----------------------------------------------------------------------

标签之间的关系

1.祖先元素

直接或间接包含后代元素的元素。

2.后代元素

直接或间接被祖先元素包含的元素。

3.父元素

直接包含子元素的元素。

4.子元素

–直接被父元素包含的元素。

5.兄弟元素

拥有相同父元素的元素。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 选择器 元素选择器 作用:通过元素选择器可以选择页面中的所有指定元素 语法:标签名{} id选择器 作用:通过元素...
    2simple阅读 3,954评论 0 0
  • 第一关 plate ,(plate元素) 第二关 bento ,(bento元素) 第三关 #...
    Khada阅读 1,580评论 0 0
  • 内部样式表 html的注释 css用不了 /**/ css 注释 所有的元素都可以加 (id) backgro...
    秋殇灬阅读 3,666评论 0 0
  • 第一关 plate ,(plate元素)第二关 bento ,(bento元素)第三关 #fancy ,(id为f...
    Khada阅读 2,981评论 0 0
  • 第一关 plate ,(plate元素) 第二关 bento ,(bento元素) 第三关 #fancy ,(id...
    唐朝集团阅读 3,987评论 0 1

友情链接更多精彩内容