一、基本选择器

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选择器的更多相关文章

  1. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  2. 从零开始学习前端开发 — 16、CSS3圆角与阴影

    一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...

  3. 从零开始学习前端开发 — 15、CSS3过渡、动画

    一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...

  4. 从零开始学习前端开发 — 14、CSS3变形基础

    一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...

  5. 从零开始学习前端开发 — 12、CSS3弹性布局

    一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...

  6. 从零开始学习前端开发 — 2、CSS基础

    一.CSS简介  1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...

  7. 从零开始学习前端开发 — 7、CSS宽高自适应

    一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...

  8. 从零开始学习前端开发 — 1、HTML基础

    一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联 ...

  9. 从零开始学习前端JAVASCRIPT — 11、Ajax-前后端异步交互以及Promise-异步编程的改进

    (注:本章讲解涉及部分后端知识,将以php提供数据的方式进行相应的demo实现) 1:ajax的概念 全称:Asynchronous Javascript And Xml AJAX不是一种新的编程语言 ...

随机推荐

  1. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  2. Hive读取外表数据时跳过文件行首和行尾

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 有时候用hive读取外表数据时,比如csv这种类型的,需要跳过行首或者行尾一些和数据无关的或者自 ...

  3. 【转】Ubuntu网卡配置

    一.网卡地址配置Ubuntu的网络配置文件是:/etc/network/interfaces1.以DHCP 方式配置网卡   auto eth0   iface eth0 inet dhcp用sudo ...

  4. spark on mesos 两种运行模式

    spark on mesos 有粗粒度(coarse-grained)和细粒度(fine-grained)两种运行模式,细粒度模式在spark2.0后开始弃用. 细粒度模式 优点 spark默认运行的 ...

  5. Java并发编程:Timer和TimerTask

    Java并发编程:Timer和TimerTask 下面内容转载自: http://blog.csdn.net/xieyuooo/article/details/8607220 其实就Timer来讲就是 ...

  6. ESB 客户端调用 处理类

    esb package com.isoftstone.synchronize.entrance; import java.io.File; import java.text.SimpleDateFor ...

  7. 关于如何在BCB中使用CodeGuard

    作者:深圳虫 来自:深圳虫网本文来自http://www.szbug.com/disparticle.aspID=4 一. 为什么写这篇东西自己在使用BCB5写一些程序时需要检查很多东西,例如内存泄漏 ...

  8. Transition 1

    W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  9. 网络编程——UDP编程

    一个简单的聊天代码:运行结果: 在这个程序之中,由于recvfrom函数拥塞函数,没有数据时会一直阻塞,所以客户端和服务器端只能通过一回一答的方式进行信息传递.严格的讲UDP没有明确的客户端和服务端, ...

  10. mysql 查看当前使用的配置文件my.cnf的方法(推荐)

    my.cnf是mysql启动时加载的配置文件,一般会放在mysql的安装目录中,用户也可以放在其他目录加载. 安装mysql后,系统中会有多个my.cnf文件,有些是用于测试的. 使用locate m ...