CSS3知识点整理(二)----CSS3选择器
总结各种CSS3选择器的介绍及具体语法
(一)属性选择器
在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示:
html代码:
<a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="我的title是more">我的title是more</a>
css代码:
a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }
(二)结构性伪类选择器
1):root
选择器:
从字面上就可以很清楚的理解是根选择器,它的意思是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。
html代码:
<div>:root选择器的演示</div>
css代码:
:root { background:orange; }
":root"选择器等同于<html>元素,即:
:root{background:orange}
html {background:orange;}
得到的效果等同,建议使用:root方法。
伪元素的优先级大于非伪元素的优先级, :root > *>body 的优先级 :root(结构伪类选择器)=HTML
2):not
选择器
称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。
就拿form元素来说,比如说想给表单中除submit按钮之外的input元素添加红色边框,CSS代码可以写成:
注意:not需要紧跟后面,前面不能有空格
input:not([type="submit"]){ border:1px solid red; }
3):empty
选择器
表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。
html代码:
<p>我是一个段落</p> <p> </p> <p></p>
css代码
p{ background: orange; min-height: 30px; } p:empty { display: none; }
效果:
4):target
选择器
称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。
例:点击链接显示隐藏的段落
html代码:
<h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div>
css代码:
.menuSection{ display: none; } :target{/*这里的:target就是指id="brand"的div对象*/ display:block; }
效果:
1、具体来说,触发元素的URL中的标志符通常会包含一个#号,后面带有一个标志符名称,上面代码中是:#brand
2、:target就是用来匹配id为“brand”的元素(id="brand"的元素),上面代码中是那个div元素。
多个url(多个target)处理:
上面的例子中,#brand与后面的id="brand"是对应的,当同一个页面上有很多的url的时候可以取不同的名字,只要#号后对的名称与id=""中的名称对应就可以了。
如下面例子:可以对不同的target对象分别设置不同的样式。
html代码:
<h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div> <h2><a href="#jake">Brand</a></h2> <div class="menuSection" id="jake"> content for jake </div> <h2><a href="#aron">Brand</a></h2> <div class="menuSection" id="aron"> content for aron </div>
css代码:
#brand:target { background: orange; color: #fff; } #jake:target { background: blue; color: #fff; } #aron:target { background: red; color: #fff; }
5) :first-child选择器
表示的是选择父元素的第一个子元素的元素E。就是选择元素中的第一个子元素,注意是子元素,而不是后代元素。
html代码:
<ul> <li><p>Link1</p></li> <li><p>Link2</p></li> <li><p>Link3</p></li> </ul>
css代码:
ul > li:first-child { color: red; }
>是子元素选择器,空格是后代选择器,他们的区别:
后代选择器:匹配父子关系和祖先-后代关系
子元素选择器:匹配父子关系
>(子元素选择器)只是匹配到它下面的一层,而不是多层。
即:ul>li 表示父子的关系
ul li 表示子,孙,子子孙孙,孙孙子子,子孙子孙...
6):last-child选择器
与 :first-child选择器作用类似,不同的是 :last-child选择器选择的是元素的最后一个子元素
7) :nth-child(n) 选择器
用来定位某个父元素的一个或多个特定的子元素。
其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),
但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。
当 :nth-child(n)选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素
例:将偶数行列表背景色设置为橙色
html代码:
<ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> </ol>
css代码:
参数也可以是odd三个单词奇数,even四个单词偶数
ol > li:nth-child(2n){ background: orange; }
8):nth-last-child(n)选择器
和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个"last",所起的作用和":nth-child(n)"选择器有所区别,
从某父元素的最后一个子元素开始计算,来选择特定的元素。
9):first-of-type选择器
类似于 :first-child选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
10):nth-of-type(n)
选择器
和:nth-child(n)
选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用:nth-of-type(n)选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在:nth-of-type(n)选择器中的n和:nth-child(n)选择器中的n参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。
11) :last-of-type
选择器
和:first-of-type
选择器功能是一样的,不同的是他选择是父元素下的某个类型的最后一个子元素
。
12):nth-last-of-type(n)
选择器
和:nth-of-type(n)
选择器是一样的,选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始,而且它的使用方法类似于:nth-last-child(n)
选择器。
13) :only-child
选择器
选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。
html代码:
<div class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class="post"> <p>我是一个段落</p> </div>
css代码:
.post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; }
效果:
14) :only-of-type
选择器
用来选择一个元素是它的父元素的唯一一个相同类型的子元素。换一种说法,“:only-of-type”
是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用:only-of-type选择器就可以选中这个元素中的唯一一个类型子元素。
15):enabled选择器
在Web的表单中,有些表单元素有可用(:enabled)和不可用(:disabled)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么可以通过伪选择器 :enabled对这些表单元素设置样式。
16) :disabled选择器
刚好与 :enabled选择器相反,用来选择不可用表单元素。要正常使用 :disabled选择器,需要在表单元素的HTML中设置"disabled"属性。
17):checked选择器
在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。(要覆写这两个按钮默认样式比较困难)。在CSS3中,可以通过状态选择器:checked选择器配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
例:通过“:checked”状态来自定义复选框效果。
html代码:
<form action="#"> <div class="wrapper"> <div class="box"> <input type="checkbox" checked="checked" id="usename" /><span>√</span> </div> <lable for="usename">我是选中状态</lable> </div> <div class="wrapper"> <div class="box"> <input type="checkbox" id="usepwd" /><span>√</span> </div> <label for="usepwd">我是未选中状态</label> </div> </form>
css代码:
form { border: 1px solid #ccc; padding: 20px; width: 300px; margin: 30px auto; } .wrapper { margin-bottom: 10px; } .box { display: inline-block; width: 20px; height: 20px; margin-right: 10px; position: relative; border: 2px solid orange; vertical-align: middle; } .box input { opacity: 0; position: absolute; top:0; left:0; } .box span { position: absolute; top: -10px; right: 3px; font-size: 30px; font-weight: bold; font-family: Arial; -webkit-transform: rotate(30deg); transform: rotate(30deg); color: orange; } input[type="checkbox"] + span { opacity: 0; } input[type="checkbox"]:checked + span { opacity: 1; }
效果如图:
18) ::selection选择器
"::selection"伪元素是用来匹配突出显示的文本(改变用鼠标选择文本时的文本背景和颜色)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的。
1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。
2、Firefox 支持替代的 ::-moz-selection。
css代码:
::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; }
19):read-only选择器
用来指定处于只读状态元素的样式。简单理解就是,元素中设置了readonly=’readonly’
readonly 属性规定输入字段为只读。
只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。
readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。
例:通过“:read-only”选择器来设置地址文本框的样式。
html代码:
<form action="#"> <div> <label for="name">姓名:</label> <input type="text" name="name" id="name" placeholder="大漠" /> </div> <div> <label for="address">地址:</label> <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /> </div> </form>
css代码:
form { width: 300px; padding: 10px; border: 1px solid #ccc; margin: 50px auto; } form > div { margin-bottom: 10px; } input[type="text"]{ border: 1px solid orange; padding: 5px; background: #fff; border-radius: 5px; } input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; }
效果:
20):read-write选择器
与:read-only选择器相反,主要用来指定当元素处于非只读状态时的样式。
21) ::before和::after
这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。
例:实现图片阴影效果
效果图:
完整代码:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>before、after</title> <style> .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } .effect{ position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect::before, .effect::after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } </style> </head> <body> <div class="box effect"> <h3>Shadow Effect </h3> </div> </body> </html>
上面代码作用在class名叫.effect上的div的前(before)后(after)都添加一个空元素,然后为这两个空元素添加阴影特效。
为了给box加一个立体且有弧度的效果,仅给box添加box-shadow不足以表现出来,所以,在box前后都添加了一个伪元素(其实两个伪元素是重合的),该伪元素的border- radius设定了弧度,再给伪元素添加box-shadow,因此它的阴影也是有弧度的,但是,效果只需要伪元素的下边缘阴影,因此给伪元素z-index设为-1,所以伪元素除下边缘阴影外的地方都被盖住了。(删掉z-index属性可以看到完整的伪元素)
class="box effect",是类选择器的知识,及表示class=“box”与class="effect"的组合。如果把.effect换成.box效果依然相同,用.effect表示语义更加明白。
CSS3知识点整理(二)----CSS3选择器的更多相关文章
- JS知识点整理(二)
前言 这是对平时的一些读书笔记和理解进行整理的第二部分,第一部分请前往:JS知识点整理(一).本文包含一些易混淆.遗漏的知识点,也会配上一些例子,也许不是很完整,也许还会有点杂,但也许会有你需要的,后 ...
- CSS3知识点整理&&一些demo
css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出 http://codepen ...
- CSS3知识点整理(五)----响应式设计及其他属性
介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...
- CSS3知识点整理(一)----基本样式
(一) 在编写CSS3样式时,不同的浏览器可能需要不同的前缀.它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀 ...
- CSS3知识点整理(三)----变形与动画
一.CSS3中的变形 1)旋转 rotate() rotate()函数通过指定的角度参数使元素相对原点进行旋转. 它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. 如果这个值为正值,元 ...
- CSS3知识点整理(四)----布局样式及其他
包括CSS3多列布局样式.Flexbox伸缩布局.盒子模型等.重点介绍了Flexbox伸缩布局的各种属性用法. 一.多列布局 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给 ...
- CSS基础知识点(二)——选择器
在这一篇中,主要总结一下CSS中的选择器. 参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html CSS中的选择器主要包括 ...
- 干货 Elasticsearch 知识点整理二
目录 root object mate-field 元数据字段 mapping-parameters 动态mapping(dynamic mapping) 核心的数据类型 精确匹配与全文检索 精确匹配 ...
- CSS3 Flex布局整理(二)-容器属性
一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...
随机推荐
- svn第一篇----入门指南
摘要:trunk存放的是主代码,不修改,branch,tag,milestone均是从trunk中衍生的.branch复制trunk中代码用于开发,tag用于存放比较重要的发行版,存放release版 ...
- 10、手把手教你Extjs5(十)自定义模块的设计
从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下 ...
- (简单) HDU 3397 Sequence operation,线段树+区间合并。
Problem Description lxhgww got a sequence contains n characters which are all '0's or '1's. We have ...
- eclipse注释模板设置(未整理)
Window --> Java --> Code Style --> Code Templates --> Comments --> types --> Edit ...
- 解决KVM中鼠标不同步问题
VNCViewer中的鼠标走得总是比本地系统中的鼠标要慢,不同步,往往实体机中的鼠标都移出vnc窗口外边了,虚拟机中的鼠标指针还没移到需要点击的位置,操作起来很不方便. 起初的想法也是配置的问题,就按 ...
- STM8的GPIO驱动
芯片的外设一般按照这么几个流程来进行,GPIO,外部中断,定时器,串口,ADC,IIC,SPI,下面我就按照各个模式来写 首先是GPIO,STM8的GPIO拥有复用功能,这句话告诉我们必然需要配置IO ...
- SpringMVC强大的数据绑定(2)——第六章 注解式控制器详解
SpringMVC强大的数据绑定(2)——第六章 注解式控制器详解 博客分类: 跟开涛学SpringMVC 6.6.2.@RequestParam绑定单个请求参数值 @RequestParam用于 ...
- Java学习(一)
各种原因就开始java开发快一个月了.一直也没有正式记录一下...现在开始..O(∩_∩)O~.... 先小结一下学习以来遇到的几个问题: 1.myeclipse的常用快捷键: F2当鼠标放在一个标记 ...
- WCF不用证书实现验证(messageheader)
上文WCF进阶:将消息正文Base64编码中介绍了实现自定义MessageInspector来记录消息和实现自定义Formatter来改写消息,本文介绍一下在WCF中使用SoapHeader进行验证的 ...
- Jquery的AJAX应用详解
案例一:取得服务端当前时间 简单形式:jQuery对象.load(url),返回结果自动添加到jQuery对象代表的标签中间 <body> 当前时间: <span id=" ...