CSS3选择器01—CSS2.1部分选择器
这篇文章主要用于存储CSS以及CSS3的选择器部分知识,以便日后查阅及记忆.
该内容分为两部分,第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。
在开始之前,先简单介绍一下选择器,选择器的作用就是定位我们想要样式化的网页HTML元素。选择器可以分为以下几种类型。
1、简单选择器,通过元素类型,class或id匹配一个或多个元素。
2、属性选择器,通过属性/属性值 匹配一个或多个元素。
3、伪类,匹配处于确定状态的一个或多个元素。(比如鼠标指针悬停的元素、当前被选中或未被选中的复选框、元素是DOM树中一父节点的第一个子节点等)
4、伪元素,匹配处于相关的确定位置的一个或多个元素。(例如每个段落的第一个字,或者某个元素之前生成的内容)
5、组合器,这里不仅仅是选择器本身,还有以有效的方式组合两个或者更多的选择器用于非常特定的选择的方法。
6、多用选择器,这些也不是单独的选择器。这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面, 以将一组声明应用于由这些选择器选择的所有元素。
那么下面就具体的选择器来一一做一定的解释,有不足的地方还希望不吝赐教。嘿嘿。
一.基本选择器:
1:*,通配符,匹配所有元素。
*{
padding:;
margin:;
} /*个人建议,请不要在你的CSS代码中出现通配符,通配符(*)是一种效率极低甚至会有在大型网站中使用导致页面渲染变慢的可能。所以,请尽可能的不要使用。*/
2:#id,id选择器,匹配所有id属性为"id"的元素,id属性具有唯一性。
#text {
font-size: 16px;
}
/*一个ID名称在文件中必须是唯一的,若是ID名称重复,则可能会出现不可预知的情况,所以一定要避免ID名称的重复*/
3:.class,class选择器,匹配所有class属性中包含"class"的元素。文档中的多个元素可以具有相同的类名,而单个元素可以有多个类名(以空格分开多个类名的形式书写)
.demo{
width: 100px;
height: 100px;
background: red;
}
4:E(element),标签选择器,匹配所有使用E标签的元素。
span{
color: red;
background: pink;
font-style: 20px;
}
二.多元素组合选择器:
5:E,F,多元素选择器,匹配所有E元素和F元素,E和F之间用逗号(,)分隔。
span,p,div{
color: red;
background: pink;
font-style: 20px;
}
6:E F,后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔。
.demo .text{
color: gray;
}
7:E > F,子元素选择器,匹配所有E元素的子元素F。
.demo>.text{
color: gray;
}
8:E + F,毗邻元素选择器,匹配所有紧随E元素之后的同级元素F。
.demo + .text{
color: gray;
}
三.属性选择器:
9:E[att],匹配所有具有att属性的E元素,不考虑它的值。(E在此处可以省略,如“[checked]”,下同)
[title]{
color:red;
}
10:E[att=val],匹配所有att属性等于"val"的元素。
[title=name]{
border:5px solid blue;
}
img[title=bgimg]{
width:100px;
height:100px;
}
11:E[att~=val],匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素。
[title~=hello]{
color:red;
}
12:E[att |= val],匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以"val"开头的E元素。(主要用于lang属性,比如"en"、"en-us"、"en-gb"等等)
[lang|=en] {
color:red;
}
四.伪类选择器:
13:E:first-child,匹配父元素的第一个子元素。
.demo:first-child{
color: pink;
}
14:E:link,匹配所有未被点击的链接。
.demo:link{
font-weight: ;
}
15:E:visited,匹配所有已被点击的链接。
.demo:visited{
font-weight: ;
}
16:E:active,匹配鼠标已经在其上按下,还没有释放的E元素。
.demo:active{
font-weight: ;
}
17:E:hover,匹配鼠标悬停其上的E元素。
.demo:hover{
color: orange;
font-weight:;
}
18:E:focus,匹配获得当前焦点的E元素。
input:focus{
color:red;
}
19:E:lang(c),匹配lang属性等于c的元素。
html:lang(zh){
color:lime;
background:red;
}
:lang(en) > span{
color:pink;
}
五.伪元素选择器:
20:E:first-line,匹配E元素的第一行。
.demo:first-line{
color:red;
}
21:E:first-letter,匹配E元素的第一个字母。
.demo:first-letter{
font-weight: border;
}
22:E:before,在E元素之前插入生成的内容。
.num:before{
content:"(" attr(href) ")", }
23:E:after,在E元素之后插入生成的内容。
.clearfix:after {
content: "";
display: block;
height: ;
clear: both;
}
/*after清除浮动,这里只对after和before的选择器写法做一个简单说明,并不具体涉及属性及其用法*/
最后想说,这些东西只是简单的罗列和解释,算是方便在使用的时候快速查找,如果想要更深入的了解还需要的更多的练习和代码量,就算是最基本的选择器知识,其实也要比这些多得多。只是还有很多用处并不是特别多,比如上面的E:lang(c),E:visited,E:active等,还有很多未写在文章内的,如果想要更深入的学习,大家可以去下面的相关链接查看。
参考:css选择器笔记,30个你必须熟记的css选择器,MDN-docs-选择器介绍,HTML5和CSS3权威指南(第3版下册-庐陵牛)第十九章,before和after伪元素的用法。
CSS3选择器01—CSS2.1部分选择器的更多相关文章
- css3 伪元素和伪类选择器详解
转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- CSS2样式中选择器的介绍
这里主要是对css2中的选择器进行了一下总结!
- css3类选择器之结合元素选择器和多类选择器
css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...
- css3 :enabled与:disabled伪类选择器
css :enabled和:disabled伪类选择器 在Web表单中,有些表单元素(如输入框.密码框.复选框等)有“可用”和“不可用”这2种状态.默认情况下,这些表单元素都处在可用状态. 在CSS3 ...
- 如何使用CSS3中的结构伪类选择器和伪元素选择器
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...
- JQuery -- 介绍,选择器及其示例, 基本选择器,层次选择器,过滤选择器,表单选择器
1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...
- python 之 前端开发(基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器)
11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
随机推荐
- mysql数据库给局域网用户所有的权限
ERROR 1698 (28000): Access denied for user 'root'@'localhost' 刚装好的服务端时必须用 sudo命令才能登录,不然就报1698的错误 然后就 ...
- java基础-多线程应用案例展示
java基础-多线程应用案例展示 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.两只熊,100只蜜蜂,蜜蜂每次生产的蜂蜜量是1,罐子的容量是30,熊在罐子的蜂蜜量达到20的时候 ...
- weblogic11G 修改密码
weblogic11的登录密码修改方法: 1. 登陆到weblogic后选中domain structure下的security Realms(如图一) (图一) 详情如图二: (图二) 2. 双 ...
- [转载]在Windows下搭建Android开发环境
http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html 在Windows下搭建Android开发环境 | 浏览:30780 | 更 ...
- Linux - awk 文本处理工具三
AWK 文件打印匹配 格式示例 awk '/Tom/' file # 打印匹配到得行 awk '/^Tom/{print $1}' # 匹配Tom开头的行 打印第一个字段 awk '$1 !~ /ly ...
- vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
- weblogica
- 第一篇:初始Golang
Golang简介 编程语言已经非常多,偏性能敏感的编译型语言有 C.C++.Java.C#.Delphi和Objective-C 等,偏快速业务开发的动态解析型语言有PHP.Python.Perl.R ...
- umount /mnt/cdrom
这是因为有程序正在访问这个设备,最简单的办法就是让访问该设备的程序退出以后再umount.可能有时候用户搞不清除究竟是什么程序在访问设备,如果用户不急着umount,则可以用: umount -l / ...
- MySQL 5.7在线设置复制过滤【转】
转自 MySQL 5.7在线设置复制过滤 - yayun - 博客园 https://www.cnblogs.com/gomysql/p/4991197.html 5.7也GA了,有许多新的特性,其中 ...