zoukankan      html  css  js  c++  java
  • 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
     

    实例

    <!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 {
                 100px;
                height: 100px;
                border: 1px solid blue;
                background-color: red;
            }
                */
            /* id为abc时引用此样式
              [id*=abc] {
                100px;
                height:100px;
                border:1px solid blue;
            }*/
            /*id开头字母为a的引用此样式
               [id^=a] {
                100px;
                height:100px;
                border:1px solid blue;
            }*/
            /*id结束字母为c的引用此样式
                [id$=c] {
                100px;
                height:100px;
                border:1px solid blue;
            }*/

            /*id为Div下的第一个元素引用此样式
                #Div :first-child {
                 100px;
                height:100px;
                border:1px solid blue;
            }*/
            /*id为Div下的最后一个元素引用此样式
                #Div :last-child {
                 100px;
                height:100px;
                border:1px solid blue;
            }*/
            /*id为Div下的正数第二个元素引用此样式
                #Div :nth-child(2) {
                 100px;
                height:100px;
                border:1px solid blue;
            }*/
            /*id位Div下的倒数第一个元素引用此样式
                #Div :nth-last-child(1) {
                 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 {
                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 {
                300px;
            }
                */
            /*文本框为可写的引用此样式
            #Text:read-write {
                height:40px;
            }
                 */
            /*#Div ::selection {
                 background-color:red;
                 font-size:30px;
            }*/
            /*选中状态时
                [type=checkbox]:checked {
                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>



              

  • 相关阅读:
    URL
    B/S架构
    SQL查询语句
    SQL-Delete语句
    SQL运算符
    SQL结构查询语言
    SQL数据库数据类型详解
    标准文档流
    CSS
    字体样式
  • 原文地址:https://www.cnblogs.com/zhuzhuer/p/5997846.html
Copyright © 2011-2022 走看看