Html 为什么常规样式会覆盖文本阴影的移动样式

我有以下HTML DIV：

<div class="sliderCaptionHeader">Be Smart. Eat Smart.</div>

这是

captionStyle\u mobile.css的样式：

.sliderCaptionHeader {
    font-family: 'kronikaregular';
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 55px;
    padding: 5px;
    text-align: center;
    line-height: 50px;
    text-transform: uppercase;
    font-size: 60px;
    color: #BD2316;
    text-shadow: -1px 0 #ccc, 0 1px #ccc, 1px 0 #ccc, 0 -1px #ccc;
}

.sliderCaptionHeader {
    font-family: 'kronikaregular';
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 75px;
    padding: 5px;
    text-align: center;
    line-height: 50px;
    text-transform: uppercase;
    font-size: 70px;
    color: #BD2316;
    /*text-shadow: -1px 0 #ccc, 0 1px #ccc, 1px 0 #ccc, 0 -1px #ccc;*/
}

当我在移动浏览器模拟器（）中运行它并检查元素时，我会看到以下内容：


正如您所看到的，
文本阴影
是从默认样式使用的，而不是被移动样式覆盖

为什么会发生这种情况？有没有办法解决？或者我必须创建一个完整的新DIV并以默认样式隐藏并以移动样式显示吗？
使用
/**/
在浏览器端实际上并没有将其设置为空，它只是将其视为
CSS
中的注释行，并使用其他地方实际设置的内容

将注释掉的行更改为

text-shadow: none;

嗯。。。它在移动样式表中被注释掉了。如果要禁用样式，应使用
text shadow:none
EASY and simple，并且可以正常工作。谢谢你。它起作用了，我甚至没有想到它。：）投票接受
text-shadow: none;