CSS - how to overwrite using CSS?

Question

I only want to change the colour for the title text, I dont know why the following code does not work?

<div class="mytitle">
this is the title in white
</div>

<div class="mytitle alt">
this is the title in red
</div>
<div class="mytitle alt2">
this is the title in black
</div>




.mytitle{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 37px !important;
    line-height: 40px !important;
    display:block;
    font-weight: bold;
    margin: 0 0 12px;
    padding: 0 15px 5px 0 !important;
    color: white;
    width:500px;
}
.mytitle .alt{
    color: red;
}
.mytitle .alt2{
    color: black;
}

EDIT: it would only use "mytitle" tag, it would not use alt or alt2, why?

Answer 1

您需要删除类定义之间的空格：

.mytitle.alt

Answer 2

simple remove .mytitle

.alt{  color: red;}       
.alt2{ color: black;}   

and you will get all alt/alt2 colored, or

.mytitle.alt{ color: red; }       
.mytitle.alt2{ color: black;}  

for the both together.