标签: css-selectors

我正试图在GWT中使用CSS选择器(例如"#someId .className a")来获取任意元素.

我正在构建一个可以在第三方网站上生活的JS小部件,并且希望能够与页面上的元素进行交互.通过JavaDocs搜索我没有看到任何可以通过选择器找到元素的东西.我确实遇到过GQuery,但似乎项目可能已经死了,我不确定它是否适用于GWT 2.

我考虑过的一个选项是将现有的库(jQuery,Mootools,Prototype等)包装到GWT类中,并通过JSNI公开所需的行为.看起来这可能非常庞大.

任何人都有使用GWT中的通用CSS选择器的经验？

类似于选择img[title="test"]我可以选择哪种风格属性float设置为left？

我想为它们设置左边距和下边距,这些边距不适用于右浮动图像.

谢谢.

我需要一个div内部的CSS选择器,但我希望它只选择该元素,如果它是该div中特定类的第一个元素.

是否有每个可视行块项的第一个元素的CSS选择器？也就是说,假设有20个块元素,使它们流过多条线以适合它们的父容器; 我可以选择每行最左边的项目吗？

通过查看所有元素的顶部位置,它在JavaScript中是可行的,但它在纯CSS中是否可行？

CSS:

button:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

HTML:

<button disabled="disabled">Ok</button>

当我单击按钮时,浏览器会添加按钮:活动状态使其看起来像被单击(即使它被禁用).我发誓,我想:只有在按钮启用时才会添加活动状态.我错过了什么？

是否有人知道如何使用CSS选择器:not()作为#some_id:not(.any_class_name)？

代码看起来好像是正确的,但它不起作用.没有not选择器还有另一种方法吗？我在网上找不到任何东西.

我正在制作一个Web应用程序,其中包含多个页面,但有几个页面有div id=some_id.我以为我必须通过any_class_name使用上面的CSS代码添加一次来添加特定的CSS来解决问题,但它不起作用.

正如我最近了解到的,在HTML5中,您可以将value属性与列表项一起使用,只要它们位于有序列表中即可.http://dev.w3.org/html5/markup/li.html

我一直试图按照它们的值来设置列表项的样式.我最好喜欢这样的风格:

li[value >= "10"] { background: orange; }
li[value >= "20"] { background: green; }

但是,目前只有CSS才能实现这一点.

这是一个我一直在玩的小提琴,尝试不同的东西.http://jsfiddle.net/Hf57v/2/

HTML:

<ol>
    <li value="33"></li>
    <li value="4"></li>
    <li value="12"></li>
    <li value="88"></li>
    <li value="jadfk"></li>
</ol>

CSS:

li { width: 20px; height: 20px; margin: 20px; background: gray; }

li[value~="3"] { background: orange; }  /* #1  */
li[value="4"] { background: red; }      /* #2  */
li[value="12"] { background: blue; }    /* #3  */
li[value^="1"] { background: green; }   /* #4  */
li[value^="8"] { background: …

我在无序列表中有一组列表标记,例如:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="active">4</li>
  <li>5</li>
  <li>6</li>
</ul>

有没有办法通过CSS在活动类之前或之后定位所有列表元素？

我试图在classa类元素的第一个孩子之后隐藏所有其他孩子.

div.classa {
    display:none;
}
div.classa:first-child {
    display:block !important;
}

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

如何使用纯css实现这一目标.

我并排放置了25%宽的物品.我clear:both在每四个元素之后添加一个.但是我需要在元素之间插入一个图形分节符.它必须在里面<ul>.为了有效,我将"section-break"(下面样本中的第一个li项)包装成一个<li>.

<ul>
    <li class="year"><h1>THIS IS A SECTION Break and 100% wide</h1></li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
</ul>

我希望每个第四个元素都是换行符,所以我用...

ul li:nth-of-type(4n+1) { clear: both; }

但是我希望li.year不受这种行为的影响,所以我尝试了这个

ul li:not(.year):nth-of-type(4n+1) { clear: both; }

现在<li>我上面的示例代码中的最后一个浮动到下一行但是不应该发生,因为第一行<li>不是浮动文章之一但包含标题.

是否可以堆叠:not和nth-of-type()选择到对方？