(理解)伪类和伪元素的区别
学习这么长时间对于一些基本点还是不太理解,所以在这里进行了区分
第一种理解
伪类用于向某些选择器添加特殊的效果。
伪元素用于将特殊的效果添加到某些选择器。
第二种理解
伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。
伪类有::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;
网友评论