css3学习day01-结构选择器

  E:�nth-child(n) :表示 E 父元素中的第n 个子节点。

. p:nth-child(odd){background:red}   /* 匹配奇数行   */

. p:nth-child(even){background:red}   /* 匹配偶数行   */

. p:nth-child(2n){background:red}  


E:nth-last-child(n):父元素中的第n个字节点,从后向前计算。

E:nth-of-type(n):表示父元素中的第n 个字节点,且类型为 E。

找到什么类型的标签

E:nth-last-of-type(n):表示父元素中的第n 个字节点,且类型为 E,从后向前计算。

E:empty 表示E 元素中没有字节点。(字节点包含文本节点)

注意这个空标签这个



p:empty{ background-color:#F00}

展示的样式为:



但是有的时候我们并不关心这个子元素是什么类型,所以又有另外的写法:


展示的信息:


E:first-child ==:nth-child(1)   表示E 元素中的第一个子节点

last-child ==:nth-last-child(1)表示E 元素中的最后一个子节点

E:first-of-type = nth-of-type(1)表示E 元素中的第一个子节点,且类型为 E.

E:last-of-type = nth-last-of-type(1)表示E 元素中的最后一个子节点,且类型为E.

E:only-child 表示 E 元素只有一个子节点,注意字子节点不包含文本节点。

E:only-of-type  表示 父级下,e元素中只有一个字节点,且这个字节点的类型必须为 E ,注意字子节点不包含文本节点.

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

相关阅读更多精彩内容

  • 1.class 和 id 的使用场景? 两者都能选取DOM节点并给DOM节点添加样式,但是W3C标准里规定页面中只...
    饥人谷_米弥轮阅读 3,325评论 0 1
  • (1). 阴影模糊半径与阴影扩展半径的区别:阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不...
    Leisure_blogs阅读 5,443评论 0 6
  • 一、属性选择器 Element[attr]只使用属性名,但没有确定任何属性值p[cxy]{background: ...
    EndEvent阅读 3,150评论 0 0
  • 1.class 和 id 的使用场景? 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也...
    草鞋弟阅读 7,202评论 0 1
  • id与class的使用场景 id选择器,匹配特定id的元素类选择器,匹配class包含(不是等于)特定类的元素id...
    姚小帅阅读 2,870评论 0 0

友情链接更多精彩内容