Question

我有一个可排序的.column类元素。我在该专栏中有两个ID：

<div id="column1" class="column ui-sortable">
<div id="column2" class="column ui-sortable">

我希望当moused结束时有一只张开的手，而只有在第1列上拖动时才会有一只闭合的手。如果我的CSS看起来像这样：

.ui-sortable{
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
#column1 .ui-sortable-helper{
    cursor: grabbing;
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

然后打开的手显示在column1和column2上，而关闭的手显示在被拖动的column1上。但由于我只想在第1栏上张开，我尝试了：

#column1 .ui-sortable{
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}

但这对column1没有任何作用。我得到一个默认光标。为什么添加id工作在.ui-sortable-helper上，而不是ui-sortable？如何让空位仅显示在第1列？

谢谢！

Answer 1

您需要的CSS规则是：

#column1.ui-sortable

因为你要指定带有 id '＃column1'的元素，其中 class 'ui-sortable'，而不是任何带有'ui'类的元素-sortable'是'＃column1'的孩子。

由于下面的讨论，我添加了一些关于CSS类和元素的基本信息：

<div id="column1" class="column ui-sortable">

此元素有一个ID“column1”，您通过＃符号+ IDname引用CSS中的ID，因此在这种情况下为“＃column1”。该元素还有两个类'column'和'ui-sortable'。在您的情况下，您只想将CSS规则应用于此specfic元素。您可以通过使用ID-Selector来实现这一目标：

#column1 { }

在您使用的问题中：

#column1 .ui-sortable { }

这将被解释为通过ID'＃column1'找到一个元素，并且该父级的所有嵌套元素都具有类'ui-sortable'。没有匹配 - 因为元素本身有类，而不是孩子。如果删除CSS-Selector的空间：

#column1.ui-sortable { }

它被解释为通过ID'＃column1'找到一个元素，它有类'ui-sortable'这可能有点超重，因为id应该是唯一的，但它解决了你的问题。具有类'ui-sortable-helper'的元素是div＃column1的子元素，所以这里你需要空格。

<div id="column1" class="column ui-sortable">
    <div class="ui-sortable-helper">
    </div>
</div>

所以选择器必须有一个空格：

#column1 .ui-sortable-helper { }

如何才能使用ui-sortable来处理CSS中的特定id？

1 个答案: