说明:文章更新于2021-7-21,原本是3篇文章,但是重新录入的时候只录入一篇,现在做下修改
css选择器之伪类选择器
a:link{color:#ff0000}/*未访问的链接*/
a:visited{color:#00ff00}/*已访问的链接*/
a:hover{color:#ff00ff}/*鼠标移动到链接上*/
a:active{color:#0000ff}/*选中的链接*/
说明:10<伪类选择器权重<11
css3新增的伪类选择器(面试题)
列举css3中新增的选择器css选择器有哪些?a:link没有访问之前a的样式;a:visited已访问a的样式;a:hover鼠标移上的样式;a:active鼠标按下的样式;input:focus获取光标
css3新增伪类选择器
:not 排除
:last-child 最后一个子元素
:nth-child(n) n表示具体的第n个 odd/2n+1奇数 even/2n偶数
only-child 仅仅/唯一只有一个
nth-last-child倒数第n个元素
:first-of-type第一个同级兄弟元素
:last-of-type最后一个同级兄弟元素
:only-of-type只有一个同级兄弟元素
:nth-of-type(n)第n个同级兄弟元素
:nth-last-of-type(n)倒数第几个同级兄弟元素
:empty空内容
<style type="text/css">
ul>li{
float:left;
list-style: none;
width:100px;
height: 50px;
background: red;
}
ul li:not(:last-child){
/*除了最后一个没有右边框线,其余的都有*/
border-right:10px solid #000;
}
</style>
css选择器之伪元素选择器
:first-line伪元素用于向文本的首行设置特殊样式,只能用于块级元素
:first-letter伪元素用于向文本的首字母设置特殊样式
:before在元素的内容前面插入新的内容
:after在元素的内容后面插入新的内容
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择器之伪元素选择器</title>
<style type="text/css">
p:first-letter{
font-size: 100%;
}
p:after{
content:'';/*这个属性不能省略,如果省略,该属性不起作用*/
width:20px;
height: 20px;
background-color: #000000
}
</style>
</head>
<body>
<p>前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1] 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p>
</body>
</html>
转载请注明：大灰牛博客 » css3新增的伪类选择器(面试题)|伪元素选择器