css属性选择器部分练习

最新推荐文章于 2024-04-09 17:16:17 发布

betterIatethanne

最新推荐文章于 2024-04-09 17:16:17 发布

阅读量234

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/betterIatethanne/article/details/132086493

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 111111.选择器
        1.class:. 
        2.id:#
        3.派生选择器（后代）：空格表示
        4.子选择器：>
        5.相邻：+
        6.元素选择器：div span p..
        7.属性选择器:[]
        8.通配符:*
        9.分组选择器：逗号表示
        10.兄弟选择器（匹配）：~
        11：伪类*/
        /*一、 -----------属性选择器---------- */
        /* title 属性 提示 */
       [title]{color: red;}
       h3[title]{color: blue;}
       /* 2.属性等于xx  */
       [title=hello2]{color: cadetblue;}
       /* 3.是否包含某个单词  */
       [title~=ok]{color: blueviolet;}
       /* 4.以哪个单词结束的 */
       [title$=no]{color: palegreen;}
       /* 5.以某个单词开头的  */
       [title^=hello]{color: brown;}
       /* 二、-------伪类选择器:根据元素的状态 自动的调整样式------- */
       /* 1.未访问过的 a:link */
       a:link{color: red;}
       /* 2.visited 已访问的链接  */
       a:visited{color: aqua;}
       /* 3. a:hover鼠标移动到链接上鼠标移入 */
       a:hover{color: pink;}
       /* 4.a:active 选定的链接 点击瞬间*/
       a:active{color: green;}
       .tel:focus{background-color:red;}
       /* 字体选中背景变红 默认是蓝色 */
       ::selection{background-color: red;}
       /* 文本框的背景颜色 禁止 不可用的状态 */
       :disabled {background-color: aquamarine;}
      /* <!-- 文本框 被选中后的状态 --> */
      :checked{outline: 10px solid red;}
      /* -----结构性伪类------------ 
      /* 1.根*/
      body{background: aliceblue;} 
      :root{background-color: blue;}
      /* 节点---- */
      /* 1.第一个 */
       li:nth-child(1){color: blueviolet;}
        /* 2.最后一个 */
        li:nth-child(5){color: brown;}
        /* 3.奇数 */
        li:nth-child(2n+1){color: aquamarine;}
        li:nth-child(3n+5){color: pink;}
        /* 表格 */
        /* 表格的第一种
        table tr:nth-child(2n+1){background-color: cadetblue;}
        table tr:nth-child(3n+2){ background-color: brown;} */
        /* 表格的第二种 */
        /* 奇数 */
        table tr:nth-child(odd){background-color: burlywood;}
        /* 偶数 */
        table tr:nth-child(even){background-color: red;}
        /* 伪元素-------------------- */
        /*1 在什么。。之前 */
        div::before{
            content: "务必";
            color: chartreuse;
            background-color: tomato;
        }
        /* 2在什么。。之后 */
        div::after{
            /* content: "三个"; */
            content: url(./img/1.jpg);
            color: yellowgreen;
            background-color: violet;
        }
    </style>
</head>
<body>
    <!-- 1.是否有某个属性 -->
    <h2 title="hello h2">的改变而哦啊办发文哦</h2>
    <h2>水电费荣 </h2>
    <h3 title="hello">安格博尔</h3>
    <!-- 2.属性等于xx -->
    <h2 title="hello2">电话费烹饪课本</h2>
    <!-- 3.是否包含某个单词 -->
    <h2 title="ok">vcsidkgjpd</h2>
    <!-- 4.以哪个单词结束的 -->
    <h2 title="no">ad护肤品儿科</h2>
    <!-- 5.以某个单词开头的 -->
    <h2 title="hello">爱好的分配RMB</h2>
    <!-- ------伪类选择器 -->
    <a href="http://www.baidu.com">百度</a>
    <input type="text" class="tel" disabled value="我是文本框">
    <!-- 字体选中背景变红 默认是蓝色 -->
    俺不大V偶饿了么
    <!-- 文本框 勾选框点击显示背景颜色-->
    <input type="checkbox" value="体育">体育
    <input type="checkbox" value="音乐">音乐
    <!-- 节点 -->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <!-- 表格------------------- -->
    <table width="800" border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <div>a</div>
    <div>b</div>
    <div>c</div>
</body>
</html>