CSS3案例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; 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;
        }*/
        /* 按钮不能被点击是 引用此样式 标签里加 disabled="disabled"
            [type=button]:disabled {
            background-color:red;
        }*/
    </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="点击" disabled="disabled" />
        <input type="text" id="Text"  />
        <input type="checkbox"  />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
    </form>
</body>

</html>

posted on 2016-10-25 19:04  落他眉骨  阅读(89)  评论(0)    收藏  举报

导航