大家好,又见面了,我是你们的朋友全栈君。
CSS3选择器分为:结构型伪类选择器、UI元素状态伪类选择器,否定选择器,和伪元素
一、结构型伪类选择器
二、UI元素状态伪类选择器
1、动态伪类(也称为“锚点伪类”)
.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
需要遵循爱恨规则:LoVe/HAte,也就是Link – Visited – Hover – Active
2、UI元素状态伪类,比如有“:enabled”,”:disabled”,”:checked”
三、否定选择器,比如”:not”
input:not([type="submit"]) {
border: 1px solid red;
}
四、伪元素
CSS中的伪元素有”:first-line”,”first-letter”,”:before”,”:after”,CSS3是在以前的基础上增加了一个”:”,也就是变成了”::first-line”,”::first-letter”,”::before”,”::after”,另外还新增了一个”::selection”,两个”::”和一个”:”只是CSS3中用来区分伪类和伪元素,这两种方式都是被接受的。
::first-line:选中元素的第一行
::first-letter:选中元素的第一个字母
::before和::after这两个主要用来给元素的前面或后面插入内容,通常和”content”一起配合使用,经常用来清除浮动。
.clearfix::before,.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix::after {
clear: both;
}
.clearfix {
zoom: 1;
}
::selection 是用来改变浏览网页选中问的默认效果。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/157233.html原文链接:https://javaforall.cn