定位元素的注意事项(划重点)

  • 找到待定位元素的唯一属性
  • 如果该元素没有唯一属性,则先找到能被唯一定位到的父元素/子元素/相邻元素,再使用 > , " " , + 等进行辅助定位
  • 不要使用随机唯一属性定位
  • 最重要的是多跟研发沟通,尽量把关键元素加上ID或者name,并减少不合理的页面元素,例如重复ID这样的事情最好不要发生

首先,基础的CSS选择器

选择器名字例子例子描述
基础选择器
.classclass选择器.intro选择 class="intro" 的所有元素。
#idid选择器#firstname选择 id="firstname" 的所有元素。
*通配符 选择所有元素。
element标签选择器p选择所有

元素。

多层选择器
element,element分组选择器div,p同时选择所有
元素和所有

元素。

element element后端选择器div p选择
元素内部的所有

元素(包括子元素、孙子元素)

element>element子元素选择器div>p选择
元素下的

子元素

element+element相邻选择器div+p选择
元素之后的所有兄弟

元素。

属性选择器
[attribute][target] 选择带有 target 属性所有元素。
[attribute=value][target=_blank] 选择 target="_blank" 的所有元素。
[attribute*=value]a[href*="miitbeian"] 选择a节点,里面的href属性包含了 miitbeian 字符串
[attribute^=value]a[href^="http"] 要选择a节点,里面的href属性以 http 开头
[attribute$=value]a[href$="gov.cn"] 选择a节点,里面的href属性以 gov.cn 结尾
[attribute~=value][title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value][lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。

如果一个元素具有多个属性

<div class="misc" ctype="gun">沙漠之鹰</div>

CSS 选择器 可以指定 选择的元素要 同时具有多个属性的限制,像这样 div[class=misc][ctype=gun]

html页面中,css正确写法的栗子

/* id选择器 */
#abc {
    color: #cc0000;
    font-size: 12px;
}

/* class 选择器 */
.down {
    color: #66cc66;
}

/* 标签选择器 */
p {
    background: cornflowerblue;
}

/* 标签选择器可以与class选择器组合使用 */
p.down {
    font-size: 24px;
}

/* 分组选择器 */
ul,
div,
.up {
    color: #cc0000;
}

/* 属性选择器 */
[href] {
    color: #cc6600;
}

span[title="hello"] {
    color: #00FFFF;
}

span[title~="python"] {
    font-size: 24px;
}

/* 后代选择器 */
div li {
    background: forestgreen;
}

/* 子元素选择器 */
div[id="up"]>ul {
    color: #cc6600;
}

/* 相邻兄弟选择器 */
#down+li {
    font-size: 24px;
}

/* 后续兄弟选择器 */
#down~li {
    color: #cc0000;
}

然后,伪类选择器

选择器例子例子描述
:first-childp:first-child选择属于父元素的第一个子元素的每个

元素。

:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个

元素。

:nth-last-child(n)p:nth-last-child(2)同上,从最后一个子元素开始计数。
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个

元素的每个

元素。

:nth-last-of-type(n)p:nth-last-of-type(2)同上,但是从最后一个子元素开始计数。
:last-childp:last-child选择属于其父元素最后一个子元素每个

元素。

上一篇 下一篇