从零开始学习前端开发 — 11、CSS3选择器
一、基本选择器
1.* 通配符(通用选择器)
2.id选择器
3.class选择器(类选择器)
4.标签选择器(元素选择符)
5.群组选择器 (选择符1,选择符2{...})
二、层次选择器(关系选择器)
1.后代选择器语法: E F
eg: .box a{color:red;} 匹配.box中所有的子元素a
2.子代选择器语法: E>F
eg: .box>a{color:red;} 匹配.box中第一级子元素a
3.相邻兄弟选择器语法: E+F
eg: .box+h3{background:pink;} 匹配.box后面紧邻的那一个h3元素
注:相邻兄弟选择器能匹配到的元素有且仅有一个,并且是E元素后面紧邻的F元素
4.通用兄弟选择器语法: E~F
eg: .box~h3{border:2px solid blue;} 匹配.box后面所有兄弟元素h3
注:通用兄弟选择器可以匹配到多个其后的兄弟元素
三、动态伪类选择器
1.E:link 链接没有被访问过时的状态
2.E:visited 链接访问过后的状态
3.E:hover 鼠标滑过时的状态
4.E:active 鼠标按下时的状态
(爱恨原则:LoVe HAte)
5.E:focus 当获取到焦点时的状态
eg: input:focus{border:2px solid red;}
当获取焦点时(或当光标聚焦到input框时)应用的样式
四、结构性伪类选择器
1. :first-child 匹配每个父元素下的第一个子元素
eg: .uls :first-child{color:red;} 匹配.uls下每个父元素下的第一个子元素
eg: .uls li:first-child{color:red;} 匹配.uls下的第一个子元素li(li必须是父元素下的第一个子元素)
2. :last-child 匹配每个父元素下的最后一个子元素
eg: .uls :last-child{color:orange;} 匹配.uls下每个父元素下的最后一个子元素
eg: .uls li:last-child{color:blue;} 匹配.uls下的最后一个子元素li(li必须是父元素下的最后一个子元素)
3. :nth-child(n) 匹配父元素下的第n个子元素(n从0开始,但是一般从第一个元素开始找)
eg: .uls :nth-child(3){font-size:32px;} 匹配.uls下的第三个子元素
注: :nth-child(1) 等同于 :first-child 都是匹配父元素下的第一个子元素
4. :nth-child(2n) 匹配父元素下的第偶数个子元素 等价于 :nth-child(even)
:nth-child(2n+1) 匹配父元素下的第奇数个子元素 等价于 :nth-child(odd)
eg: .tab tr:nth-child(2n){background:pink;} 匹配.tab下的第偶数个tr
eg:.tab tr:nth-child(2n+1){background:#ac0;} 匹配.tab下的第奇数个tr
扩展:
:nth-child(n+x) 匹配父元素下包含x在内的大于x的子元素
:nth-child(-n+x) 匹配父元素下包含x在内的小于x的子元素
5. :nth-last-child(n) 匹配父元素下从后往前数第n个子元素
eg: .uls li:nth-last-child(3){background:orange;} 匹配.uls下从后往前数第三个子元素
注: :nth-last-child(1) 等同于 :last-child 都是寻找父元素下的最后一个子元素
6. :first-of-type 匹配父元素下指定类型的第一个子元素
eg: .uls li:first-of-type{background:pink;} 匹配.uls下li这种类型的子元素中的第一个子元素
注: :first-of-type前面必须指定元素类型
7. :last-of-type 匹配父元素下指定类型的最后一个子元素
eg: .uls li:last-of-type{background:orange;} 匹配.uls下的li这种类型的子元素中的最后一个子元素
8. :nth-of-type(n) 匹配父元素下指定类型的第n个子元素
eg: .uls li:nth-of-type(3){color:red;} 匹配.uls下的li这种类型的子元素中的第三个子元素
9. :nth-last-of-type(n) 匹配父元素下指定类型的倒数第n个子元素
eg: .uls li:nth-last-of-type(2){color:blue;} 匹配.uls下的li这种类型的倒数第二个子元素
10. :only-child 匹配父元素下的唯一一个子元素
11. :only-of-type 匹配父元素下相同类型的唯一一个子元素
12: :empty 匹配内容为空的元素(空格,换行符都不能有)
13. :root 匹配根元素html
五、UI状态伪类选择器
1.E:checked 匹配选中状态的单选或复选按钮
eg: input:checked+label{color:red;} 匹配选中状态的input控件后面紧邻的那个label标签
2.E:enabled 匹配启用状态的input控件 eg: input:enabled{ border-radius:5px;}
3.E:disabled 匹配禁用状态的input控件
六、目标伪类选择器
E:target 匹配锚点链接链接到的那个元素
eg: ul:target{display:block;}
当锚点链接链接到ul时,ul显示
七、属性选择器
1. E[attr] 匹配含有attr属性的E元素
eg: a[href]{color:red;} 匹配含有href属性的a标签
2. E[attr=value] 匹配含有attr属性,并且值为value的E元素
eg: a[class=linkA]{color:blue;} 匹配含有class属性并且值为linkA的a标签
3. E[attr~=value] 匹配含有attr属性并且在值列表中含有value这个词的E元素
eg: a[title~=教育]{background:pink;} 匹配含有title属性,并且值列表中含有教育这个词的a标签
4. E[attr^=value] 匹配含有attr属性并且值以value开头的E元素
eg: a[href^=http]{border:1px solid black;} 匹配含有href属性并且值以http开头的a标签
5. E[attr$=value] 匹配含有attr属性并且值以value结尾的E元素
eg: a[href$=cn]{font-style:italic;} 匹配含有href属性,并且值以cn结尾的a标签
6. E[attr*=value] 匹配含有attr属性并且值列表中含有value这个字的E元素
eg: a[title*=教育]{font-size:12px;} 匹配含有title属性并且值列表中含有教育二字的a标签
7. E[attr|=value] 匹配含有attr属性并且值以value-开头或值为value的E元素
eg: a[id|=foc]{background:pink;} 匹配含有id属性,并且值以foc-开头或值为foc的a标签
八、语言伪类选择器
E:lang(en) 匹配含有lang属性,并且值为en的E元素
九、否定伪类选择器
E:not(F) 匹配不满足条件F的E元素
eg: li:not([class=lis]){background:pink;} 匹配含有class属性,但是属性值不等于lis的li标签
十、伪元素
1. E::before 在E元素中内容之前添加一个伪元素
eg: p::before{content:'hello';}
2 E::after 在E元素中内容之后添加一个伪元素
eg: p::after{
content:"";
height:0;
overflow:hidden;
clear:both;
display:block;
visibility:hidden;
}
注:a) 只要是添加伪元素,content属性必须要写
b) 伪元素是内联元素
注:伪类和伪元素的区别
我们通过":"和"::"来区分伪类和伪元素,这两种写法都是被接受的
伪元素是通过css样式去添加的一个元素,本身并不存在
3. E::first-line 匹配段落中的第一行文本
4. E::first-letter 匹配段落中的第一个字符(第一个汉字或第一个字母)
5. E::selection 改变浏览器网页默认的选中效果
兼容火狐写法: E::-moz-selection
十一、渐进增强和优雅降级
1.渐进增强:开始就针对低版本浏览器进行开发,开发完成后在针对高版本浏览器追加效果,完善功能
.box{
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
transition:all 1s;
}
2.优雅降级:开始就以高版本的浏览器进行开发,开发完成后再针对各版本浏览器做兼容
.box{
transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
}
十二、css3属性针对不同版本浏览器兼容写法
1.针对webkit内核
-webkit-
2.针对火狐
-moz-
3.针对opera
-o-
4.针对IE浏览器
-ms-
从零开始学习前端开发 — 11、CSS3选择器的更多相关文章
- 从零开始学习前端开发 — 17、CSS3背景与渐变
一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...
- 从零开始学习前端开发 — 16、CSS3圆角与阴影
一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- 从零开始学习前端开发 — 14、CSS3变形基础
一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...
- 从零开始学习前端开发 — 12、CSS3弹性布局
一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...
- 从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
- 从零开始学习前端开发 — 7、CSS宽高自适应
一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...
- 从零开始学习前端开发 — 1、HTML基础
一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联 ...
- 从零开始学习前端开发 — 18、BFC
一. BFC的概念 BFC--block formating context的缩写,中文译为"块级格式化上下文" 二.如何触发BFC 1.设置float除none以外的值(left ...
随机推荐
- Tomcat安装和目录简介
要知道动态的网页必须要有服务器的支撑! 1.知名的java web服务器 Tomcat:Apache组织发布,免费开源的,轻量级 JBoss.WebLogic是商用的,价格较高,但相对于开源的更加稳定 ...
- PHP 购物车 php闭包 array_walk
<?php class Cart { const PRICE_BUTTER = 1.00; const PRICE_MILK = 3.00; const PRICE_EGGS = 6.95; p ...
- Python学习_06_文件、IO
文件对象 python中的文件操作和c语言比较类似,包括一些缓冲.偏移量的方式. 文件对象可以通过open().file()两个内建方法创建,两个方法并没有什么不同,使用方法和c语言中的fopen() ...
- Java Web高级编程(二)
使用会话维持状态 一.会话 为了实现关联同一个用户端的多个请求和这些请求之间数据的共享,需要用到会话,会话用于维持请求和请求之间的状态.从服务器的角度,当用户的Web浏览器打开第一个链接到服务器的套接 ...
- Fiddler中Response 的Raw乱码问题解决
有时候我们看到Response中的HTML是乱码的, 这是因为HTML被压缩了, 我们可以通过两种方法去解压缩. 1. 点击Response Raw上方的"Response body is ...
- 6.前端基于react,后端基于.net core2.0的开发之路(6) 服务端渲染(SSR)
0.源码地址 https://gitee.com/teambp/ScaffoldClient 这个地址下载对应源码. 1.服务端渲染是啥? 就是在服务器进行页面渲染(废话),当页面展示后,显示的就是 ...
- 第一章 Go语言入门
文章由作者马志国在博客园的原创,若转载请于明显处标记出处:http://www.cnblogs.com/mazg/ 1.1 编译环境及开发工具 1.1.1 Go语言编译器 下载地址:http://li ...
- STM32/GD32芯片信息
因为需要自动适配芯片进行系统配置,所以我们有必要通过读取一些系统寄存器来获取必要信息.我们的代码需要兼容STM32F1/GD32F1/STM32F0/STM32F4 代码如下: #ifdef STM3 ...
- 一次完整的http的请求过程
一个完整的http的完成请求过程: 输入网址-> 域名解析-> tcp的三次握手-> 建立tcp连接后发起http 请求-> 服务器响应http ,发送数据给浏览器-> ...
- MYSQL:插入记录检查记录是否存在,存在则更新,不存在测插入记录SQL
我们在开发数据库相关的逻辑过程中, 经常检查表中是否已经存在这样的一条记录, 如果存在则更新或者不做操作, 如果没有存在记录,则需要插入一条新的记录. 这样的逻辑固然可以通过两条sql语句完成. SE ...