Question

我在页面的页脚中遇到了一些问题。在我的外部样式表中

默认情况下，文本左对齐。但据我所知，Inline CSS会覆盖这一点。这是我对我的代码所做的事情：

<div  id="footer" style="text-align: center; ">
    <p>Created by John Smith<br>Copyright "Microsoft Inc." 2015</p>
</div>

然而，文字仍显示在页面左侧，我的错误是什么？

提前致谢。

Answer 1

你现在习惯了这个

<div  id="footer" >
    <p style="text-align: center; ">Created by John Smith<br>Copyright "Microsoft Inc." 2015</p>
</div>

现在p是块级element，因此您可以申请css p代码

第二个选项，如果您习惯使用外部CSS 习惯于在外部CSS中使用这个

#footer>p{text-align:center;}

Answer 2

#footer p {
    text-align: center;
}

在外部样式表中尝试此代码。

Answer 3

要使后来的声明覆盖以前的声明：

/* 0: default */

#footer { text-align:left; }
#footer { text-align:center; }

/* 1: using !important */

#footer { text-align:left; }
#footer { text-align:center !important; }

/* 2: specific selector */

#footer { text-align:left; }
#mainpage #footer { text-align:center; }

/* 3: selector type tag - id - class */

div { text-align:right; }
div.footer { text-align:left; }
div#footer { text-align:center; }

应用具有最高CSS特异性的样式。不同元素的特异性定义如下：

!important = is the superior: only !important can override !important
ID attribute = 100
Class attribute = 10
Element = 1

<p id="target" class="target">Hello World</p>

<style>
p#target {color: black} /* Specificity: 101 */
p#target {color: red} /* Specificity: 101 */
p.target {color: blue} /* Specificity: 11 */
p {color: tomato} /* Specificity: 1 */
/* Red color is applied */
</style>

牢记这些规则：

.contents {color: #999 !important;}

section.contents {color: #999;}

body .contents {color: #999;}

#container > .contents {color: #999;}

信用：CSS规则优先级：https://developer.tizen.org/dev-guide/web/2.3.0/org.tizen.mobile.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm

使用内联CSS来设置div的样式？

3 个答案: