CSS3伪元素和伪类选择器的详细方案

它是否是一个伪或伪元素,它属于CSS选择器的范畴。所以他们的定义可以在CSS标准的选择器部分找到。他们是CSS2.1选择器和CSS选择器3级,均已推荐。





伪类选择器:CSS中定义良好的选择器不能随便命名。

常用的伪类选择器有几种元素,如:环节一:参观| |:悬停|:主动`

提示:在CSS定义中,A必须悬停在A和A之后,并且是有效的。

提示:在CSS定义中,A必须在悬停之后放置,它是有效的。

伪元素选择器:不是用于实际元素的选择器,而是用于CSS中定义的伪元素的选择器。

CSS中有四种伪元素选择器:
第一行:使用元素第一行的样式;
第一个字母:在某个元素中使用文本的第一个字母或第一个词。
以前:在某个元素之前插入一些内容;
之后:在某个元素后面插入一些内容;
用法:选择器:伪元素{样式}

结构伪类选择器
1。四个最基本的:根,不是,空,目标

2。第一个孩子,最后一个孩子,第N个孩子,第N个最后的孩子,
n个子(奇数),n个子(偶数),第n个最后子(奇数),第n个最后子(偶数)。

三.n个类型,n个类型的最后一个
4。循环使用的风格
5。唯一的孩子

根()选择器,从字面上,我们可以清楚地了解根选择器,以匹配文档的根元素,元素E的位置。在HTML文档的根元素是一样的。:root选择相当于元

非()选择器被称为负选择器,它与jQuery中的非选择器完全相同,它可以选择除元素之外的所有元素。

空()选择器是空的。它用于选择没有内容的元素,在没有内容的情况下引用一个小的内容,即使它是一个空格。

(目标):指向页面元素的目标选择器(在页面中用作链接使用指定样式、样式的元素ID),只有当用户单击超链接页面时,跳转到目标元素才会受到影响。

:第一个子())选择器表示选择父元素的第一个子元素的元素E。简单的理解点是选择元素中的第一个子元素,并记住它是子元素,而不是子元素。

nth-child()选择一个或多个特定的元素的子元素;
n最后一个子元素()从父元素的最后一个子元素开始计算,以选择一个特定的元素。

请看下面的例子:


复制代码代码如下所示:

最后一个子(2){
颜色:红色;
}




前端
发展
工程
软件
工程




nth-child()可以选择一个或多个特定的子元素,你可以这样选择:
n个子(长度);数字参数是特定的
n个子(n);参数为n,n从0计算。
n个子(n,*),n,n,多选择n,从0开始。
n个子元素(n +长度)。
在元素前面小于长度的n个子(- n +长度)选择。
n个子(n *长度+ 1);
以上长度为整数

值得注意的是,n个子(0)没有选择元素,第n个子元素(1)选择第一个元素。


复制代码代码如下所示:

{列表样式:无;};
{演示。
宽度:400px;
填料:10px;
}
演示李{
填料:5px;
浮点数:左;
右边距:4px;
}
演示李{
浮点数:左;
显示块;
身高:20px;
行高:20px;
宽度:20px;
-moz-border-radius: 10px;
WebKit的边界半径:10px;
边界半径:10px;
文本对齐:中心;
背景:# F36;
颜色:白色;
文字装饰:无;
}
演示:第n个子(1){
背景:# 01fefe;
}
演示:n个子(2n){
背景:# 4679bd;
}



















N型(N)选择器和nth-child(n)选择器很相似;不同的是,它只考虑一些类型的子元素的父元素指定。当在一个元素的子元素不仅是子元素的类型相同,这是非常使用方便、有用的:n型(N)选择器在父元素定位某些类型的子元素。

:独生子表示一个元素是其父元素的唯一子元素。

伪元素:
CSS中的伪元素以前出现过::第一线,第一个字母,前,后;
所以在CSS3,他对伪元素做了一些调整,在原有的基础上增加:;;现在是::::::第一个字母::在一线after此外,他还增加了一个::selection二,::;和:CSS3主要是用来区分虚假和伪元素之间,到现在,这两个方法是公认的,也就是说,无论哪种方式的作用是一样的,只是不同的格式。

第一行:例如,选择元素的第一行更改每个段落中第一行文本的样式,我们可以使用
p:第一线{字体重量:粗体;}

前后两个主要用于将内容插入到元素的前面或后面。这两个常用的内容组合已经看到了其中大部分。

复制代码代码如下所示:
Clearfix:之前,
{ clearfix:后。
内容:;
显示块;
身高:0;
可见性:隐藏;
}
。clearfix:后明确:两;} {
。clearfix {变焦:1;}


选择用于更改浏览中文网页的默认效果。