美文网首页
你真的了解伪类和伪元素吗?

你真的了解伪类和伪元素吗?

作者: 行不离书 | 来源:发表于2016-09-27 20:58 被阅读0次
    (理解)伪类和伪元素的区别

    学习这么长时间对于一些基本点还是不太理解,所以在这里进行了区分
    第一种理解
    伪类用于向某些选择器添加特殊的效果。
    伪元素用于将特殊的效果添加到某些选择器。

    第二种理解

    伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。

    伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lang

    伪元素有::first-line,:first-letter,:before,:after

    伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 [css3]为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

    :Pseudo-classes         //伪类
    
    ::Pseudo-elements       //伪元素
    

    但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。


    伪元素选择器

    ::first-line 匹配文本块的首行
    ::first-letter 选择文本块的首字母 :
    :before 与 ::after ——使用 contnet 属性生成额外的内容并插入在标记中:


    伪类选择器

    E F:nth-child(n):该选择器定位元素E的第n个子元素的元素F:
    div.class p:nth-child(3) {color:#f00;} //class="class"的div容器里的第3个元素p,如果第3个子元素不是p,此样式将失效

    E F:nth-last-child(n):该选择器定位元素E的倒数第n个子元素的元素F;
    E:nth-of-type(n):该选择器定位元素E的第n个指定类型子元素;
    E:nth-lash-of-type(n):该选择器定位元素E的导数第n个指定类型子元素:
    .class p:nth-child(2) 与 .class p:nth-of-type(2) 的区别在于,如果.class里的第2个子元素不是P元素时,.class p:nth-child(2) 的样式将无效,而.class p:nth-of-type(2) 将定位在 .class 里的第2个p元素

    nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n),这其中的 n 可以使用数字静态式,比如 .nth-child(2n+1) 将匹配第1、3、5...个元素

    E:first-child:父元素的第一个子元素E,与:nth-child(1)相同;
    E:last-child:父元素的倒数第一个子元素E;
    E:first-of-type:与:nth-of-type(1)相同;
    E:last-of-type:与:nth-last-of-type(1)相同;
    E:only-child:父元素中唯一的子元素E;
    E:only-of-type:父元素中唯一具有该类型的元素E;
    E:empty:没有子元素的元素,没有子元素包括文本节点;
    E:lang(en):具有使用双字母缩写(en)表示的语言的元素;
    E:not(exception):该选择器将选择与括号内的选择器不匹配的元素:
    :root —— root 选择页面的根元素
    p:not(.item3)——not 排除某个或者某类元素——not(被排除的元素)
    div:empty——指定的前面选择器所选的元素内容为空则生效。

    ---input的伪类选择器---
    input:focus——当输入框获取焦点的时候应用此样式
    input:enabled——起用状态下的样式
    input:disabled——禁用状态下的样式
    input:read-only——在输入框为只读状态下的样式
    input:read-write——输入框为可读可写状态下的样式
    input:checked——checked 表示选中状态下checkbox 的样式
    input:indeterminate + label——checkbox 半选择状态下的样式
    indeterminate——需要配合JS来使用(以下是JS代码)

    var checkBox = document.querySelector("#box6>input");
    //半选择状态 只能用js来设置
    checkBox.indeterminate = true;
    

    相关文章

      网友评论

          本文标题:你真的了解伪类和伪元素吗?

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