css3选择器 以及当天知道的东西
10.25日
伪类:a:link{}未访问的链接
a:visited{}已访问的链接
a:hover{}鼠标移动到链接上
a:active{}选定的链接
注:a:hover必须是置于a:link和 a:visited之后,才是有效的。
a:active必须置于a:hover之后,才是有效的
position:relative 相对定位
absolute 绝对定位
光标样式:(cursor)
<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p>
<div style="cursor:auto"> Auto值,浏览器设置的光标。</div>
<div style="cursor:crosshair"> Crosshair值,光标呈现为十字线。</div>
<div style="cursor:default"> Default值,默认光标(通常是一个箭头)。</div>
<div style="cursor:pointer"> Pointer值,光标呈现为指示链接的指针(一只手)</div>
<div style="cursor:move"> Move值,光标指示某对象可被移动。</div>
<div style="cursor:e-resize"> e-resize值,光标指示矩形框的边缘可被向右(东)移动。</div>
<div style="cursor:ne-resize"> ne-resize值,光标指示矩形框的边缘可被向上及向右移动(北/东)。</div>
<div style="cursor:nw-resize"> nw-resize值,光标指示矩形框的边缘可被向上及向左移动(北/西)。</div>
<div style="cursor:n-resize"> n-resize值,光标指示矩形框的边缘可被向上(北)移动。</div>
<div style="cursor:se-resize"> se-resize值,光标指示矩形框的边缘可被向下及向右移动(南/东)。</div>
<div style="cursor:sw-resize"> sw-resize值,光标指示矩形框的边缘可被向下及向左移动(南/西)。</div>
<div style="cursor:s-resize"> s-resize值,光标指示矩形框的边缘可被向下移动(北/西)。</div>
<div style="cursor:w-resize"> w-resize值,光标指示矩形框的边缘可被向左移动(西)。</div>
<div style="cursor:text"> text值,光标指示文本。</div>
<div style="cursor:wait"> wait值,光标指示程序正忙(通常是一只表或沙漏)。</div>
<div style="cursor:help"> help值,光标指示可用的帮助(通常是一个问号或一个气球)。</div>
内联元素---块状元素
display:fixed
css属性选择器总结:*(所有)id class 关联 包含 标签
新增:
属性选择器:[attr*=val] [attr^=val] [attr&=val] [attr=val]
结构性伪类选择器::root选择器 :not选择器 :empty选择器 :target选择器(_blank 在新窗口打开被链接文档 _self 默认
在相同的框架中打开 _top 在整个窗口中打开文档 _parent 在父框架中打开) :first-child选择器 :last-child选择器
:nth-child选择器 :nth-last-child选择器 :nth-child(odd)选择器 :nth-child(even)选择器 :nth-of-type(odd)选择器
:nth-last-of-type选择器 only-child选择器
状态伪类选择器:
:hover 当鼠标悬停
:active 从上往下按住不松开
:focus 获取光标
:enabled 用来指定处于可用状态的元素
:disabled 用来指定处于不可用状态的元素
:read-only 用来指定处于只读状态的元素
:read-write 用来指定处于读写状态的元素
:default 默认非选中
:checked 选中
:indeterminate 从来没有被选过
::selection 用来指定元素处于选中状态时的样式
element~兄弟元素:兄弟样式
注:合并单元格:跨行合并:rowspan
跨列合并:colspan
实例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title></title>
<style>
/*元素内容为空时引用此样式 有空格不行
:empty {
width: 100px;
height: 100px;
border: 1px solid blue;
background-color: red;
}
*/
/* id为abc时引用此样式
[id*=abc] {
width:100px;
height:100px;
border:1px solid blue;
}*/
/*id开头字母为a的引用此样式
[id^=a] {
width:100px;
height:100px;
border:1px solid blue;
}*/
/*id结束字母为c的引用此样式
[id$=c] {
width:100px;
height:100px;
border:1px solid blue;
}*/
/*id为Div下的第一个元素引用此样式
#Div :first-child {
width:100px;
height:100px;
border:1px solid blue;
}*/
/*id为Div下的最后一个元素引用此样式
#Div :last-child {
width:100px;
height:100px;
border:1px solid blue;
}*/
/*id为Div下的正数第二个元素引用此样式
#Div :nth-child(2) {
width:100px;
height:100px;
border:1px solid blue;
}*/
/*id位Div下的倒数第一个元素引用此样式
#Div :nth-last-child(1) {
width:100px;
height:100px;
border:1px solid blue;
}*/
/*id为Div下不包含h1的所有元素引用此样式
#Div :not(h1) {
color:red;
}
*/
/*html标签引用此样式
:root {
background-color:blue;
}
*/
/*链接链入某个网页时 引用该样式
:target {
color:black;
}
*/
/* id为Div下行数为奇数行的引用该样式
#Div :nth-child(odd) {
color:red;
}
*/
/* id为Div下行数为偶数行的引用该样式
#Div :nth-child(even) {
color:green;
}
*/
/* 又是第一个也是最后一个的引用该样式
#Div2 :first-child:last-child {
color:pink;
}
也能这样写
#Div2 :nth-child(1):nth-last-child(1) {
color:pink;
}
也能这样写
#Div2 :only-child {
color:blue;
}
*/
/* id为Div下所有标签一样的奇数行引用此样式
#Div :nth-of-type(odd) {
color:pink;
}
id为Div下所有标签一样的偶数行引用此样式
#Div :nth-of-type(even) {
color:purple;
}*/
/*id位Text的文本框 获取光标宽度变为200
#Text:focus {
width:200px;
}
id为Text的文本框 鼠标移动上去高变成50
#Text:hover {
height:50px;
}
id为Text的文本框 鼠标点击时背景颜色为蓝色
#Text:active {
background-color:blue;
}
*/
/* table 鼠标经过
table tr:hover {
background-color:yellow;
}
*/
/* 文本框为只读的引用此样式,需要给input readonly="readonly"
#Text:read-only {
width:300px;
}
*/
/*文本框为可写的引用此样式
#Text:read-write {
height:40px;
}
*/
/*#Div ::selection {
background-color:red;
font-size:30px;
}*/
/*选中状态时
[type=checkbox]:checked {
width:50px;
}*/
</style>
</head>
<form>
<table border="1">
<tr>
<th>美女</th>
<th>身高</th>
<th>年龄</th>
<th>体重</th>
</tr>
<tr>
<td>珠珠</td>
<td>160</td>
<td>19</td>
<td>40</td>
</tr>
<tr>
<td>琛琛</td>
<td>180</td>
<td>18</td>
<td>45</td>
</tr>
<tr>
<td>红莲</td>
<td>165</td>
<td>18</td>
<td>30</td>
</tr>
<tr>
<td>珠珠</td>
<td>160</td>
<td>19</td>
<td>40</td>
</tr>
<tr>
<td>琛琛</td>
<td>180</td>
<td>18</td>
<td>45</td>
</tr>
<tr>
<td>红莲</td>
<td>165</td>
<td>18</td>
<td>30</td>
</tr>
</table>
<div id="Div">
<div id="a">我的id是a</div>
<h1>哈哈哈哈哈</h1>
<div id="ab">我的id是ab </div>
<div id="abc">我的id是abc </div>
<!--<a href="json.html" target="_top">跳转</a>-->
<div id="cba">我的id是cba </div>
<div id="w3c">我的id是w3c </div>
</div>
<div id="Div2">
<div id="id1">我的id是id1</div>
</div>
<input type="button" id="Button" value="点击" />
<input type="text" id="Text" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</form>
</body>
<html>
css3选择器 以及当天知道的东西的更多相关文章
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3选择器(三)之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
- CSS3学习笔记(1)-CSS3选择器
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- CSS属性、伪类选择器,CSS3选择器
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...
- css3-2 CSS3选择器和文本字体样式
css3-2 CSS3选择器和文本字体样式 一.总结 一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- 总结30个CSS3选择器(转载)
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- css3 选择器(三)
接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...
随机推荐
- Windows 32 程序设计
C语言版 开发语言:C语言 开发工具:Visual Studio 2015 目 标:使用C语言,直接调用Windows API,创建Windows程序. 参考图书:<Windows程序 ...
- 配置HylaFAX传真服务器
配置HylaFAX传真服务器转自 http://blog.chinaunix.net/uid-8551991-id-248081.html参考:http://www.hylafax.org/howto ...
- 使用 cURL 获取站点的各类响应时间 – dns解析时间,响应时间,传输时间
http://zhangrenfang8738.blog.163.com/blog/static/95401881201142711450245/ curl监控站点响应时间 2011-05-27 11 ...
- C# BackgroundWorker的使用【转-http://www.cnblogs.com/tom-tong/archive/2012/02/22/2363965.html】
BackgroundWorker 可以用于启动后台线程. 主要的事件及参数: 1.DoWork——当执行BackgroundWorker.RunWorkerAsync方法时会触发该事件,并且传递DoW ...
- delphi 调用百度地图WEBSERVICE转换GPS坐标 转
http://www.cnblogs.com/happyhills/p/3789864.html 百度地图的API说明 使用方法 第一步,申请密钥(ak),作为访问服务的依据: 第二步,按照请求参 ...
- [datatable]两个DataTable 连接
using System; using System.Collections.Generic; using System.Text; using System.Data; namespace Cons ...
- Machine Schedule(最小覆盖)
其实也是个最小覆盖问题 关于最小覆盖http://blog.csdn.net/u014665013/article/details/49870029 Description As we all kno ...
- .NET基础操作回顾_使用ADO.NET操作SqlServer使用的类
有些工具用的久了或者有新工具出现后,就慢慢的遗忘了很多,它们从熟悉的变成陌生,当然,对于我们来说不是好事吧. 今天回顾一下ADO.NET用到的MS的基础类库,先上代码(标准的SqlServer操作) ...
- Sqool与kettle开源的ETL工具
现在的ETL都是基于管道的模式(数据流)运行,比较有名的有 TaskCTL ========================================== 数据抽取的开源工具 一个是RDBMS ...
- SVN小小用法(一)svn服务器搭建
最近由于公司项目用SVN作为版本控制工具,本着学一点是一点的原则,今天小配了下svn,给大家介绍一下 软件:TortoiseSVN-1.8.3.24901-win32-svn-1.8.4.msi(本人 ...