标签: css-selectors

这是我用嵌套div在这段代码中写到达到div手机的方式吗？

CSS

#pagewrap #pagemain .content .colrow .container .col548 #contactInfoArea #phone
{

} 

HTML

<!-- Start: Pagewrap -->
<div id="pagewrap">
<div id="header">
    <div class="headerWrapper">
        <div id="headerTopItems"> <a class="mainLink" href="../Telge-Energi/Webbkarta/">Webbkarta</a> <a href="#" class="login closed">Min Sida</a>
            <div id="loginBoxWrapper">
                <div id="loginBoxButtonWrapper">
                    <div class="rounded buttonWrapper"></div>
                    <div id="topLoginButton">
                        <div class="rounded topLeft"></div>
                        <div class="rounded topRight"></div>
                        <a href="#" class="login open">Logga in</a> </div>
                    <div id="loginButtonShadow">
                        <div class="rounded topRight"></div>
                    </div>
                </div>
                <div id="loginBox">
                    <div class="rounded topLeft"></div>
                    <div class="rounded bottomLeft"></div>
                    <div class="rounded bottomRight"></div>
                    <div class="formWrapper"> </div>
                </div>
                <div id="loginBoxShadow">
                    <div class="rounded …

我有一个表,其中包含由类标记的行.这些行应该是斑马条纹.需要注意的是,它们并不总是连续的.

我尝试过按表和类名匹配,但最终结果总是不正确.发生的事情是条带化将应用于表级别,然后仅在具有类的行上启用.

我需要改变什么才能使这项工作像我想要的那样？

脚本

function FormatTable()
{
   $("#TableId .arbitrarySelector:nth-child(2n+1)" ).addClass('anotherEquallySpecialRow')
}

HTML

<table id="TableId" onclick="FormatTable()">
    <tr class="arbitrarySelector">
        <td><div class="space">Should be Changed and is</div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should Not be Changed and is Not</div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should be Changed and is</div></td>
    </tr>
    <tr>
        <td><div class="space"></div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should NOT be changed but is</div></td>
    </tr>
    <tr>
        <td><div class="space"></div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should be Changed and is</div></td>
    </tr>
    <tr>
        <td><div class="space"></div></td>
    </tr>
    <tr>
        <td><div class="space"></div></td>
    </tr>
    <tr …

有没有办法让普通文本和链接在CSS中共享相同的样式？

请在下面找到一个例子:

div.test, div.test a
{
font-size:0.8em;
}

我希望文本和链接能够获得相同的风格,但它没有按预期工作......

欢迎任何帮助.

干杯.

高堤耶.

用户可以输入可能包含段落或列表的描述.或者他们可能只输入文本而没有任何封闭<p>或<ul>元素.我需要做的是删除第一个元素上方和最后一个元素下方的大部分填充和边距,以便用户输入的内容周围有一个很好的紧密边框.所以我可以做以下其中一项:

• 使用我不知道的css规则只定位第一个和最后一个元素
• 使用CSS3或HTML5(我假设有内这些东西很容易做到我想要的),希望大家升级他们的浏览器,同时尽快将旧的浏览器刚刚得到的页面的略丑陋版本
• 使用Javascript查找第一个和最后一个元素并进行相应修改
• 修改html以添加类 <p class="first">

理想情况下,第一种解决方案存在,是吗？我对第二种解决方案没问题,但如果没有,它是否存在？最后2我不在乎......

更新:不关心IE6.但我确实需要处理的情况,如果有只是文本首先,没有任何<p>或<ul>或其他元素,然后为上边距/填充做其实也没什么特别的需求.

使用此HTML代码.

<div class="noote">
    <p class="first admonition-title">Noote</p>
    <p class="last">Let's noote.</p>
</div>

如何用css将Noote的颜色设置为红色？我的意思是,如何用css为它设置(div class ="noote")和(p class ="first")？

<td class="blue">
    <a href="lnk1.aspx">Hi1</a> 
    <a href="lnk2.aspx">Hi2</a> 
    <a href="lnk3.aspx">Hi3</a>
    <div>Not Blue</div>
</td>

我希望标签中的类("蓝色")使Hi1,Hi2和Hi3变为蓝色.

那个班的主管应该是什么？

????
{
    color:blue;
}

我对浏览器应用CSS规则感兴趣.

虽然我知道没有真正的区别,但我想知道它是否更有效率....

• 限制元素范围

a.external
/*instead of*/
.external

Run Code Online (Sandbox Code Playgroud)

我有一个嵌套在一行中的三列布局.我想在除最后一列之外的每一列的右边添加一个边框.我还想删除左边的填充并用第一列的左边距替换它,然后移除右边的边距并用最后一列的右边距替换它.我尝试使用first-child和last-child选择器,但它们不起作用.

谁能指出我正确的方向？

#row {
}

.box {
    border-right: 1px dotted #e1e1e1;
    margin: 0;
    padding: 0 10px;
    width: 139px;
}

#row div:first-child {
    padding-left: 0;
    margin-left: 10px;
}

#row div:last-child {
    border-right: 0;
    margin-right: 10px;
    padding-right: 0;
}

<div class="row">

    <div class="box">
        <h3>First Title</h3>
        <div>Stuff</div>
    </div>

    <div class="box">
        <h3>Middle Title</h3>
        <div>Stuff</div>
    </div>

    <div class="box">
        <h3>Last Title</h3>
        <div>Stuff</div>
    </div>

</div>

有很多CSS选择器有什么缺点？

是否存在与拥有大量CSS选择器相关的性能问题？任何链接/真实测试？

我找到了https://addons.mozilla.org/en-us/firefox/addon/css-usage/,我看到它的使用的唯一原因是因为它可能有助于从最终的CSS中删除未使用的CSS类,所以它会更小.但它仍然被浏览器缓存,所以我发现它的大小有问题.

如果我写

h1:hover, li:hover {color:green;}

h1和li元素都可以获得悬停效果.

如果我写的话:

*:hover {color: green;} 

这仅对锚元素有效.

是:hover pseudoclass不适用于通用选择器吗？