CSS3选择器学习笔记
CSS选择器总结:
一.基本选择器
1.通配选择器:[ * ] 选择文档中所以HTML元素。
*{margin: 0;padding: 0;} /*选择页面中的所有元素并设置margin和padding值为0*/
.mumu *{background:#000;} /*选择类名为mumu的元素下面的所有元素设置背景为黑色*/
2.元素选择器:[ E ] 选择指定类型的HTML元素。
p{color:red;} /*选择p元素*/
3.ID选择器: [ #id ] 选择指定ID属性值为“id”的任意类型元素。
<style>
#div1{width:100px;background:#000;}
</style>
<body>
<div id="div1">1</div>
</body>
4.类选择器: [ .class ] 选择指定class属性值为“class”的任意类型的任意多个元素.
<style>
.mumu{width:100px;background:#000;}
</style>
<body>
<div class="mumu">1</div>
</body>
5.群组选择器: [ selector1,selectorN ] 将每一个选择器匹配的元素集合并.
<style>
.section-1,.section-2,.section-3{background:#000;} /*给三个div定义公用的样式 */
</style>
<body>
<div class="section-1">1</div>
<div class="section-2">2</div>
<div class="section-3">3</div>
</body>
二.层次选择器
1.后代选择器:[ E F ] 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内。
<style>
.div1 div{background:#000;} /*选择div1里面的所有div*/
</style>
<body>
<div class="div1">
<div class="div2">2</div>
<div class="div3">3</div>
</div>
</body>
2.子选择器:[ E>F ] 选择匹配的F元素,且匹配的F元素是所匹配的E元素的直系子元素
<style>
.div1>div{background:#000;} /*选择div1里面的div1,div2和div3,不会选到div*/
</style>
<body>
<div class="div1">
<div class="div2">2</div>
<div class="div3">
<div>4</div>
</div>
</div>
</body>
3.相邻兄弟元素选择器:[ E+F ] 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面
<style>
.div2+p{background:#000;} /*选择div2后面的第一个p元素*/
</style>
<body>
<div class="div1">
<div class="div2">2</div>
<p>p1</p>
<p>p2</p>
</div>
</body>
4.通用选择器: [ E~F ] 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素(E和F是同辈元素,具有相同的父元素)
<style>
.div2~p{background:#000;} /*选择div2后面所有的p元素*/
</style>
<body>
<div class="div1">
<div class="div2">2</div>
<p>1</p>
<p>2</p>
</div>
</body>
三.属性选择器
1. E[attr] 只使用属性名,但没有确定任何属性值
<style type="text/css">
p[id]{background:red;}
p[mumu]{background:blue;} /*将会选择具有[attr]属性的p标签*/
</style>
<body>
<p mumu="zM">1</p>
<p id="xm">2</p>
</body>
2.E[attr=value] 指定属性名,并指定了该属性的属性值
<style type="text/css">
p[mumu=zM]{background:blue;} /*将会选择具有mumu属性且值为zM的p标签*/
</style>
<body>
<p mumu="zM">1</p>
<p mumu="xm">2</p>
</body>
3.E[attr~=value] 指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中只要包含了一个value词就会被选中
<style type="text/css">
p[mumu~=big]{background:blue;}/*选择具有mumu属性且其中一个属性值为big的p标签*/
</style>
<body>
<p mumu="zM big">1</p>
<p mumu="xm">2</p>
</body>
4.E[attr^=value]指定了属性名,并且有属性值,属性值是以value开头的
<style type="text/css">
p[mumu^=x]{background:blue;}/*选择mumu属性以x开头的 p标签*/
</style>
<body>
<p mumu="zM big">1</p>
<p mumu="xm">2</p>
<p mumu="rm">3</p>
</body>
5.E[attr$=value]指定了属性名,并且有属性值,而且属性值是以value结束的
<style type="text/css">
p[mumu$=m]{background:#CC0;}/*选择mumu属性以m结尾的 p标签*/
</style>
<body>
<p mumu="zM big">1</p>
<p mumu="xm">2</p>
<p mumu="rm">3</p>
</body>
6.E[attr*=value]指定了属性名,并且有属性值,而且属值中包含了value
<style type="text/css">
p[mumu*=g]{background:#CC0;}/*选择mumu属性值里包含g的 p标签*/
</style>
<body>
<p mumu="zM big">1</p>
<p mumu="xm">2</p>
<p mumu="gm">3</p>
</body>
7.E[attr|="value"]指定了属性名,并且属性值是value或者以“value-”开头的值(比如说b-cn)
<style type="text/css">
p[mumu|=b]{background:#CC0;}/*选择mumu属性值里以b或者b-开头的 p标签*/
</style>
<body>
<p mumu="b-zM big">1</p>
<p mumu="b-xm">2</p>
<p mumu="gm">3</p>
<p mumu="b">4</p>
</body>
四.伪类选择器
1.动态伪类选择器
<style type="text/css">
E:link /*选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上*/
E:visited /*选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上*/
E:active /*选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上*/
E:hover /*选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover*/
E:focus /*选择匹配的E元素,而且匹配元素获取焦点*/
</style>
2.目标伪类选择器
[ E:target ] 功能:选择匹配E的所有元素,且匹配元素被相关URL指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width:300px;height:200px;background:#000; font:50px/200px "微软雅黑"; color:#fff; text-align:center; display:none;}
div:target{ display:block;}
</style>
</head>
<body>
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
3.否定伪类选择器
[ E:not(s) ] 表示匹配所有除元素F外的E元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1:not(.h2){ background:Red;}
</style>
</head>
<body>
<h1>h1</h1>
<h1 class="h2">h1</h1>
<h1>h1</h1>
</body>
</html>
4.状态伪类选择器
<style>
E:disabled; /*表示不可点击的表单控件*/
E:enabled; /*表示可点击的表单控件*/
E:checked; /*表示已选中的checkbox或radio*/
</style>
5.结构伪类选择器
E:nth-child(n) 表示E父元素中的第n个字节点(从前往后数),注意:CSS3中计数是从1开始,n可运算
<style>
E:nth-child(odd){background:red}/*匹配奇数行或者nth-child(2n+1)*/
E:nth-child(even){background:red}/*匹配偶数行或者nth-child(2n)*/
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body *:nth-child(2){background:red;}/*
p:nth-child(2){background:red;}会没有变化
因为:p:nth-child(2) 找p标签父级下的第二个子元素,并且这个元素还的是p标签
*/
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p>p4</p>
<p>p5</p>
</body>
</html>
E:nth-last-child(n) 表示E父元素中的第n个字节点,从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点,且类型为E,从前往后计算
E:nth-last-of-type(n) 表示E父元素中的第n个字节点,且类型为E,从后向前计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:nth-of-type(2){background:red;}/*找p标签父级下的第二个p元素*/
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p>p4</p>
<p>p5</p>
</body>
</html>
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
:first-child==:nth-child(1)
:last-child==:nth-last-child(1)
:first-of-type==nth-of-type(1)
:last-of-type==nth-last-of-type(1)
E:empty 表示E元素中没有子节点。注意:子节点包含文本节点
<style>
p{height:30px;border:1px solid #000;}
p:empty{background:red;}
</style>
</head>
<body>
<p></p>//it
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
</body>
E:only-child 表示E元素中只有一个子节点。注意:子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点
五.伪元素
E:first-line 匹配E元素中的第一行文本
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{width:300px;border:1px solid #000;font:12px/30px "宋体";padding:10px;}
p:first-line{ background:red;}
p:first-letter{ font-size:30px;}
p::selection{background:#ccc;color:#690;}
p:before{ content:"before伪元素"; display:block; border:1px solid #000;}
p:after{ content:"after伪元素"; display:block; border:1px solid #000;}
</style>
</head>
<body>
<p>两个“::”和一个“:”css3中主要用来区分伪类和伪元素,到目前来说,这两种方式都是被接受的</p>
</body>
</html>
CSS3选择器学习笔记的更多相关文章
- CSS3 Animation学习笔记
Internet Explorer 9,以及更早的版本, 不支持 @keyframe 规则或 animation 属性. Internet Explorer 10.Firefox 以及 Opera 支 ...
- Jquery伪选择器学习笔记
对于我这个半路出家的前端,使用jquery已经很长时间了,对于选择器,一直都局限在id,class,element选择器.每次写一个元素都得想一个id,一个页面写下来想id名都想的累的慌.最近手头项目 ...
- css3动画学习笔记
具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...
- 《The Book of CSS3》学习笔记
一.浏览器前缀 E{ -moz-name : value; /* Firefox */ -ms-name : value; /* IE */ -o-name : value; /* Opera */ ...
- css3的学习笔记1
一. 边框 1. border-color border-color是设置边框的颜色.包括border-top-color,border-left-color,border-right-colo ...
- css3 3d学习笔记
几个属性: -webkit-perspective:0;景深(默认0), -webkit-perspective-origin:center center;景深基点(默认中间), -webkit-tr ...
- CSS3+HTML5学习笔记(1)
box内阴影: -moz-box-shadow:inset 30px #; -webkit-box-shadow:inset 30px #; box-shadow:inset 30px #; 多重文字 ...
- css 选择器 (学习笔记)
参考 http://zachary-guo.iteye.com/blog/605116 1. div+p 选择紧接在 <div> 元素之后的所有 <p> 元素.解释 : fi ...
- css权威指南学习笔记 —— css选择器
1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器: p>a a是直接是p的 ...
随机推荐
- 首页banner特效
<link href="css/swiper.min.css" rel="stylesheet" /> <script src=" ...
- CSS3实现轮播图效果
CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...
- CentOS编译安装lamp
LAMP环境搭建(编译安装CentOS+httpd2.2+mysql5.5+php5.4) 首先准备以下压缩包 <ignore_js_op> (1)编译安装apache 1.配置防火墙,开 ...
- .net IL 指令速查
名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...
- mysql事件调度器定时删除binlog
MySQL5.1.6起Mysql增加了事件调度器(Event Scheduler),可以用做定时执行某些特定任务,来取代原先只能由Linux操作系统的计划任务来执行的工作MySQL的事件调度器可以精确 ...
- php __clone需要注意的问题
当一个对象的属性是另外一个对象时,当有一个对象复制该对象时,当复制到这个属性(一个对象)时,只复制这个属性(对象)的引用,而不复制引用的对象. class Account{ public $bal ...
- python解析xml模块封装代码
在python中解析xml文件的模块用法,以及对模块封装的方法.原文转自:http://www.jbxue.com/article/16586.html 有如下的xml文件:<?xml vers ...
- (转)Android属性设置android:noHistory="true"
设置 android:noHistory="true"后,该Activity在statck中不留历史痕迹.默认的值是false. 举例说明,假设有三个Activity分别是:A,B ...
- Python核心编程--学习笔记--6--序列(下)列表、元组
11 列表 类似于C语言的数组,但是列表可以包含不同类型的任意对象.列表是可变类型. 创建列表——手动赋值.工厂函数: >>> aList = [12, 'abc'] >> ...
- [笔记]--在Windows下配置Git
安装就不多说了: 1.ls不能显示中文目录 解决办法:在git/etc/git-completion.bash中增加一行: alias ls='ls --show-control-chars --co ...