自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:博客 > 前端开发 > HTML|CSS代码 >

伪类选择器|css3新增的伪类选择器(面试题)|伪元素选择器

作者:灰牛站长•发布时间:2021-07-12 09:12:41•浏览

说明:文章更新于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>

相关文章

  • css网页布局|三列布局-左右固定-中间自适应

    css网页布局|三列布局-左右固定-中间自适应

    基本思路: 和2列布局很相似 左右2列采用浮动+宽度 中间区域实际是用margin挤压出来的 DOM顺序不能写乱,必须先写左右再写中间 HTML结构 div class="left"左侧...
    2021-07-21 10.07.07
  • 代码技巧之常用快捷键的整理

    代码技巧之常用快捷键的整理

    常用快捷键的整理 ctr1+C复制 ctr1+V粘贴 ctrl+Z撤销 回到上一步操作 ctr1+D复制整行 ctr1+Z剪切整行 增加/删除单行注释ctrl+/ 增加/删除多行注释ctrl+shift+/ html注释...
    2021-07-12 11.07.53
  • z-index的特点

    z-index的特点

    思路: ➥z-index的结构/定位元素默认的z-index ➥z-index单位 ➥能不能用子元素和父元素比较 ➥父元素没有z-index,能不能通过子元素控制他们的层级=改变层级...
    2021-07-12 11.07.57
  • 定位元素的异同点

    定位元素的异同点

    定位的值 position: absolute绝对定位 position: relative相对定位 position: fixed固定定位 定位的相同点和不同点 ===相同点: 可以 设置top/ bottom/ left/right四个方位值,如...
    2021-07-12 11.07.09
  • 定位之固定定位

    定位之固定定位

    固定定位- position: fixed 脱离文档流; 参照物是浏览器的可视窗口;任何元素都可以设置固定定位; 可设置top/ bot tom/left/ right四个方位 可通过z-index改变层级 !...
    2021-07-12 11.07.38

手机端