css基础，选择器

最新推荐文章于 2024-09-12 01:25:48 发布
一天睡25小时
最新推荐文章于 2024-09-12 01:25:48 发布
阅读量37
点赞数
文章标签： css css3 前端
本文链接：https://blog.csdn.net/qq_63448336/article/details/131707490
版权
<!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="./style01.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:brown;
            }
            /* 类选择器 class */
            .classname{
                height:300px;
                background-color: brown;
            }
            .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,56);
            }
            .div3{
                height:300px;
                background-color: rgb(11,108,101);
            }
    
            /* 层级选择器
            1.子代选择器   >
            2.后代选择器  空格
            */
    
            .ulBig > li{
                list-style: none;
                font-size: 28px;
            }
            .ukBig 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;
            }
    
            /* 优先级
            !important 设置最高优先级; 一般不建议用,改源代码可以用
    
            *优先级最低  <
            标签选择器   <
            .class      <
            #id       <
            行内引入方式   <
            !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">ddddddddddd</div>
    </div>
    <div class="div2"></div>
    <div class="div3"></div>

    <ul class="ulBig">
        <li>这叫无序列表</li>
        <li class="li2">这叫无序列表</li>
        <li class="li3">这叫无序列表
             <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>