選擇器類型及盒模型

時間  2019-11-18
標籤 選擇器 類型 模型 简体版
原文   原文鏈接

一、class的使用html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*#p1{
            font-size: 30px;
            color: green;
        }
        #p2{
            color: green;
            text-decoration: underline;
        }
        #p3{
            font-size: 30px;
            text-decoration: underline;
        }*/

        .lg{
            font-size: 30px;
        }
        .lv{
            color: green;
        }
        .un{
            text-decoration: underline;
        }

    </style>
</head>
<body>
     <!-- 公共類 -->
     <p id="p1" class="lg lv">張孕康1</p>
     <p id="p2" class="lv un">張孕康2</p>
     <p id="p3" class="lg un">張孕康3</p>

    
</body>
</html>

二、後代選擇器佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .father .wu{
            color: green;
        }

    </style>
</head>
<body>

    <div class="father">
        <p>alex</p>
        <ul>
            <li>
                <p class="wu">wusir</p>
            </li>
        </ul>
    </div>

    <p class="wu">日天</p>
    
</body>
</html>

三、子帶選擇器spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*.father>p{
            color: red;
        }*/
        .father>ul>li{
            width: 100px;
        }
        .container{
            color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <p>alex</p>
        <p>alex</p>
        <p>alex</p>
        <p>alex</p>
        <div class="content">
            <p>wusir</p>
        </div>
        <ul>
            <li>
                alex2
                <ul>
                    <li>wusir</li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="container">
        <p>日天</p>
    </div>

</body>
</html>

四、屬性選擇器code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        form input[type='text']{
            background-color: red;
        }
        form input[type='password']{
            background-color: yellow;
        }
        form #user{
            background-color: green;            
        }
    </style>
</head>
<body>
    
    <form action="">
        <input type="text" id="user">
        <input type="password">
    </form>
</body>
</html>

五、僞類選擇器orm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*a:hover{
            color: #ff6700
        }*/
        /*愛恨準則 LoVe HAte*/
        /*沒有被訪問的a標籤的顏色*/
        a:link{
            color: green;
        }
        /*訪問事後的a標籤的顏色*/
        a:visited{
            color: yellow;
        }
        /*鼠標懸停的時候a標籤的顏色*/
        a:hover{
            color: red;
        }

        a:active{
            color: blue;
        }
        span:hover{
            color: red;
            font-size: 24px;
            text-decoration: underline;
        }
        .child{
            display: none;
        }
        .father:hover .child{
            color: red;
            display: block;
        }

    </style>
</head>
<body>
    <a href="#">百度一下</a>

    <span>alex</span>

    <div class="father">
        wusir
        <p class="child">alex</p>
    </div>
    
</body>
</html>

六、僞元素選擇器htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:first-letter{
            color: red;
            font-size: 26px;
        }
        /*用僞元素 屬性必定是content*/

        /*僞元素選擇器與後面的佈局有很大關係*/
        p:before{
            content: '$'
        }
        p:after{
            content: '.'
        }
        .box2{

            /*需求：這個盒子必定是塊級標籤  span==>塊 而且再也不頁面中佔位置。將來與佈局有很大關係 */

            /*隱藏元素 不佔位置*/
            /*display: none;*/
            display: block;
            
            /*display: none;*/
            /*隱藏元素 佔位置*/
            visibility: hidden;
            height: 0;

        }

    </style>
</head>
<body>
    <p class="box">
        <span>alex</span>
    </p>

    <span class="box2">alex</span>
    <div>wusir</div>
    
</body>
</html>

七、盒模型blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
            border: 10px solid green;
            /*margin-left: 50px;*/
        }
    </style>
</head>
<body>
    <!-- 
    width:內容的寬度
    height:內容的高度
    padding:內邊距
    border:邊框
    margin:外邊距
     -->
     <div class="box"></div>
    
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程