标签: css-selectors

我正在尝试在文本前添加破折号。参见图片。如何在文本前添加破折号，使其看起来像图像？

我有以下html

<div class="mrvl-ex-grid">
<article class="sample">
    <img src="/images/examples/PN9Xg.jpg" alt="Lorem Sum"><div class="mrvl-ex-item-hover-menu">
    <div class="mrvl-ex-item-preview-btn"></div>
    <label class="mrvl-ex-item-label">Video</label>
</div>
</article>
</div>

这是带有 CSS 的 jsfiddle：

https://jsfiddle.net/weina67/0vozsjsb/

我让悬停菜单和预览按钮正常工作（但中间的破折号不起作用。如何在预览按钮和标签之间的中间添加破折号？请参阅附图

当人们将鼠标悬停在图像上时，会显示悬停菜单以及标签和预览按钮。另外，我必须使破折号响应（在 1024px、1280px、1440px 上看起来不错）。它必须显示在预览按钮和标签的中间。

请注意，在小提琴中，您必须将鼠标悬停在图像上才能看到标签以及我想要添加破折号的位置。

我正在尝试更改悬停在 上的链接的颜色<div>。只使用 CSS 可以吗？如果没有，我将如何实现这一目标？

div {
  border: 1px solid black;
  padding: 15px;
}
div:hover {
  color: red;
}

<div>
  <a href='www.google.com'> www.google.com </a>
</div>

我有使用:target选择器的链接。单击时，相应的段落会突出显示。问题是：一旦单击，就无法清除选择。我希望当我再次单击所选项目时取消选中它。

例如：如果链接 1 被选中并且我再次单击它，那么它就会被取消选中。

jsfiddle

body {
  background: #fefefe;  
}

:target {
   background-color: #ccff66;
}

<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
<a href="#link4">Link 4</a>

<p id="link1">This is a text A</p>
<p id="link2">This is a text B</p>
<p id="link3">This is a text C</p>
<p id="link4">This is a text D</p>

笔记

• 我在使用单选/复选框的解决方法中取得了成功，但我想知道是否可以使用:target.

• 它不是重复的：帖子上很清楚，这里的目标是通过第二次单击来取消选中某个项目，而不是单击第三个“橡皮擦”项目（该项目在当前场景中甚至不存在） ）。

该问题的目的是调查执行以下操作的可能性：

.element:before {
  content: 'before';
  color: orange;
}

.element:after {
  content: 'after';
  color: green;
}

.element:after:hover + .element:before {
  color: red;
}

<div class='element'>&nbsp;</div>

我想在第一个具有 类的非空元素之前显示文本error。我用过.error:not(:empty):first-of-type::before但是没用。我缺少什么？

.error:not(:empty):first-of-type::before {
    content: attr(seq);
    display: block;
    background-color:red;
}

不起作用：

<div>
    <p class="error" seq="Error #1" ></p>
    <p class="error" seq="Error #2">2</p>
    <p class="error" seq="Error #3">3</p>
    <p class="error" seq="Error #4"></p>
    <div><b> Some text here  </b>
    <p></p>
</div>

工作正常：

 <div>
    <p class="error" seq="Error #1" >1</p>
    <p class="error" seq="Error #2">2</p>
    <p class="error" seq="Error #3">3</p>
    <p class="error" seq="Error #4"></p>
    <div><b> Some text here  </b>
    <p></p>
</div>

https://jsfiddle.net/71L7nvoy/

PS：我也尝试过:firts-child。也没起作用。

如果一个元素具有特定的类和父元素，我想对其进行样式设置。如果我使用caption > h1它，它可以完美工作，但是一旦我添加我的课程，.sub它就不再工作了。

HTML：

<caption>
    <h1 class="sub">Text</h1>
</caption>   

CSS：

作品：

caption > h1 {
    font-weight: 500;
    color: #777;
    font-family: sans-serif;
}

不起作用：

.sub caption > h1 {
    font-weight: 500;
    color: #777;
    font-family: sans-serif;
}

如何使用特定的parentand选择元素class？

Selenium 包含 findElement 函数，就像这样......

.find_element_by_

id
link_text
partial_link_text
name
class_name
tag_name
css_selector
xpath

显然，由于 HTML 页面的创建方式，有些标签受到设计的限制，例如 id、link_text、name、tag_name，因为并非所有标签都可能包含 id、link_text 等...但是，css_selector 和 xpath 可以做到几乎它们可以做的所有事情，然后还有一些，但它们可以交互的内容似乎受到限制。例如，某些按钮可能无法通过 xpath 单击，但可以通过 css_selector 单击。

所以我想知道，什么时候人们会想使用其中之一（特别是 xpath 或 css_selector）？

其他函数（id、link_text 等）几乎没有用，因为（至少）我发现 xpath/css_selector 也可以做到这一点？

相比 xpath/css_selector 使用 link_text 有什么好处吗？

尝试创建 CSS 选择器或 XPATH 选择器，它将在给定元素 ID 之后查找下一个 span 元素（不一定立即）。

我可以使用 CSS '+' 来选择紧接在元素之后的下一个跨度，但是如果跨度不是紧接在元素之后，则这将不起作用。

#email + span[class*='jsonform-errortext']

如果跨度直接位于输入元素之后，这将起作用，但在下面的示例中它将不起作用。

<div>
    <input type="text" class="c-form-text-input user-success" name="email"  id="email" maxlength="100" required="required">
</div>
<span class="help-block jsonform-errortext" style="display:none;"></span>

这是我的 html 标签（突出显示的一个）：

我试图用 cypress 单击，但是 cypress 找不到它，这就是我正在使用的：

cy.get('sg_button sg newflex hbox acenter ').click()

我开始玩cypress，我需要选择这样的链接：

<table cellSpacing="0" cellPadding="0" width="100%" border="0" class="ToolBarBkg">
  <tbody>
    <tr>
      <td class="ContentLeftLinks" align="right" width="98%" height="40" nowrap>
        &nbsp;
        <a href="javascript:FireEvent('Agregar')" style="COLOR: black; font-weight: normal" tabindex="-1">
          <IMG src="/metassc/images/toolbar/AltaOn.gif" align="absmiddle" border=0> Alta
        </a>
        &nbsp;

        <a href="javascript:FireEvent('Eliminar')" style="COLOR: black; font-weight: normal" tabindex="-1">

          <IMG src="/metassc/images/toolbar/BajaOn.gif" align="absmiddle" border=0> Baja
        </a>

在这个页面之后我已经尝试过这些：

cy.contains('a[href~=Agregar]')
cy.contains('a[href*="Agregar"]')
cy.contains('a:contains("^Agregar$") ')
cy.contains('a:contains("^Alta$") ')

但它们似乎都不起作用。任何想法？