企业官网建设流程全解析

北京网站开发制作公司,微信小程序游戏修改器,app开发公司架构,wordpress导航菜单添加图标文章目录一、 伪类#xff08;Pseudo-classes#xff09;1.链接伪类2.用户行为伪类3.结构伪类选择器4.表单伪类二、伪元素#xff08;Pseudo-elements#xff09;三、核心区别一、 伪类#xff08;Pseudo-classes#xff09; 伪类用于选择处于特定状态的元素#xff0c…文章目录一、 伪类Pseudo-classes1.链接伪类2.用户行为伪类3.结构伪类选择器4.表单伪类二、伪元素Pseudo-elements三、核心区别一、 伪类Pseudo-classes伪类用于选择处于特定状态的元素例如用户交互或文档结构中的位置。它们以冒号:开头。1.链接伪类a:link为访问链接的默认样式。a:visited已访问链接的样式。a:hover鼠标悬停在链接上时的反馈。a:active连接被点击时的瞬时状态。代码示例/* 未访问链接的默认样式 */a:link{color:blue;text-decoration:none;}/* 已访问链接的样式 */a:visited{color:purple;}/* 鼠标悬停时的反馈 */a:hover{color:red;text-decoration:underline;}/* 点击瞬间的状态 */a:active{color:green;}2.用户行为伪类:hover鼠标经过元素。:focus获得焦点的元素表单当用户点击或通过键盘如Tab键导航到元素时触发。!DOCTYPEhtmlhtmlheadstyleinput:focus{border:2px solid #ff6b6b;background-color:#fff5f5;}button:focus{outline:3px dashed #20bf6b;}/style/headbodyinputtypetextplaceholder点击获取焦点button测试按钮/button/body/html3.结构伪类选择器:first-child一组兄弟元素中的第一个元素。:last-child一组兄弟元素中的最后一个元素。:nth-child(n)一组兄弟元素列表中第n个元素。n 的取值可以是1.数字。从1开始2.关键字。odd 奇数 even 偶数3.公式。:nth-child(3n) 3的倍数第3.6.9…个元素:nth-child(3n):nth-child(n2)第2个以及以后的元素:nth-child(-n3)前面3个元素注意公式的n取值从0开始计算styletable{width:500px;height:300px;border-collapse:collapse;text-align:center;background:#ccc;}table tr:first-child{background-color:#7ed6ef;}table tr:nth-child(odd){background-color:#fffcfc;}table tr:hover{background-color:#e9abab;}/stylebodytableborder1trth姓名/thth数据/thth日期/th/trtrtd张三/tdtd2/tdtd2003-9/td/trtrtd李四/tdtd2/tdtd2003-8/td/trtrtd王五/tdtd2/tdtd2003-7/td/tr/table/body/html4.表单伪类:disabled表单禁用。:checked选中状态表单复选按钮。/*禁用状态的输入框会显示灰色背景和浅色边框。*/styleinput:disabled{background-color:#f0f0f0;border:1px solid #ccc;}/style/headbodyinputtypetextdisabledplaceholder禁用的输入框/body/html/* 当复选框被选中时关联的标签文本会变为绿色并加粗。*/styleinput:checked label{color:green;font-weight:bold;}/style/headbodyinputtypecheckboxidagreelabelforagree我同意条款/label/body/html二、伪元素Pseudo-elements伪元素用于选择元素的特定部分如首行或内容前后而非元素本身。它们以双冒号::开头CSS3规范但单冒号仍兼容。常见伪元素示例::before在元素内容前插入生成内容。::after在元素内容后插入生成内容。::first-line选择首行。::first-letter第一个字母。::placeholder选择input或者textarea。stylediv{height:100px;width:500px;}div::before{content:开始color:red;}div::before{content:结束color:red;}/style/headbodydiv文字/div/body/html注意事项before和after是插入的伪元素特性类似内联元素。content属性是必须不能省略没有内容空引号即可。后期非常非常常用。比如小图标、各种装饰效果。三、核心区别作用对象伪类针对元素状态伪元素针对元素的部分内容。语法伪类用单冒号:伪元素推荐用双冒号::。内容生成伪元素常与content属性配合生成虚拟内容。