Question

查看以下HTML，用于演示目的：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Untitled</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="author" href="humans.txt">

        <style>
            body {
                padding: 0;
                margin: 0;
                font-family: verdana;
                font-size: 2em;
                color: #444;
            }
            .primary-btn {
                color: #eee;
                outline:none;
                border:none;
                padding:10px 20px;
                text-transform: uppercase;
                cursor: pointer;
                text-shadow: 1px 1px 1px rgba(0,0,0,.3);
                display: block;
                background: tomato;
                margin: 0 auto;
                font-weight: bold;
            }

            .modal {
                height: 200px;
                max-width: 400px;
                border-radius: 5px;
                line-height: 200px;
                text-align: center;
                margin: 30px auto;
                -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.1);
                box-shadow: 1px 1px 4px rgba(0,0,0,.1);
                -webkit-transition:  .5s;
                -o-transition:  .5s;
                transition:  .5s;
                position: relative;
                border: 1px solid rgba(0,0,0,.2);
                text-transform: uppercase;
            }

            .fade {
                transform: translate(0 , -50px);
                opacity: 0;
            }

            .in {
                transform: translate(0 , 0px);
                opacity: 1;
            }
        </style>
    </head>
    <body>


        <div class="modal fade" id="modal">
                Hey i am a modal        
        </div>

        <button data-toggle="#modal" class="primary-btn">Show Modal</button>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="js/smallest-modal.js"></script>
    </body>
</html>

<body>标记中的以下样式未级联到按钮元素，因此我必须将它们明确应用于<button>：

font-family: verdana;
font-size: 2em;
color: #444;

问题是什么？

Answer 1

body元素与您的按钮没有关联。或者您需要这样做：Why doesn't inherit the font from body?

如果你使用'身体'，你正在对身体元素说话，而不是在内部。如果您使用类，则可以为多个元素提供相同的CSS，如果您使用的是id，则可以只使用该元素。

体型没有级联到按钮

1 个答案: