美文网首页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

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


    相关文章

      网友评论

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

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