美文网首页HTML+CSS
HTML5+CSS——08子元素伪类、兄弟元素选择器、否定伪类、

HTML5+CSS——08子元素伪类、兄弟元素选择器、否定伪类、

作者: Bellawwww | 来源:发表于2020-06-17 23:09 被阅读0次

一.子元素的伪类

1):first-child 可以选中第一个子元素

2):last-child 可以选中最后一个子元素

3):nth-child 可以选中任意一个子元素

该选择器可以指定一个参数,指定要选中第几个元素

even 表示偶数位置的子元素

odd 表示奇数位置的子元素

4)

:first-of-type

:last-of-type

:nth-of-type

和:first-child这些非常相似,只不过child,是在所有子元素中排列,而type:是在当前类型 的元素中排列。

二.兄弟元素选择器

1)后一个兄弟元素选择器

作用:可以选中一个元素后紧挨着的指定的兄弟元素

语法:前一个 + 后一个

2)选中后边的所有兄弟元素

语法:第一个 ~ 后边所有

三.否定伪类

1)否定伪类

作用:可以从已选中的元素中剔除某些元素

语法: :not(选择器)

否定伪类

四.样式的继承

像儿子可以继承父亲的遗产一样,在CSS中,祖先元素上的样式,也会被他的后代元素所继承。

利用继承,可以将一些基本的样式和设置给祖先元素,这样所有的后代元素会将自动继承这些样式。

但是,并不是所有的样式都会被子元素所继承,比如:背景相关样式都不会被继承

样式继承

五.选择器的优先级

当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定。

优先级高的优先显示

优先级规则:

内联样式,优先级1000

id选择器,优先级 100

类和伪类,优先级 10

元素选择器,优先级 1

通配*选择器,优先级0

继承的样式,没有优先级 

当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器优先级计算不会超过他的最大的数量级。

并集选择器的优先级是单独计算

div,p,#p1,.hello{ }

可以在样式的最后,添加一个 !important,则此时该样式将会获得一个最高的优先级,将会优先于所有的样式显示甚至超过内联样式,但是在开发中很少使用。

六.a的伪类顺序

:link

:visited

:hover

:active

这四个选择器的优先级是一样的


相关文章

  • CSS进阶知识点--CSS3伪类选择器和伪元素

    伪类选择器 动态伪类(锚点伪类、用户行为伪类) UI元素状态伪类 CSS3结构伪类 否定选择器 伪元素 动态伪类 ...

  • C3选择器

    属性选择器 兄弟选择器 伪类选择器 伪类target 伪元素before,after 其他伪元素

  • CSS-常用选择器

    常用选择器 子代和父代选择器 伪类选择器 伪元素 属性选择器 孩子选择器 兄弟选择器 否定伪类 优先选择器 a的伪类

  • HTML5+CSS——08子元素伪类、兄弟元素选择器、否定伪类、

    一.子元素的伪类 1):first-child 可以选中第一个子元素 2):last-child 可以选中最后一个...

  • CSS3 积累(2)之结构伪类选择器

    介绍 伪类选择器主要有动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器和伪元素等,这篇主要讲讲什么是结构伪类...

  • CSS选择器

    选择器类型 元素选择器 类选择器 ID 选择器 属性选择器 伪类 伪元素 选择器组 后代选择器 子元素选择器 相邻...

  • jQuery之选择器

    基本选择器 层级选择器 简单伪类选择器 与内容相关的伪类选择器 与元素状态相关的伪类选择器 匹配子元素的伪类选择器...

  • 伪类和伪元素

    伪类:CSS 伪类用于向某些选择器添加特殊的效果。 伪元素:CSS 伪元素用于向某些选择器设置特殊效果。 1、伪类...

  • CSS3学习

    基础选择器 伪类&伪元素 选择器 伪元素选择器 属性选择器 状态伪类选择器 结构属性选择器 文字阴影&盒子阴影 文...

  • 伪元素和伪类

    本文将介绍伪元素和伪类选择器的一些知识,以及在VUE中伪元素的动态数据更新; 伪元素和伪类: 伪元素:在内容元素的...

网友评论

    本文标题:HTML5+CSS——08子元素伪类、兄弟元素选择器、否定伪类、

    本文链接:https://www.haomeiwen.com/subject/rkzjxktx.html