认识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 ...
随机推荐
- 电商商品规则属性sku 工具类
/** * 商品模块: * 使用:var SKU = sku.init({ id:'sku', item: item, data:data }); * @config item = [{"i ...
- 高性能mysql第三版（文摘）
第1章 mysql架构与历史 1.1处理和存储相分离,用户可以选择合适的存储引擎 1.2并发控制 表锁:开销小 行级锁:开销大 1.3事务 acid特性:原子性,一致性,隔离性,持久性 1.4 多版本 ...
- BZOJ 1001 狼抓兔子 (最小割转化成最短路)
1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec Memory Limit: 162 MBSubmit: 27715 Solved: 7134[Submit][ ...
- CodeForces 681A A Good Contest (水题)
题意:给定 n 个人和before, after的分数,让你找 before 的分数大于等于2400并且before 小于 after. 析:看完题意就知道怎么算了吧..不用说了 #include & ...
- （转）【经验之谈】Git使用之Windows环境下配置
原文地址:http://www.cnblogs.com/xishuai/p/3590434.html 前言 安装 配置 关于git使用的几个问题 后记 关于代码托管,以前用过vss和svn,看博客或论 ...
- CYUSB3014芯片使用EEPROM无法下载固件说明
当使用128KB的EEPROM存储CYUSB3014芯片的固件时,需要注意,不同厂家的EEPROM存储器,其A0.A1.A2功能不一样,在设计时电路也不一样.Microchip对应的128KB的EEP ...
- [SAP]编辑表
SAP中,不能直接修改表的内容,可以用SE16N进行调试打开编辑选项,进行修改. (注:直接修改数据有风险,首先要确认修改数据的关系或做好必要的备份) 1:运行SE16N ,填好表名,参数等. 2:在 ...
- Android-无序广播
在之前的博客,Android-广播概念,中介绍了(广播和广播接收者)可以组件与组件之间进行通讯,有两种类型的广播(无序广播 和 有序广播),这篇博客就来讲解无序广播的代码实现: 无序广播:接收者 同时 ...
- asp.net 错误页面自定义
在我们上网浏览信息的时候,总会有出现404页面的时候,在我们开发的时候也可以自定义这些页面.刚回这次项目中也使用到了,就在网上找到一些方法,今天就把这些方法重新写一遍加深记忆. 在项目的web.con ...
- ASP.NET中Onclick和OnserverClick事件的区别 (转)
对于服务器按钮控件(即<asp:Button>类型的按钮): 服务器响应事件:OnClick 客户端响应属性:OnClientClick 对于html按钮控件(即<input typ ...