标签: css-selectors

我正在尝试在导航栏按钮上使用:first-child，但由于某种原因它适用于所有导航按钮。\n同样适用于:last-child.

html:

<div fxLayout="row" class="top-padding-30">\n  <ul fxFlex="100" *ngFor="let tab of navigation_buttons;">\n    <li class="tab tab-text" [ngClass]="{\'active-tab\': tab.isSelected == true}" (click)="selectTab(tab)" fxLayoutAlign="center center">{{tab.name}}</li>\n  </ul>\n</div>\n

CSS：

.tab {\n  background-color: #d2d2d2;\n  padding: 18px;\n  cursor: pointer;\n  margin-right: 3px;\n  &.active-tab {\n    background-color: #452f46;\n    color: #ffffff;\n  }\n  &:first-child {\n    border-radius: 0px 15px 15px 0px;\n  }\n  //   &:last-child {\n  //     border-radius: 15px 0px 0px 15px;\n  //   }\n}\n

TS：

navigation_buttons = [{\n  isSelected: false,\n  name: \'\xd7\x9c\xd7\x91\xd7\xa0\xd7\x94 (6%)\'\n}, {\n  isSelected: …

我试图单击一个复选框，但它一直在单击“条款和条件”链接。虽然我的 xpath（下面提到）可以在最小化的窗口上工作，但是当窗口最大化时，它无法单击复选框，因为 href（图像）出现在复选框旁边的第二行中。寻找有关单击最大化窗口上的复选框小部件的一些建议。我需要集中注意力。

有趣的是，当我将鼠标悬停在 ::before （CSS 选择器）上时，只有小部件才会突出显示。

<div class="checkbox u-mar-bot-5">
  <div class="checkbox__container">
    <input class="checkbox__input" type="checkbox" id="basket-contact-terms" required data-parsley-multiple="basket-contact-terms" style>
<label class="checkbox__label checkbox__label--has-link checkbox__label--small" for="basket-contact-terms" style>
::before 
"I have read and agree to " <a class="text-link text-link--base text-link- small" href="/terms-conditions" target="_blank">Terms and Conditions</a>
    </label>
  </div>
</div>

图片：条款和条件

我尝试了几个选项，但始终无法选中该框，而是点击了“条款和条件”链接。我一定缺少一些基本的东西。

driver.findElement(By.xpath("//label[@for='basket-contact-terms']")).click();
driver.findElement(By.xpath("//label[contains(@class,'checkbox__label checkbox__label--has-link checkbox__label--small')]")).click();

我确实环顾四周，发现有人建议使用这个（如下），所以我尝试了但没有成功：

WebElement elem = driver.findElement(By.xpath("//div[contains(@class,'checkbox u-mar-bot-5')]"));
Actions action = new Actions(driver);
action.moveToElement(elem).click().build().perform();

任何建议将不胜感激。

假设我正在抓取一个网页，并且我想选择网页上的某个图像。正如您可以根据类名称查找元素一样，我想通过其标签来选择图像src。如何选择我已经知道标签的图像src？

即我想选择标签src为：

https://assets.bandsintown.com/images/pin.svg

如果 a 中只有三段div，结果应该是最后一段是红色的。

last-of-type但是，如果我的中只有一个段落，我该如何忽略结果呢div？

CSS：

p:last-of-type {
  background: #ff0000;
}

我想知道是否有办法从 .css 文件编辑一个特定的 .html 文件。（没有其他CSS文件或样式标签）

您可以像这样编辑特定的类：

p.class1 {
  color: blue;
}

那么有没有办法只针对特定文件编辑CSS .html？像这样的东西？：

p.file1.html {
  color: blue;   \\text is blue just in file1.html
}

我试图在网站上找到一个元素并获取所有元素。为此，我使用硒化物/硒。我正在寻找的元素无法由一个类定位，因此我尝试定位具有两个类（父类和子类）的元素。仅使用 Selenide，我就可以使用以下方法轻松定位元素：

SelenideElement basketIcon = $(By.className("buttons")).$(byClassName("btn-cart"))

这肯定会给我一个元素。但是我怎样才能找到一个元素数组呢？ List<SelenideElement> productName1 = WebDriverRunner.getWebDriver().findElements(By.className(""));但它不起作用，我也尝试过：List<WebElement> productName = WebDriverRunner.getWebDriver().findElements(By.className("buttons"));但是这里如何添加另一个类来定位元素？$(byClassName("btn-cart"))？或者还有其他方法可以做到这一点吗？

我也尝试过使用ElementsCollection elements = WebDriverRunner.getWebDriver().findElements(By.className(""));但它不起作用......

编辑： 我有一个名为“DriverFactory”的类，用于打开浏览器：

public static void openBrowser(String browserName, String url) throws Exception {
    
        WebDriverManager.chromedriver().browserVersion(chromeversion).setup();
        Configuration.browser = "Chrome";
        Configuration.startMaximized = true;
        driver.get(url);
    }

另一个类，我在其中定义定位器：

public class EE_MonitorCategoryElements extends DriverFactory {


protected static List<WebElement> productName = getWebDriver().findElements(By.id("asddsa"));
}

和一个测试类：

@Test
public void ads() throws Exception {
    DriverFactory.openBrowser("Chrome", "https://google.ge");
}

当我使用“getWebDriver()”添加最后一个元素定位器并且我尝试运行测试时，它给了我一个错误：没有绑定测试，并且在我删除/注释 getWebDriver 行的地方，它正在工作

我在执行某些操作时发送邮件，其中一些包含 HTML 表。我想对表中 2 行中的 1 行进行着色，为此我使用以下规则：

tr:nth-child(even) {
  background-color: #c4409720;
}

在 mailhog 中，输出是完美的并且可以工作，但是一旦在 Outlook 或 Gmail 中查看电子邮件，行就不会着色。请注意，我不知道我会提前有多少行，因为邮件模板是用列表和循环填充的。

我猜这些邮件客户端不支持选择器？

那么我怎样才能以那些邮件客户端能够理解的方式实现这一点呢？

提前致谢 ！

如果我们有一个包含嵌套 UL 列表的 UL 列表，例如

<ul>
    <li>Item
        <ul>
            <li>Subitem</li>
        </ul>
    </li>
</ul>

我们只需要获取第一层的所有LI元素，我们可以使用querySelectorAll()如下方式：

let firstLevelChildren = document.querySelectorAll('ul > li');

但是，如果我通过创建 UL 列表document.createElement('ul')并需要通过获取此类特定节点的第一级子节点怎么办querySelectorAll(selector)？

有选择器吗？

我知道node.children，但我需要一条路querySelectorAll()。

第一级儿童的数量可能未知。也可能存在不同的情况，例如'> li > ul'等等。

方式如：

let ul = document.createElement('ul');
ul.innerHTML = '<li>Item<ul><li>Subitem</li></ul></li>';
let items = ul.querySelectorAll('> li');
console.log(items);

抛出错误

' > li' 不是有效的选择器。

可能的重复:
这在jquery $('#id',javascript_object)中意味着什么;
$(同一元素的''类',元素)是什么意思？
$()的第二个参数是什么意思？

任何人都知道是什么:

$('element', $$).function(){...};

(见此处)

和

$('element', this).function(){...};

(见此处)

？

这让我很难过......

在这看到JSBIN

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
    .slide-nav:nth-of-type(1) { color:red } /* this should select the number 1 */
</style>
</head>
<body>

  <div class="image">
    <span class="slide" data-order="4" rel="content-images/teta.jpg" ></span>
    <span class="slide" data-order="3" rel="content-images/champ.jpg" ></span>
    <span class="slide" data-order="2" rel="content-images/clouds.jpg" ></span>
    <img class="slide initial" data-order="1" src="content-images/air.jpg" />
    <span class="spinner"></span>

    <!--  
    delete this line to comment the two arrow links -->
    <a class="arrow next" href="javascript:void(0)">&rarr;</a>
    <a class="arrow prev" href="javascript:void(0)">&larr;</a>
    <!-- -->

    <a class="slide-nav on" href="javascript:void(0)" rel="1">1</a>
    <a class="slide-nav" …