做网站要属于无形资产吗,友点企业网站,企业网络推广方案模板,微博优惠券网站怎么做CSS3知识点:
CSS3的相关属性不兼容低版本浏览器#xff0c;IE9以下是不兼容的#xff0c;在实际开发中要特别注意#xff0c;移动端支持优于PC端#xff0c;是在CSS2上新增的属性#xff0c;关于兼容这里有两个名词需要了解#xff1a;
渐进增强 #xff1a;#xff…CSS3知识点:
CSS3的相关属性不兼容低版本浏览器IE9以下是不兼容的在实际开发中要特别注意移动端支持优于PC端是在CSS2上新增的属性关于兼容这里有两个名词需要了解
渐进增强 针对低版本浏览器进行页面构建保证最基本的功能再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级一开始就构建完整的功能然后再针对低版本浏览器进行兼容
新增选择器
结构伪类选择器
通常选择的是某指定的元素 styleli:first-child {/* 1选中某元素li的父级爸爸的第一个子级元素儿子*/background: yellow;}li:last-child {/* 2选中某元素li的父级爸爸的最后一个子级元素儿子*/background: skyblue;}li:nth-child(3) {/*3 选中某元素li的父级爸爸的第3个子级元素儿子没有0*/background: rgb(159, 41, 157);}li:nth-last-child(2) {/* 4选中某元素li的父级爸爸的倒数第2个子级元素儿子*/background:rgb(221, 42, 102);}/*需要注意的是上面括号中的数字可以是关键词或公式如event表示偶数则选中的是第偶数个odd表示的是奇数则选中的是第奇数个*//stylebodydivulli1/lili2/lili3/lili4/lili5/li/ul/div/bodystylediv span:first-of-type {/* 选中某类型(span)的第一个元素*/color: yellow;}div span:last-of-type {/* 选中某类型(span)的最后一个元素*/color: yellow;}div span:nth-of-type(2) {/* 选中某类型(span)的第2个元素*/color: yellow;}/stylebodydivp测试1/pspan测试2/spandiv测试3/divh2测试4/h2p测试5/pspan测试6/spandiv测试7/divh2测试8/h2p测试9/pspan测试10/spandiv测试11/divh2测试12/h2/div/body属性选择器
选取标签带有某些特殊属性的元素 styleli[class] {/*1选中带有class属性的元素*/background: blue;}li[classlist2] {/*2选中带有class属性且属性值为list2的元素*/font-size: 50px;}li[class^lis] {/*3选中带有class属性且属性值是以lis开头的元素*/font-size: 50px;}li[class$st2] {/*4选中带有class属性且属性值是以st2结尾的元素*/list-style: none;}li[class*t] { /* 5选中带有class属性且属性值中有t的元素*/text-decoration: underline;}li[class~tab] {/* 5选中class属性值中有tab属性值的元素*/font-size: 40px;color: yellow;}li[idbox1] { /* 5选中带有id属性且属性值为box1的元素*/text-decoration: underline;}/stylebodydivulli1/lili classlist12/lili3/lili classlist24/lili classbox4 tab5/lili classtest26/lili classbox1 tab7/lili idbox18/li/ul/div/body伪元素选择器
标签后面带有四个点 stylep::first-letter {/*p::first-letter 1选中p元素中文本的第一个字或者单词*/font-size: 50px;}p::first-line {/*p::first-line 2选中p元素中第一行文本*/text-decoration: underline;}p::selection {/*p::selection 3选中p元素中鼠标选中的文本*/background: skyblue;color: white;}/stylebodyp今天给大家介绍一下伪元素选择器伪元素选择器后面带有四个小点类选择器带有一个小点 伪类带有两个小点。今天给大家介绍一下伪元素选择器伪元素选择器后面带有四个小点类选择器带有一个小点 伪类带有两个小点。今天给大家介绍一下伪元素选择器伪元素选择器后面带有四个小点类选择器带有一个小点 伪类带有两个小点。/p/body:focus用来选取有获取焦点的元素一般和input搭配使用 styleinput:focus {background: skyblue;}/stylebodyinput typetext value/bodybefore和after伪元素
这两个是比较常用的他们必须要有content属性否则无效content可以空着字体图标中的编码可以写到content里面其本质是在一个标签内容前或后添加新内容它们默认是行内元素当display转换后可以设置对应的属性。 stylediv::before {/*before在元素的前面添加内容前面的四个点可以省略写两个但是浏览器会默认补为四个点*/content: 我;background: skyblue;font-size: 40px;display: block;}div::after {/*after在元素的后面添加内容*/content: 十八岁;font-size: 30px;background-color: rgb(94, 235, 230);}/stylebodydiv今年/div/body提示本文图片等素材来源于网络若有侵权请发邮件至邮箱810665436qq.com联系笔者 删除。 笔者苦海
