CSS3简介、新增选择器、属性选择器、伪元素选择器、伪元素

CSS3知识点:

CSS3的相关属性不兼容低版本浏览器，IE9以下是不兼容的，在实际开发中要特别注意，移动端支持优于PC端，是在CSS2上新增的属性，关于兼容这里有两个名词需要了解：

渐进增强：（针对低版本浏览器进行页面构建，保证最基本的功能，再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验）；

优雅降级（一开始就构建完整的功能，然后再针对低版本浏览器进行兼容）

新增选择器：

结构伪类选择器：

通常选择的是某指定的元素

 <style>li: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表示的是奇数，则选中的是第奇数个*/</style><body><div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></body><style>div 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;}</style><body><div><p>测试1</p><span>测试2</span><div>测试3</div><h2>测试4</h2><p>测试5</p><span>测试6</span><div>测试7</div><h2>测试8</h2><p>测试9</p><span>测试10</span><div>测试11</div><h2>测试12</h2></div></body>

属性选择器：

选取标签带有某些特殊属性的元素

 <style>li[class] {/*1选中带有class属性的元素*/background: blue;}li[class=list2] {/*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[id="box1"] { /* 5选中带有id属性且属性值为box1的元素*/text-decoration: underline;}</style><body><div><ul><li>1</li><li class="list1">2</li><li>3</li><li class="list2">4</li><li class="box4 tab">5</li><li class="test2">6</li><li class="box1 tab">7</li><li id="box1">8</li></ul></div></body>

伪元素选择器：

标签后面带有四个点

 <style>p::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;}</style><body><p>今天给大家介绍一下伪元素选择器，伪元素选择器后面带有四个小点，类选择器带有一个小点 ，伪类带有两个小点。今天给大家介绍一下伪元素选择器，伪元素选择器后面带有四个小点，类选择器带有一个小点 ，伪类带有两个小点。今天给大家介绍一下伪元素选择器，伪元素选择器后面带有四个小点，类选择器带有一个小点 ，伪类带有两个小点。</p></body>

:focus用来选取有获取焦点的元素，一般和input搭配使用：

 <style>input:focus {background: skyblue;}</style><body><input type="text" value=""></body>

before和after伪元素：

这两个是比较常用的，他们必须要有content属性否则无效，content可以空着（字体图标中的编码可以写到content里面），其本质是在一个标签内容前或后添加新内容，它们默认是行内元素，当display转换后，可以设置对应的属性。

 <style>div::before {/*before在元素的前面添加内容，前面的四个点可以省略写两个，但是浏览器会默认补为四个点*/content: '我';background: skyblue;font-size: 40px;display: block;}div::after {/*after在元素的后面添加内容*/content: '十八岁！';font-size: 30px;background-color: rgb(94, 235, 230);}</style><body><div>今年</div></body>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

CSS3简介、新增选择器、属性选择器、伪元素选择器、伪元素相关推荐

CSS3选择器-属性选择器
第1关:CSS3-属性选择器相关概念 1.以下选项中,属于属性选择器的是( ) C.span[id]{color:red;} 2.样式规则如下: p[class $= en]{font-weight: ...
css3中的column属性实现多列布局和瀑布流布局
在css3中有新增column属性可以实现页面的排版,使得页面更加整洁,现在一一为大家介绍用法以及属性值. columns:用于设置元素的列宽和列数.它是column-width和column-cou ...
html5新增的伪类选择器有,CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）...
在css3提供的新选择器之前,选择一个元素需要借助id或者class,css3新增的选择器可以更灵活的去选择需要的元素,那css3提供了哪些好用的选择器呢? 首先就是属性选择器,我们可以通过属性选择器 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
目录 1.属性选择器 2. 结构伪类选择器 nth-child(n) nth-of-type(n): nth-child和nth-of-type的区别 3. 伪元素选择器 1.属性选择器 E[att ...
CSS3（新增选择器，nth选择器，伪元素）
CSS3 1.CSS3选择器 1.1新增基础选择器 1.1.1 子元素选择器(>) 1.1.2 相邻元素选择器(+) 1.1.3通用兄弟选择器(~) 1.1.4群组选择器(,) 1.2属性选择器 ...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别、遮罩层效果、三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器兄弟选择器属性选择器伪类选择器其他伪类选择器类元素选择器直接选择器否定选择器伪元素 :after清除浮动 :before和:after 用来写小三角形首字母 ...
CSS基础(part21)--CSS3伪元素选择器
学习笔记,仅供参考,有错必究参考自:pink老师教案 CSS3伪元素选择器伪类选择器: 选择符简介 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容伪类选择 ...

CSS3简介、新增选择器、属性选择器、伪元素选择器、伪元素

CSS3简介、新增选择器、属性选择器、伪元素选择器、伪元素相关推荐

最新文章

热门文章