CSS selector 小知识学习分享

在设计器中,大家拾取网页元素后,在右侧的属性栏里都会有一个叫“查找路径”的选择框,一般也很少有人用到,打开后里面显示了一堆‘@ #¥#%#¥@ *T&’的玩意 😖,那么这个“查找路径”到底是个什么呢?有何用途?
CSS selector 小知识学习分享

设计器中的“查找路径”中显示的其实就是 cssSelector,是一种常用的选择器。简而言之,可以理解为通过 cssSelector 定位到你需要找到的页面元素。当然,一个页面元素(比如本例中的百度按钮)肯定不止一种方式的 cssSelector,通过上图可以发现有好几个,那么这些代码具体分别代表什么意思,继续往下看!

首先,你需要学会http://support.i-search.com.cn/article/1531101827667,IE 浏览器和 Chrome 都可以进行这种操作。

在selector中
# 表示id
. 表示class
> 表示子元素,层级

我们还是以上图的“百度按钮”为例,我们把“查找路径”中的代码复制出来,如下:

#su 表示选择 id 为 su 的节点
.bg s_btn btnhover 表示选择 class 为 bg s_btn btnhover 的节点
INPUT[id=su][class=bg s_btn btnhover][type=submit] 表示选择 id 为 su 且 class 为 bg s_btn btnhover 且 type 为 submit 的 input 节点
前 3 个 selector 还比较好理解,下面这第四个是什么鬼 😖 😓 😅
body > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(1) > FORM:nth-of-type(1) > SPAN:nth-of-type(2) > INPUT:nth-of-type(1)
别急,通过 IE 的开发者工具,我们来拾取一下看看结构,图如下:
CSS selector 小知识学习分享
CSS selector 小知识学习分享
通过图片可以看出,网页结构是一层一层的,括号后面的数字代表当前结构节点下的第几个子类,这样就可以和上面那段代码对应起来了吧。
同时在我们的设计器中,如果找到了这种规律,表示节点的数字是可以使用变量来代替的。

那么问题又来了,DIV:nth-of-type(1)SPAN:nth-of-type(2)这又是什么鬼?
DIV:nth-of-type(1)表示选择 DIV 标签下的第 1 个节点
SPAN:nth-of-type(2)表示选择 SPAN 标签下的第 2 个节点

附上一张 selector 选择器表供大家参考
更多资料大家可以在网上找哦,其实我也是初学者,也在不断的学习。
各位同学有好的相关知识也赶紧分享出来哈!
CSS selector 小知识学习分享
CSS selector 小知识学习分享