认识CSS3新增选择器和样式
前端之HTML5，CSS3（二）
CSS3新增选择器和样式
CSS3新增选择器
结构伪类选择器
:first-child：选取父元素中的第一个子元素的指定选择器
:last-child：选取父元素中的最后一个子元素的指定选择器
:nth-child(n)：选取父元素中的第n个子元素的指定选择器，n取小于等于子元素个数的正整数。当n取n值表示选取父元素中所有子元素；n取2n表示选取父元素中所有偶数的子元素，等同于:nth-child(odd)；n取2n+1表示选取父元素中所有奇数的子元素，等同于:nth-child(odd)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器-测试</title>
<style type="text/css">
li {
list-style: none;
}
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
li:nth-child(4) {
color: orange;
font-size: 16px;
}
/*li:nth-child(n) { 选取父元素中的所有元素
background-color: pink;
}
li:nth-child(2n) { 选取父元素中的偶数元素
background-color: white;
}
li:nth-child(2n+1) { 选取父元素中的奇数元素
background-color: yellow;
}*/
</style>
</head>
<body>
<ul>
<li>C</li>
<li>java</li>
<li>python</li>
<li>C++</li>
<li>javascript</li>
<li>php</li>
<li>ruby</li>
</ul>
</body>
</html>
效果
属性选择器
基本语法：标签[attribute] {css}，表示选取某一标签中带有某种属性的所有元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器-测试</title>
<style type="text/css">
li {
list-style: none;
}
li[class] { /*选取li标签中带有class属性的所有元素*/
color: red;
}
</style>
</head>
<body>
<ul>
<li class="c">C</li>
<li>java</li>
<li>python</li>
<li>C++</li>
<li class="js">javascript</li>
<li>php</li>
<li>ruby</li>
</ul>
</body>
</html>
效果
属性选择器中属性可以赋值，如div[class=demo]等同于类选择器.demo，使用div[class^=start]表示class属性值以start开头的元素，div[class$=end]表示class属性值以end结尾的元素，结合正则表达式更容易理解。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器-测试</title>
<style type="text/css">
li {
list-style: none;
}
li[class^=j] { /*选取li标签中带有class属性的所有元素*/
color: red;
}
li[class$=p] {
color: blue;
}
</style>
</head>
<body>
<ul>
<li class="c">C</li>
<li class="java">java</li>
<li class="p">python</li>
<li>C++</li>
<li class="js">javascript</li>
<li class="php">php</li>
<li>ruby</li>
</ul>
</body>
</html>
效果
伪元素选择器
基本语法：标签::伪元素 {css}，表示按照伪元素的规则选取标签内的内容元素。如p::first-letter表示选取p标签内内容的第一个单词，P::first-line表示选取p标签内内容的第一行，p::selection表示改变选取p标签内容的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器-测试</title>
<style type="text/css">
p::first-letter {
font-size: 16px;
}
p::first-line {
color: red;
}
p::selection {
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<p>有时我会想，也许最好的生活方式便是将每一天当做自己的末日。用这样的态度去生活，生命的价值方可以得以彰显。我们本应纯良知恩、满怀激情地过好每一天，然而一日循着一日，一月接着一月，一年更似一年，这些品质往往被时间冲淡。我常想，假如上帝给我三天光明，我最想看什么呢？或者我将怎样享受这份幸福呢？当我这样想的时候，也请你顺便怎样想象一下吧，请想想这个问题，假定你也只有三天光明，那么你会怎样使用你的眼睛呢？你最想让你的目光停留在什么地方？
</p>
</body>
</html>
效果
::before和::after：表示选取标签内的内容之前和之后的位置。before和after伪元素必须在样式中添加content属性，表示在选取标签内的内容之前或者之后添加content属性的属性值。需要注意before和after添加的content属性值是包含在标签内的，而且是以行内元素的形式存在的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器-测试</title>
<style type="text/css">
div::before {
content: "歌曲：";
}
div::after {
content: "-于果";
}
</style>
</head>
<body>
<div>
侧脸
</div>
</body>
</html>
效果
利用伪元素::after和::before添加图标字体的方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素添加图标字体-测试</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hrstq9');
src: url('fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hrstq9') format('truetype'),
url('fonts/icomoon.woff?hrstq9') format('woff'),
url('fonts/icomoon.svg?hrstq9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
div::after {
content: "\e947";
}
div {
font-family: 'icomoon';
}
</style>
</head>
<body>
<div></div>
</body>
</html>
其中content属性值为：
CSS3盒子模型
css2中盒子模型，添加padding或者border会改变盒子自身的大小，css3中添加box-sizing:border-box，盒子大小不会发生改变，盒子的内容大小会适当缩减。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3盒子模型-测试</title>
<style>
/*css2盒子模型*/
div {
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid skyblue;
background-color: lightgreen;
/*box-sizing: border-box;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3盒子模型-测试</title>
<style>
/*css3盒子模型*/
div {
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid skyblue;
background-color: lightgreen;
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果
注意：当指定box-sizing:content-box，即为css2盒子模型。
有意思的小实例
实例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*图片鼠标经过外加边框，不改变盒子大小*/
div {
width: 632px;
height: 340px;
position: relative;
border-radius: 10px;
overflow: hidden;
}
div:hover::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 20px solid rgba(255, 255, 255, 0.5);
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<img src="mi.jpg" alt="">
</div>
</body>
</html>
认识CSS3新增选择器和样式的更多相关文章
- CSS3 新增选择器
CSS3 新增选择器 结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 ...
- CSS系列：CSS3新增选择器
1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...
- CSS选择器及CSS3新增选择器
转自:http://www.cnblogs.com/libingql/p/4375354.html 1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选 ...
- 利用css3新增选择器制作背景切换
之前写css3的时间都是捡项目需要的来用,没有系统的学习过,这几天好好的补了一下css3的知识,真的获益匪浅!觉得新增的那些选择器是有用至极的!今天就来所这几天的所学做一个点击标签切换背景的效果,是纯 ...
- css3新增选择器
1. img[alt]:匹配页面标签中任意一个含有alt属性的标签 2. 匹配开头:img[alt^="film"] 匹配包含内容:img[alt*="film" ...
- CSS3–1.css3 新增选择器
1.后代级别选择器 2.同辈级别选择器 3.伪类选择器 4.属性选择器 5.UI伪类选择器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- CSS3新增选择器：伪元素选择器
一. ::first-letter 第一个字 二. ::first-line 第一行(以浏览器为准的第一行) 三. ::selection 被选中的字行(鼠标选中的字段)只能向 ::selectio ...
- CSS3 新增选择器：伪类选择器和属性选择器
一.结构(位置)伪类选择器( : ) 1.:first-child 2.:last-child 3.:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) &l ...
- CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画
---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...
随机推荐
- centos环境下输入命令不能有中文那么我怎么插入中文数据到数据库
centos环境下输入命令不能有中文那么我怎么插入中文数据到数据库 如下图: 首先查看是否安装了中文语言支持组件 yum grouplist 没有的话安装 yum install Chinese Su ...
- 布局分析002：入门级的CSS导航弹出菜单
这种弹出菜单非常有意思,也有记录的意义,甚至可以说,掌握了这种弹出菜单,基本上CSS掌握的差不多. 主要涉及下面三个重要知识: CSS的继承性质. relative absolute定位. 子选择符& ...
- leancloud 云引擎
可以部署网站的云端,云代码的升级版.
- Python学习-13.Python的输入输出（二）
在Python中,读取文件使用open函数 file=open(r'E:\temp\test.txt','r') var = file.read() print(var) file.close() 第 ...
- 对Integer类中的私有IntegerCache缓存类的一点记录
对Integer类中的私有IntegerCache缓存类的一点记录 // Integer类有内部缓存,存贮着-128 到 127. // 所以,每个使用这些数字的变量都指向同一个缓存数据 // 因此可 ...
- Windows服务器管理与优化
一.服务器自动重启windows服务器运行时间长了,内存会爆满,比如数据库会缓存大量的数量,IIS进程也会缓存数据而没有及时释放.这样需要定时重启服务器来释放内存. 创建任务计划,如在 每周一/周三/ ...
- SQL查询速度慢的原因分析和解决方案
SQL查询速度慢的原因分析和解决方案 查询速度慢的原因很多,常见如下几种: 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O吞吐量小,形成了瓶颈效应. 3.没有创建 ...
- Beginning Asp.Net Security 读书笔记-----XSS
几个月前通过Veracode对代码进行动态和静态安全扫描,扫出了数以千计的安全bug,基本上都是top 10的,安全漏洞. 其中CWE80,CWE601数量最多.具体CWE的定义可参考http://c ...
- mysql--数据库的简单认识
一.数据库的简单认识 1.数据库 1.数据库,简而言之可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据运行新增. 截取.更新.删除等操作.所谓“数据库”系以一定方式储存在一起.能予多 ...
- 【ocp-12c】最新Oracle OCP-071考试题库（44题）
44.(9-12)choose all that apply View the Exhibit and examine the details of the ORDER_ITEMS table. Ev ...