javascript - Jquery mobile 如何删除 ui-body 类周围的边框

Question

是否可以从我的 div 中的 ui-body 类中删除边框？请忽略代码中顶部的虚线边框，我必须将其删除。我需要的是用 ui-body 类删除每个 div 周围的边框。非常感谢。

截图:

HTML:

    <div class="ui-body ui-body-c">
        {foreach from=$category_26 item=CAT}
        <h2 style="color: #236EE8;" class="main">
            <a style="color: #236EE8; text-decoration: underline;" href="/{$country}/{$lang}/26_{$CAT.friendlyTitle}.html">
                {$CAT.Title}
            </a> 
        </h2>
        {/foreach}
    </div>
        {php}
            $this->assign('MaxNo',3);
        {/php}
        {assign var=number value=0}
        {section name=ArtCat_26 loop=$ArtCat_26 max=$MaxNo}
            {if $number == 0 || $number == 2}
              <div class="ui-body ui-body-d">
                {foreach from=$category_26 item=CAT}
                <h4 style="color: #236EE8;">
                <a style="color: #236EE8; text-decoration: underline;" href="/{$country}/{$lang}/{$CAT.ID}_{$CAT.friendlyTitle}/{$ArtCat_26[ArtCat_26].ID}_{$ArtCat_26[ArtCat_26].friendlyTitle}.html?do=article">
                    <b>{$ArtCat_26[ArtCat_26].Title}</b>
                </a>
                </h4>
                <p class="news">
                <span class="small2">{$ArtCat_26[ArtCat_26].ShortText}
                 <a href="/{$country}/{$lang}/{$CAT.ID}_{$CAT.friendlyTitle}/{$ArtCat_26[ArtCat_26].ID}_{$ArtCat_26[ArtCat_26].friendlyTitle}.html?do=article"></a>
                 </span>
                </p>
                {/foreach}
              </div>
            {else}
              <div class="ui-body ui-body-c">
                {foreach from=$category_26 item=CAT}
                <h4 style="color: #236EE8;">
                <a style="color: #236EE8; text-decoration: underline;" href="/{$country}/{$lang}/{$CAT.ID}_{$CAT.friendlyTitle}/{$ArtCat_26[ArtCat_26].ID}_{$ArtCat_26[ArtCat_26].friendlyTitle}.html?do=article">
                    <b>{$ArtCat_26[ArtCat_26].Title}</b>
                </a>
                </h4>
                <p class="news">
                <span class="small2">{$ArtCat_26[ArtCat_26].ShortText}
                 <a href="/{$country}/{$lang}/{$CAT.ID}_{$CAT.friendlyTitle}/{$ArtCat_26[ArtCat_26].ID}_{$ArtCat_26[ArtCat_26].friendlyTitle}.html?do=article"></a>
                 </span>
                </p>
                {/foreach}
              </div>
            {/if}
            {assign var=number value=$number+1}
        {/section}

Answer 1

首先，您必须找到现在正在应用的样式规则。为此，请在 css 中找到最具体的规则，或者只检查浏览器开发人员栏中的元素。

一旦找到它，只需从那里删除样式即可。

如果由于某种原因您无法编辑该文件，请在某处添加更具体的样式

如果当前样式是

.ui-body{}

更具体的样式可以是

div.ui-body{}

body .ui-body{}

所以这些更具体的样式将覆盖样式

只有在使用 !important 或内联样式时才会出现边缘情况。

如果元素有一些应用了一些javascript的内联样式，比如

<div class="ui-body ui-body-c" style="border:1px solid red">

外部 css 中的任何规则都不能覆盖它，但是 !important。

如果你使用

.ui-body{
border:1px solid red !important;
}

这将覆盖所有样式，包括内联样式，这违背了 javascript 程序员的普遍看法，因此不使用它总是安全的，因为程序员通常认为内联样式可以覆盖所有 css 规则。

始终尝试使用一些更具体的样式规则，因为练习使用 !important 会使您在继续前进时难以调试问题。