CSS样式基础与选择器应用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_63449105/article/details/131715395
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css样式基础</title>
    <!-- 外联式 -->
    <link rel="stylesheet" href="../css/style.css">
    
    <!-- 内联式 -->
    <style>
        /* 基础样式
        1.width 宽
        2.height 高
        3.background-color 背景颜色
        4.list-style: none;  清除li默认样式
        */

        /* 选择器 */
        /* 通配符 全局选择器 去掉浏览器默认样式 */
        *{
            /* 内边距 */
            /* padding: 0; */
            /* 外边距 */
            /* margin: 0; */
            /* 盒子模型 */
            /* 注释 */
            /* color: red; */
        }
        /* 标签选择器 
        h1-h6 div  ul li span 
        */
        p{
            background-color: rgb(red, green, blue);    
            color: #6a2121;
        }
        /* 类选择器 class */
        .classname{
            height: 300px;
            background-color: #6a2121;
        }
        .red_color{
            color: red;
        }
        /* id 选择器 
            注意：id名不能重复
        */
        #idname{
            width: 400px;
            background-color: white;
        }
        p{
            background-color: pink;
        }
        /* 群组选择器  选择器之间用 , 隔开 */
        .div1,.div2,.div3,p{
            width: 400px;
        }
        .div1{
            height: 100px;
            background-color: chocolate;
        }
        .div2{
            height: 200px;
            background-color: rgb(164, 221, 91);
        }
        .div3{
            height: 300px;
            background-color: rgb(11, 108, 101);
        }
        

        /* 层级选择器
            1. 子代选择器  > 
            2. 后代选择器  空格
        */
        .ulBig > li{
            list-style: none;
            font-size: 28px;
        }
        .ulBig li{
            list-style: none;
        }

        /* 层级选择器
            1. 兄弟选择器  相邻兄弟 +  只修改他下面的相邻的选择器
            2. 兄弟选择器  通用兄弟 ~  修改他后面的所有选择器
        */
        .li4{
            color: red;
        }
        
        .li4+li{
            color: red;
        }
        .li4~li{
            color: red;
        }

        /* 伪类选择器 
        
            :hover 鼠标悬浮
             */
        .li4:hover{
            color: blue;
            /* 鼠标变小手 */
            cursor: pointer;
        }
        .li3:hover{
            cursor: pointer;
        }
        .li3:hover li{
            color: blue;
        }
        /* 属性选择器 */
        div[class^='div']{
            color: yellow;
        }
        input[type='checkbox']{
            background-color: yellow!important;
        }

        /* 优先级 
        1000 !important  设置最高优先级；一般不建议用，改源代码时可以用

        * 优先级最低 <  1
        标签选择器 <  10
        .class <  100
        #id     200 <
        行内引入方式  < 
        !important

        .class #id  >   #id 
        组合选择器时，按优先级顺序叠加，谁大谁生效
        



        */



    </style>
</head>
<body>
    <!-- 引入方式
        1. 行内引入 
        <p style="background-color: blue;color: red;font-size: 120px;">这是另一个段落标签</p>
        2. 内联式
        3. 外联式

        优先级：
        行内引入方式 优先级最高
        内联式和外联式 谁在后谁生效（原理：代码自上而下执行，后面的把前面的样式覆盖了）
    -->
    <h1 style="background-color: pink;">这是标题标签</h1>
    <p title="这是title" class="">这是<span class="red_color">段落</span>标签</p>
    <p class="classname" id="idname"  style="background-color: aqua;">这是另一个<span class="red_color">段落</span>标签</p>
    <div class="div1">
        <div class="box1">dddddddd</div>
    </div>
    <div class="div2">dddddddd</div>
    <div class="div3">dddddddd</div>

    <ul class="ulBig">
        <li>这叫无序列表</li>
        <li class="li2">这叫无序列表</li>
        <li class="li3">1
            <ul>
                <li>这叫无序列表222</li>
                <li>这叫无序列表222</li>
                <li>这叫无序列表222</li>
                <li>这叫无序列表222</li>
                <li>这叫无序列表222</li>
            </ul>
        </li>
        <li class="li4">这叫无序列表</li>
        <li>这叫无序列表</li>
        <li>这叫无序列表</li>
    </ul>

    <form action="">
        <input type="checkbox" name="a">男
        <input type="checkbox" name="a" checked>女
        <input type="checkbox" name="a">其他
    </form>
</body>


</html>
效果展示：