css - 使用 XPATH 和 CSS 设置特定元素的样式

Question

我想针对以下项目：

/html/body/div[2]/div/div[5]/div/table/tbody/tr[2]/td[2]/img

我怎样才能准确地设计这个？

目前我有这个css，它似乎将样式应用于imgdiv中的所有内容

div.PageHeaderDescription img {
    border-radius: 7px 7px 7px 7px;
    bottom: 10px;
    float: none;
    height: auto;
    margin-right: 10px;
    position: relative;
    right: -230px;
    width: 614px;
}

Answer 1

您可以使用

div.PageHeaderDescription img:first-child {
border-radius: 7px 7px 7px 7px;
bottom: 10px;
float: none;
height: auto;
margin-right: 10px;
position: relative;
right: -230px;
width: 614px;

仅访问第一张图片或

    div.PageHeaderDescription > img {
border-radius: 7px 7px 7px 7px;
bottom: 10px;
float: none;
height: auto;
margin-right: 10px;
position: relative;
right: -230px;
width: 614px;

仅访问 PageHeaderDescription div 中的图像。

Answer 2

nth-child您可以使用伪类指定特定的子节点。

div.PageHeaderDescription div table tbody tr:nth-child(2) td:nth-child(2) img

nth-child MDN 参考

Answer 3

用这个

div.PageHeaderDescription div table tbody tr td > img
{
border-radius: 7px 7px 7px 7px;
bottom: 10px;
float: none;
height: auto;
margin-right: 10px;
position: relative;
right: -230px;
width: 614px;
}

这仅适用于 td 内的图像

> 符号用于指定直接后代

http://www.456bereastreet.com/archive/200510/css_21_selectors_part_2/

它在现代浏览器中也有很好的支持:-)