2017-02-25 78 views
4

起初,这里是代码的相关部分:无法使用ID选择器更改Bootstrap h1文本颜色?

<head> 
<style type="text/css"> 
#part1 { 
    background: url("1.jpg") no-repeat center; 
    background-size: cover; 
} 
#1-title { 
    color: blue; 
} 
</style> 
</head> 

<body> 
<div class="jumbotron jumbotron-fluid" id="part1"> 
    <div class="container"> 
     <h1 id="1-title" class="display-3">The New App</h1> 
     <p class="lead" id="1-disc">A new app</p> 
     <hr class="my-4"> 
    </div> 
</div> 
</body> 

h1被分配“1标题”的ID,因此h1文字颜色应该是蓝色的,但它仍然是黑色,即使我使用!important

不过,我尝试添加一个类,如下应用样式到它:

<style type="text/css"> 
#part1 { 
    background: url("1.jpg") no-repeat center; 
    background-size: cover; 
} 
.c { 
    color: blue; 
} 
</style> 

和:

<h1 class="display-3 c">The New App</h1> 

和它的工作。

那是什么原因呢?为什么我无法使用d选择器更改颜色?

+0

选中此链接(https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute) –

回答

3

ID选择器不工作,因为ID不能以数字开头。请将ID更改为字母或使用属性选择器[id='1-title'] {...}

2

这是因为id或类名不能以数字开头。

1

这是因为ID选择器不能以数字开头。请阅读为HTML标记创建标识的规则。

ID和名称标记必须以字母开头([A-ZA-Z]),并且可以是 后跟任意数量的字母,数字([0-9]),连字符( “ - ”) , 下划线(“_”),冒号(“:”)和句点(“。”)。

请参阅下面的链接以获得更多的见解。

Why can't I have a numeric value as the ID of an element?

2

作为HTML5的,对一个ID的值的唯一的限制是:

必须在文档中是唯一的 必须不包含任何空格字符 必须包含至少一个字符 类似规则适用于类(当然除了唯一性)。

所以这个值可以是全部数字,只是一个数字,只是标点符号,包括特殊字符,不管。没有空白。这与HTML4非常不同。

在HTML 4中,ID值必须以字母开头,然后字母只能用字母,数字,连字符,下划线,冒号和句点。

在HTML5中,这些都是有效的:

<div id="999"> ... </div> 
<div id="#%LV-||"> ... </div> 
<div id="____V"> ... </div> 
<div id="⌘⌥"> ... </div> 
<div id="♥"> ... </div> 
<div id="{}"> ... </div> 
<div id="©"> ... </div> 
<div id="♤₩¤☆€~¥"> ... </div> 

记住就记住这一个ID值使用数字,标点符号或特殊字符可能会导致在其他情况下的麻烦(如CSS,JavaScript中,正则表达式) 。

2

所有的答案是正确的,但我写这个答案人谁必须有一个ID开始的数字。这可以通过两种方式来完成---

一号

您可以使用迈克尔·科克尔的answer--

[id='1-title'] {...} 

二号

但是这方面的支持,直到IE7所以,如果你是在那些倒霉的一个人谁ñ eeds支持较老的IE,你需要使用这样的Unicode -

#\31-title {...} 

希望这有助于未来的读者!