关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用
伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如:
input {
width: 515px;
height: 50px;
padding: 10px 20px;
border: 1px #fff solid;
font-size: 16px;
box-shadow: 0 0 21px rgba(97, 104, 124, .15);
vertical-align: middle;
}
input:focus{
border-color: #2bb3ee;
}
效果:
给input元素添加一个:focus伪类,当input元素获得焦点时改变其边框颜色,常用于表单输入的美化。
常见的伪类有 :active, :hover, :focus, :first-child, :disabled, :visited, :last-child, :nth-child() 等。
:active 伪类用于匹配被激活的元素,比如点击一个链接时,鼠标按下到松开之间的时间这个链接时激活的。
:hover 伪类用于匹配“悬停”或说“虚指”但是没有被激活的元素,常见案例是鼠标悬停于元素上面触发。需要注意的是:对于触摸屏的设备来说,伪类:hover不一定起作用,所以对于一些很重要的内容,最好不要设计成悬浮才显示!
:focus 伪类用于匹配获得焦点的元素,在设计表单输入时常用,让获得焦点的元素更加突出,使使用者能更快找到输入地方。
:first-child, 用法如 span:first-child 用于匹配所有元素的第一个<span>,听起来有点难理解,举个栗子:
CSS: span:first-child{ color:red; } html: <div> <span>1</span> <span>2</span> </div>
在这里,<span>1</span>会被匹配到,“1”变成红色
:first-child伪类有一个很容易用错的地方就是:
CSS: span:first-child{ color:red; } html: <div> <a>0</a> <span>1</span> <span>2</span> </div>
在上面的例子中,实际上span:first-child没有匹配到<span>1</span>,因为该例子里面,<span>的父元素<div>的第一个子元素是<a>,所以没有任何元素被匹配到,那如果要匹配<span>1</span>怎么办?用
span:first-of-type就可以了,这个坑在实际应用中还是很容易踩到的,应该注意一下。
:disabled 用于匹配被禁用的元素,比如给所有不可用的按钮(如未填写完时注册按钮不可用)disabled状态添加样式,让它变成灰色。
:visited 用于给已访问过的链接添加特殊的样式。
:last-child,:nth-child()用法和:first-child用法差不远。
伪元素允许给元素的某些部分添加样式。
所有伪元素有 ::before, ::after, ::first-letter, ::first-line, ::selection,其中 ::selection是属于CSS3新增的
伪元素用两个冒号是CSS3中的规定,用于区别 伪类,其实也是可以使用单冒号的,可以兼容过老版本的浏览器
值得注意的是,在伪类和伪元素结合使用时,如div::after:hover是不起效果的,div:hover::after则是有效的
::before 会在当前元素前面插入一个子元素作为伪元素。通过“content”属性来添加一些内容,比如加个箭头、标号什么的。
添加字符串:
CSS: a:before{ content:"链接:"; } HTML: <a href="https://home.cnblogs.com/u/maderlzp/">浮生若梦</a>
效果如:链接:浮生若梦
可以利用content的attr()调用当前元素的属性,如:
CSS: a:before{ content:"("attr(href)")"; } HTML: <a href="https://home.cnblogs.com/u/maderlzp/">浮生若梦</a>
效果图:
还可以使用url()引用媒体元素
CSS: a:before{ content:""url(https://pic.cnblogs.com/face/1149666/20170419104717.png)""; } HTML: <a href="https://home.cnblogs.com/u/maderlzp/">浮生若梦</a>
效果图:
伪元素 ::after和 ::before用法差不多
比如下图中红框部分效果就可以用 ::after做的
代码如下:
CSS: a{ position: relative; top: 41px; left: 50px; } a span::after{ content: ''; position: absolute; width: 10px; height: 10px; bottom: -5px; left: 27px; border: 1px solid; border-color: #E7E9EE #E7E9EE transparent transparent; -webkit-transform: rotate(135deg); transform: rotate(135deg); background: #fff; } a:hover span{ display: block; } a span{ display: none; position: absolute; font-style: normal; color: #414a60; width: auto; top:-38px; left:-5px; min-width: 44px; height: 31px; line-height: 30px; padding: 0 10px; white-space: nowrap; border: 1px #E7E9EE solid; text-align: center; background: #fff; z-index: 11; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .08); } HTML: <a><b>李雷</b><span>韩梅梅,你在哪里?</span></a>
鼠标悬停显示对话
还可以用来清除浮动、和css3的动画效果做出更多好看的页面等,这就需要发挥自己想象力了
:first-letter 选择器用于选取指定选择器的首字母。
:first-line 选择器用于选取指定选择器的首行。并且 ::first-line 伪元素只能应用在块容器中。
::selection 选择器匹配被用户选取的选取是部分。
::selection 选择器只能应用少量 CSS 属性:color, background-color, cursor, outline, text-decoration, text-emphasis-color和text-shadow。
如
CSS:
::selection
{
color:#00ff00;
}
应用上面的样式时,选取到的文字就会变成原谅色~~