CSS3学习笔记(1)-CSS3选择器
p{
font-size: 15px; text-indent: 2em;
}
.alexrootdiv>div{
background: #eeeeee; border: 1px solid #aaa; width: 99%; padding: 5px; margin: 1em 0 1em 0;
}
.alexrootdiv>div>p:first-of-type{
font-size: 18px; font-weight: bold; color: red;
}
.alexrootdiv span{
color:blue;font-weight:bold;
}
.alexrootdiv table{
margin-top:10px;border-collapse:collapse;border:1px solid #aaa;width:100%;
}
.alexrootdiv table th{
vertical-align:baseline;padding:5px 15px 5px 6px;background-color:#d5d5d5;border:1px solid #aaa;text-align:left;
}
.alexrootdiv table td{
vertical-align:text-top;padding:6px 15px 6px 6px;background-color:#efefef;border:1px solid #aaa;
}
.attentationp{
font-size: 15px; text-indent: 2em; background: #ee0; color: red; font-weight: bold;
}
-->
CSS3与CSS2相比发生了很大的变化，CSS3的亮点功能包括实现圆角、阴影、新的flex伸缩布局模型、多列布局模型、填充色的渐变、2D变形(位移、缩放、旋转、倾斜)、3D变形、动画(transition过渡动画、animation关键帧动画)等。看到这些字眼，你实际上已经可以深深感受到CSS3的野心，通过这些东西基本上都可以做出很棒的多媒体演示了，flash、Powerpoint制作演示也无外乎这些东西而已！
确实如此，CSS从CSS3开始，已经从单纯的实现静态页面元素布局美化之中超脱出来，向静态页面元素的互动进军，我们可以不使用Javascript即可实现很多有意思的动画效果。接下来我将这一段时间以来所学CSS3的内容按模块整理出来，首先整理的部分是CSS3的选择器。
之所以首先整理选择器，是因为在CSS3中写入样式代码时，首先需要确定的就是选择什么标签进行格式设置。CSS的选择器非常丰富，它不仅可以被用在CSS中，还可以被应用到很多场合，比如JQuery、D3、Html Canvas绘图中。因而，使用好CSS的选择器，包括CSS3新增的选择器非常重要。CSS3的选择器可以大致分内五大类别：基本选择器、层次选择器、伪类选择器、伪元素以及属性选择器。
基本选择器
基本选择器是使用最频繁的选择器，早在CSS1版本就已经被定义。
| 选择器 | 类型 | 描述 | 实例 |
|---|---|---|---|
| * | 通配选择器 | 选择文档中所有的HTML元素 | *{margin:0;padding:0;} |
| div、p、span等标签名 | 元素选择器 | 选择指定标签对应的HTML元素 | div{float:left;} |
| #id | ID选择器 | 选择ID属性为"id"的任意HTML元素 | #firstDiv{background:gray;} |
| .classname | 类别选择器 | 选择class属性为"classname"的任意HTML元素 | .demo{border:1px solid #ccc;} |
| selector1,selector2 | 群组选择器 | 选择由selector1和selector2选择器选择元素的组合后的集合 |
多类选择器：该选择器是类选择器使用的一个特殊方法，我们可以为我们的页面元素设置一个多类class属性，其属性间用空格分割，代码参考如下：
<style>
.important{...}
.title{...}
.item{...}
.important.item.title{...}
</style> <ul class="clearfix demo">
<li class="important item title">important</li>
<li class="important itemeven">important</li>
<li class="important itemodd">important</li>
</ul>
以上代码中多个类选择器内部的设置我省略掉了，只是通过代码来说明多类选择器的应用场合及使用方法。
层次选择器
层次选择器通过HTMl的DOM元素间的层次关系获取定位页面元素，其层次关系分为后代、父子、兄弟关系，其中兄弟关系又分相邻兄弟、通用兄弟关系。
| 选择器 | 类型 | 描述 | 实例 |
|---|---|---|---|
| A B | 后代选择器 | 选择包含在A元素中所有的B元素，A元素是B元素的祖宗 | div p{text-indent:2em;} |
| A>B | 子选择器 | 选择A元素下一层中所有的B元素，A元素是B元素的父亲 | div>p{text-indent:2em;} |
| A+B | 相邻兄弟选择器 | 选择紧接在A元素后，与A元素同层次的一个B元素 | |
| A~B | 通用兄弟选择器 | 选择在A元素后，与A元素同层次的所有B元素 |
伪类选择器
伪类选择器又分为六种：动态伪类选择器、目标伪类选择器、语言伪类选择器、状态伪类选择器、结构伪类选择器和否定伪类选择器
| 选择器 | 类型 | 描述 | 实例 |
|---|---|---|---|
| A:link | 动态伪类选择器 | 选择所有A元素，且这些元素定义了超链接并且还未被访问过 | a:link{} |
| A:visited | 同上 | 选择所有A元素，且这些元素被定义了超链接并且已被访问过 | |
| A:active | 同上 | 选择所有A元素，且这些元素被激活 | |
| A:hover | 同上 | 选择所有A元素，且鼠标停留在当前A元素上 | |
| A:focus | 同上 | 选择所有A元素，且这些A元素当前获取了焦点 | |
| A:target | 目标伪类选择器 | 选择所有A元素，且A元素被相关的URL所指向 | |
| A:lang(language) | 语言伪类选择器 | 选择所有A元素，且A元素被指定了lang属性，其属性值为"language" | |
| A:checked | 状态伪类选择器 | 选择复选或单选按钮，且其处于被选中状态 | |
| A:enabled | 同上 | 选择所有被启用的表单元素 | |
| A:disabled | 同上 | 选择所有被禁用的表单元素 | |
| A:not(B) | 否定伪类选择器 | 找到不是B的所有A元素 |
结构伪类选择器比较多，以下我再用一个表格单独来显示：
| 选择器 | 描述 | 实例 |
|---|---|---|
| A:first-child | 选择一个A元素，且A元素是其父元素中的第一个子元素 | |
| A:last-child | 选择一个A元素，且A元素是其父元素中的最后一个子元素 | |
| A:root | 选择A元素所在文档的根元素，一般是<html>标签 | |
| A B:nth-child(n) | 选择A元素中的第n个子元素，且这个子元素是B元素 | |
| A B:nth-last-child(n) | 选择A元素中的倒数第n个子元素，且这个元素是B元素 | |
| A:nth-of-type(n) | 选择一个A元素，且A元素是父元素中所有A元素的第n个 | |
| A:nth-last-of-type(n) | 选择一个A元素，且A元素是父元素中所有A元素的倒数第n个 | |
| A:first-of-type | 选择一个A元素，且A元素是父元素中所有A元素的第1个 | |
| A:last-of-type | 选择一个A元素，且A元素是父元素中所有A元素的倒数第1个 | |
| A:only-child | 选择一个A元素，且A元素在父元素中是唯一的一个元素 | |
| A:only-of-type | 选择一个A元素，且A元素在父元素中是唯一的一个A元素 | |
| A:empty | 选择A元素，且A元素不包含任何子元素 |
伪元素
伪元素都带有2个冒号，其与伪类选择器存在差异，需要特别注意。
| 选择器 | 描述 | 实例 |
|---|---|---|
| A::first-letter | 选择A元素文字内容中第一个字母或文字 | |
| A::first-line | 选择A元素中第一行文字 | |
| A::before | 选择A元素的开始位置，使用时需要指定content属性 | |
| A::after | 选择A元素的结束位置，使用时需要指定content属性 | |
| A::selection | 选择A元素当前选择文字内容，只能指定background、color属性 |
属性选择器
属性选择器基于元素的属性进行查找。
| 选择器 | 描述 | 实例 |
|---|---|---|
| A[attr] | 选择具有属性"attr"的所有A元素 | |
| A[attr=val] | 选择"attr"属性值等于"val"的所有A元素 | |
| A[attr|=val] | 选择"attr"属性值含有"val"或者以"val-"开头的所有A元素 | |
| A[attr~=val] | 选择"attr"属性值含有"val"这个单词(单词与单词间以空格分开)的所有A元素 | |
| A[attr*=val] | 选择"attr"属性值任意位置含有"val"的所有A元素 | |
| A[attr^=val] | 选择"attr"属性值以"val"开头的所有A元素 | |
| A[attr$=val] | 选择"attr"属性值以"val"结尾的所有A元素 |
CSS3学习笔记(1)-CSS3选择器的更多相关文章
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- CSS3学习笔记(4)-CSS3函数
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- HTML5移动开发学习笔记之CSS3基础学习
CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...
- HTML5+CSS3学习笔记（一）
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
- CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
- css3学习笔记三
css3有些特殊的元素选择器这和jquery相似.效果图如下
- HTML5+CSS3学习笔记（一） 概述
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
随机推荐
- 用sqlyog迁移mysql数据库
本人大学大学基本就学怎么打游戏了,游戏玩的还不太好,大三的时候突然觉醒报了某培训,然后就出来工作了.这导致许多东西很不扎实,都是在工作中慢慢摸索.今天处理了一个关于mysql数据库迁移的问题,好好总结 ...
- 一步一步在Windows中使用MyCat负载均衡 上篇
传统关系型数据库的分布式开发通常需要自己做,不仅耗时耗力而且效果不是很理想,当想快速搭建时,最初想到的是看有没有第三方,网上牛人还是很多的,做得比较好的其中之一Mycat,它是开源的分布式数据库系统, ...
- 微信小程序 网络请求之re.request 和那些坑
微信小程序有四种网络请求类型,下面只详细介绍普通HTTPS请求(wx.request) 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...
- ASP.NET使用WebApi接口实现与Android客户端的交互（图片或字符串的接收与回传）
最近在使用WebApi 做下记录 //此接口实现接收Android客户端上传的JSON格式的信息,并返回"nihao"字符串 [Route("ReceiveData& ...
- JAVA三大特性之三——多态
作为JAVA的三大特性之一,多态性是很多人都没有弄清楚的一个重要特性,今天我就来从我所理解的角度来说一下. 首先,从他的字面意思来理解,多态,从其字面来理解就是多种形态,多种表现形式.根据这些,我最能 ...
- 推荐一本书：清华出版的《Modbus软件开发实战指南》
前言: 最近在研究Modbus开发,如果只是简单的了解了一些modbus基础知识,但是不够系统和全面. 其实,modbus虽然比较简单,但是如果不注意有很多坑,特别是寄存器的位数,大小端处理,浮点数, ...
- div模拟table
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>div模 ...
- [HDU2037]贪心入门
今年暑假不AC Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- wemall doraemon中Android app商城系统向指定URL发送GET方法的请求代码
URL的openConnection()方法将返回一个URLConnection对象,该对象表示应用程序和 URL 之间的通信链接.程序可以通过URLConnection实例向该URL发送请求.读取U ...
- 3097: Hash Killer I
3097: Hash Killer I Time Limit: 5 Sec Memory Limit: 128 MBSec Special JudgeSubmit: 425 Solved: 15 ...