认识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 ...
随机推荐
- URL Scheme
[URL Scheme] 可以通过info.plist注册url types来实现程序自定义的协议,以供外部程序调起. NSURL *myURL = [NSURL URLWithString:@&qu ...
- web.xml配置中的log4jRefreshInterval讲解
采用spring框架的项目如何使用log4j在spring中使用log4j,有些方便的地方, 1.动态的改变记录级别和策略,即修改log4j.properties,不需要重启web应用,这需要在web ...
- java并发编程实战：第八章----线程池的使用
一.在任务和执行策略之间隐性耦合 Executor框架将任务的提交和它的执行策略解耦开来.虽然Executor框架为制定和修改执行策略提供了相当大的灵活性,但并非所有的任务都能适用所有的执行策略. 依 ...
- underscore arrays
1._.first():返回array(数组)的第一个元素.传递 n参数将返回数组中从第一个元素开始的n个元素 _.first = _.head = _.take = function(array, ...
- asp.net——Base64加密解密
/// <summary> /// 实现Base64加密解密 /// </summary> public sealed class Base64 { /// <summa ...
- asp.net mvc部分视图的action中获取父级视图信息
RouteData.DataTokens["ParentActionViewContext"]中包含了父级视图的相关信息,如路由等 public ActionResult Chil ...
- 为何会有Python学习计划
近几年感觉自己需要不断充电,从网上找寻技术潮流前端时Python映入眼帘,未来的技术,Python应该很有市场. 于是,以很低的成本从网上找到相关最新学习资料,希望自己未来的路,能坚持与书为伴,不断攀 ...
- 【Qt】Qt在Windows下的开发与调试环境配置
前文已经交待了从源码编译Qt自定义版本.现在可以开始配置一下开发与调试程序并写个Hello World了. 1. IDE 虽然Qt官方有VS插件使我们可以在VisualStudio中开发Qt应用,但我 ...
- C语言多线程编程二
一. 线程通信----事件: 1.一对一模式: #include <stdio.h> #include <stdlib.h> #include <Windows.h> ...
- java爬虫中jsoup的使用
jsoup可以用来解析HTML的内容,其功能非常强大,它可以向javascript那样直接从网页中提取有用的信息 例如1: 从html字符串中解析数据 //直接从字符串中获取 public stati ...