首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么我的CSS类不能工作?

为什么我的CSS类不能工作?
EN

Stack Overflow用户
提问于 2013-10-29 20:08:19
回答 4查看 3.6K关注 0票数 0

我有以下HTML:

代码语言:javascript
运行
复制
<div id="main">
    <div id="calendar">
    <div class="column" id="time_slots">
    </div>

        <div class="column" id="day1">
            <div class="route_container">
                <div class="date"></div>
                <button class="add_route" name="add_route" onclick="">Add New Route - 1</button>
                <div class = "truck" id="day1_route1">
                    <div class="8-10">8-10 AM today</div>//want css for this
                    <div class="10-12">10-12 AM</div>
                    <div class="12-2">12-2 AM</div>
                    <div class="2-4">2-4 AM</div>
                    <div class="4-6">4-6 AM</div>
                </div>
            </div>
        </div>
            ...etc...

然后我有以下CSS:

代码语言:javascript
运行
复制
.label
{
    width:20px;
}

.table
{
    font-size: 1.2em;
}
#main
{
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    width:97%;
    height:900px;
    margin:auto;
    overflow: auto; 
    white-space: nowrap;

}
h2
{
    font-size: 24px;
}
#calendar
{
    padding:1%;

}
.column
{
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    min-width:10%;
    max-width:100%;
    height:800px;
    display: inline-block;
    overflow: auto;
    padding:5px;
    font-size: 0px;


}
.header
{
    padding:0;
    margin:0;
    text-align: center; 
    font-style: bold; 
}

.truck
{
    width:200px;
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    display:inline-block;
    margin:auto;
    font-size: 16px;


}

.column#time_slots
{
    width:5%;
    min-width:5%;
    max-width: 10%; 
}
.date
{
    text-align: center;
    width:100%;
}
.column button
{
    display:block;
    width:100%;
    width:100%;
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    font-size: 16px; 
}
.full_time
{
    display: none; 
}
.8-10
{
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    width:100px;
    height:18px;

    font-size: 24px;    
}

问题是,我试图定义8-1010-1212-22-44-6的所有类。我最初尝试过:

代码语言:javascript
运行
复制
.8-10, .10-12, .12-2, .2-4, .4-6
    {
        border-style: solid;
        border-width: 1px;
        border-color: black; 
        width:100px;
        height:18px;

        font-size: 24px;    
    }

但那不管用。我做错了什么?我甚至连一个类(8-10)都不能工作?我该怎么解决这个问题?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-10-29 20:11:41

它不能工作的原因是你不能在类名的开头使用数字。

代码语言:javascript
运行
复制
Wrong: .123text
Right: .text123
票数 4
EN

Stack Overflow用户

发布于 2013-10-29 20:12:06

这是你的Css选择器文法,你不能用数字启动选择器。

票数 4
EN

Stack Overflow用户

发布于 2013-10-29 20:12:04

不能用数字启动名称类,可以用字母a-z或下划线_-开头。看看这里,http://www.w3.org/TR/CSS21/grammar.html#scanner

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19668077

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档