标签: css-selectors

我正在为我的考试进行修改,在没有标记的情况下回答过去的一些问题,我对此感到困惑:

对于以下规则,请说明影响以及影响哪些元素:

p ul li {
   color:blue;
}

我在JSFiddle上写了一些html:http://jsfiddle.net/2nkmzgv2/

无论如何它在这里:

<p>
  <ul>
      <li>Should this be blue?</li>
  </ul>
</p>

所以没有任何事情发生在文本中,我会认为它会改变蓝色,但实际上没有任何意义发生,问题的目的是抛弃你,或者我的语法/方法在html中是错误的？

我有以下ul列表:

<ul class="list">
    <li>
        <ul>
            <li></li>
        </ul>
     </li>
     <li></li>
<ul>

如何将CSS样式应用于li父级的最后一个class="list",而不是嵌套ul在内部ul

如果这是一个错误或我的理解很差,请澄清我.

我试图将第一个类型的选择器应用于一组div和p标签,并发现每个选择器的行为都不同.它只选择div标签的.form__group类而不是p标签

/* css */

.form__group:first-of-type {
  background: red;
}
.form__group:first-of-type span {
  font-weight: bold;
}

<!-- form__group class for p tag -->

<form class="form">
  <p class="form__message">test</p>
  <p class="form__group">
    <span>The first paragraph.</span>
  </p>
  <p class="form__group">The second paragraph.</p>
</form>

<!-- form__group class for div tag -->
<form class="form">
  <p class="form__message">test</p>
  <div class="form__group">
    <span>The fourth paragraph.</span>
  </div>
  <div class="form__group">The fifth paragraph.</div>
</form>

请看这个小提琴https://jsfiddle.net/sabarigr/52vu5dks/

我正在尝试将css应用于特定类中的所有跨度但排除其中一些,但以下代码不起作用:

.basket-items li span:not(.name,.count){border:solid 1px #ddd; border-radius:50%;}

我一直都:not喜欢这样:not(:empty).它不接受CSS课程吗？

这是html:

<ul class="basket-items">
    <li>
          <span class="ion-android-close"></span>
          <span class="name"></span>
          <span class="ion-plus"></span>
          <span class="count"></span>
          <span class="ion-minus"></span>
    </li>
</ul>

PS:请注意,在这里排除类意味着产生与类似问题不同的结果:我可以有多个:not()选择器吗？

我试图使用ul li制作导航栏并禁用CSS中的文本格式.代码工作得很好,因为我也为按钮做了一个小的淡入动画.如果我的导航栏中有下拉菜单,则会出现此问题.将鼠标悬停在具有下拉列表的li上也会导致下拉列表中的内容生动.

我知道可能有一些选择器你可以使用它不这样做,但到目前为止我还没有让它工作.什么是正确的做法？

这是HTML:

<nav>
    <ul>

        <a href="index.html"><li id="left">Home</li></a>
        <a href="#"><li>Menu 1</li></a>

        <li><span>Dropdown</span>
            <ul>
                <a href="#"><li>Dropdown menu 1</li></a>
                <a href="#"><li>Dropdown menu 2</li></a>
            </ul>
        </li>

        <a href="#"><li>Menu 3</li></a>
        <a href="#"><li id="right">Contact me</li></a>

    </ul>

</nav>

这是CSS:

nav{
  display: inline;
  float: left;
  background-color: #d48041;
  box-shadow: 0 1vh 2vh -0.5vh #F2B57B inset;
  width:90%;
  padding-left:10%;
  height:5%;
  font-weight: bold;
}

nav ul{
  list-style: none;
  margin:0;
  padding:0;
  display: inline;
}

nav ul a{
  text-decoration: none;
  color: black;
  font-size: 1.5vh;
}

nav ul a li{
  display:inline-block;
  float:left;
  text-align: …

假设我有一个这样的表格:

 <div class="fc-slats">
  <table>
    <tbody>
      <tr>
        <td class="fc-widget-content fc-major">16</td>
        <td class="fc-widget-content fc-minor">16</td>
        <td class="fc-widget-content fc-major">17</td>
        <td class="fc-widget-content fc-major">17</td>
        <td class="fc-widget-content fc-major">18</td>
        <td class="fc-widget-content fc-minor">18</td>
      </tr>
    </tbody>
  </table>
  </div>

我希望第一和第二个细胞有一种颜色,第三和第四个细胞有另一种颜色,第五和第六个细胞有第一种颜色......换句话说,它是旧的奇偶交替配色方案,除了每组有两个细胞.

我试图用CSS的nth-child选择器做到这一点:

fc-slats td:nth-child(int(n/2)) {
  background-color: red;
}

但我不知道如何编写"nth-child"选择器的公式.我想CSS不支持有数学函数一样int,或像条件语句if... then,所以在这种情况下,我将如何实现这一目标？

编辑:为了简洁起见,我在这个表中添加了6个单元格,但是假设表格具有任意长度; 换句话说,我正在寻找一种"通用"解决方案.

以下CSS可以进一步简化吗？

 .firstLevel .secondLevel .k-button,
 .firstLevel .secondLevel .k-input
 .firstLevel .secondLevel .k-picker-wrap,
 .firstLevel .secondLevel .k-textbox {
    border-style: none;
 }

我有多个span元素,并希望在显示以下文字span位置(10,19,28,37)是红色的.

我试过以下;

span {
    &:nth-of-type(9n+1) {
        color: red;
    }
}

唯一的事情是第一个跨度也得到了我不想要的CSS应用.它应该从位置开始10.我怎样才能解决这个问题？

我想知道是否有办法做到这一点。

我只想更改特定CSS类的单个属性，而不必再次复制它并分配不同的类名。

所以，如果我有这堂课

<div class="example">I am a red font with properties </div>

这是CSS

.example {
font-size:2em;
font-color:red;
padding:2%;
display:inline;
//other several properties }

现在，我想在另一个div中使用example类，但是我只希望字体为绿色。我不想复制相同的属性，而只是分配不同的类名，

<div class="example2">I am a green font with properties </div>

同样，example2与example相同，但是只有字体颜色会改变

这是CSS

.example2 {
 font-size:2em;
 font-color:green;
 padding:2%;
 display:inline;
 //other several properties same as example class

有没有一种方法可以导入CSS属性，而无需对其进行复制和重命名？就像是

<div class="example" onlychange="font-color:green">
           I am a green font with properties </div>

有什么技术可以实现诸如onlychange属性之类的东西吗？

我需要使用CSS来删除水平线.
这是HTML:

<div id='page'>
<div id='header'>
</div>
<hr>
</div>

我试过用:

#page hr:first-child{display:none;}

但这不起作用.我需要显示其他hr,所以我不能只删除它们.我需要针对这一个.