认识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 ...
随机推荐
- windows 下mongodb 副本建创建
步骤: 一.安装mongodb 二.将安装的mongodb 复制2份 如图: 三.修改配置文件 dbpath=C:\mongofuben\zhu\data logpath=C:\mongofuben\ ...
- serialVersionUID的作用以及IDEA、Eclipse如何自动生成serialVersionUID
说到serialVersionUID,首先要讲讲序列化. 序列化: 序列化可以将一个java对象以二进制流的方式在网络中传输并且可以被持久化到数据库.文件系统中,反序列化则是可以把之前持久化在数据库或 ...
- IntelliJ IDEA 2017版 SpringBoot的Json字符串返回
一.说明 SpringBoot框架已经自动封装好json字符串解析,所以我们只需要用它的注解来返回操作就可以了. 二.实战 1.书写一个实体类User,设置属性id和name package com. ...
- Qracle 11g 插图安装
1.下载两个包 然后把包二的内容放入包一里 2.管理员身份运行setup 3.选择去掉复选框 4.下一步,然后选择是 5.选择第一项,然后选择下一步 6.个人使用选桌面类 7.不要放在C盘中 8.设置 ...
- tab切换代码优化
上次的tab切换的代码里面有很多重复的代码,需要做做优化,把重复的代码用函数封装起来调用. 优化前: <script> //获取id封装成一个函数$()方便调用 function $(id ...
- UVa 1599 Ideal Path （两次BFS）
题意:给出n个点,m条边的无向图,每条边有一种颜色,求从结点1到结点n颜色字典序最小的最短路径. 析:首先这是一个最短路径问题,应该是BFS,因为要保证是路径最短,还要考虑字典序,感觉挺麻烦的,并不好 ...
- 基于jCOM搭建Java－微软信息桥梁(上)
本文将重点讨论BEA的Java/COM解决方案,是全文的第一部分,细致分析BEA提供的Java/COM互操作解决方案—jCOM的实现原理. 一.jCOM简介 据Gartner的研究分析,在名列全球前1 ...
- delphi中，write和read的用法？什么时候需要用？
如你所说,在控件或者类的属性中,read 表示 读取,write 则表示设置.比如在类中:TTestClass = (Class)privateFOrderCode:String;publicprop ...
- 让FIREDAC记录数据库的异常日志
默认FIREDAC不会记录数据库的异常. 比如典型的,提交的时候,非空字段没有给值. 某些人还以为FIREDAC不能捕获数据库的异常,其实FIREDAC是可以捕获并处理数据库的异常事件的. 方法异常简 ...
- Android-MediaRecorder录像机(视频)
在上一篇博客,Android-MediaRecorder录制音频,中讲解了使用Android API MediaRecorder 刻录音频,这篇博客主要是介绍 使用MediaRecorder刻录(视频 ...