...">

Unable to change text color of Bootstrap h1 using identifier selector?

First, here are some parts of the code:

<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>

h1assigned the identifier "1-title", and therefore the text color h1should be blue, but it remains black even if I use !important.

However, I tried to add a class and apply the style to it as follows:

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

and

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

and it worked.

So what is the reason? Why can't I change color using the d selector?

+4
source share
5 answers

The ID selector does not work because the identifier cannot begin with a number. Either change the identifier to a letter, or use the attribute selector[id='1-title'] {...}

+3
source

, id .

+2

HTML5, :

( , ).

, , , , , . . HTML4.

HTML 4 , , , , , .

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>

, , (, CSS, JavaScript, ).

+2

, , , . :

no.1

-

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

№ 2

IE7 , , , IE, unicodes, , -

#\31-title {...}

, !

+2

, id . HTML-.

IDs and NAMEs must begin with a letter ([A-Za-z]) and can be followed by any number of letters, numbers ([0-9]), hyphen ("-"), underscore ("_"), colons (":") and periods (".").

For more information see the link below.

Why can't I have a numerical value as an identifier for an element?

+1
source

Source: https://habr.com/ru/post/1670806/


All Articles