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

实例：

<!DOCTYPE html>
<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>
<body>
    <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选择器 以及当天知道的东西的更多相关文章

  1. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  2. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

  3. CSS3学习笔记(1)-CSS3选择器

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  4. CSS属性、伪类选择器，CSS3选择器

    CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...

  5. css3-2 CSS3选择器和文本字体样式

    css3-2   CSS3选择器和文本字体样式 一.总结 一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...

  6. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  7. 总结30个CSS3选择器（转载）

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  8. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  9. css3 选择器（三）

    接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...

随机推荐

  1. Windows 10 中 Eclipse中无法添加Courier New字体的解决方法！

    1,打开"C:\Windows\Fonts\"文件夹. 2,鼠标右键"Courier New",随后点击"显示",这样你就可以在Eclips ...

  2. R如何检验类别变量（nominal variable）与其他变量之间的相关性

    1.使用Pearson积差相关系性进行检验的话可以判断两个变量之间的相关性是否显著以及相关性的强度 显著性检验 (significant test) 连续变量 vs 类别变量 (continuous ...

  3. tiny210裸机第1课(启动原理)

    软硬件环境 宿主机系统:ubuntu 板子芯片:S5PV210(Contex-A8),512M DDR2,512M SLC Nand 交叉编译器:arm-linux-gcc-4.5.1 手册:S5PV ...

  4. [ActionScript 3.0] AS3 双A字模型

    package { import caurina.transitions.Tweener; import flash.display.Sprite; import flash.events.Mouse ...

  5. Dubbo Multicast 注册中心即相关代码实现

    Dubbo 的 Multicast注册中心有下面特点: 不需要启动任何中心节点,只要广播地址一样,就可以互相发现 组播受网络结构限制,只适合小规模应用或开发阶段使用. 组播地址段: 224.0.0.0 ...

  6. C++primer 练习12.6

    编写函数,返回一个动态分配的int的vector.将此vector传递给另一个函数,这个函数读取标准输入,将读入的值 保存在vector元素中.再将vector传递给另一个函数,打印读入的值.记得在恰 ...

  7. How to make 9-patch image downloaded from the Network

    Probably everyone, who is in touch with the Android world dealt with 9-patch term. It is an image in ...

  8. 编码中常用的SQL语法

    蓝色标注的都是比较常见的SQL ====================== 开发中常见的SQL: left join , right join 防止丢弃数据 inner join CASE WHNE ...

  9. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  10. Cocos2d-x下Lua调用自定义C++类和函数的最佳实践[转]

    Cocos2d-x下Lua调用C++这事之所以看起来这么复杂.网上所有的文档都没讲清楚,是因为存在5个层面的知识点: 1.在纯C环境下,把C函数注册进Lua环境,理解Lua和C之间可以互相调用的本质 ...