CSS元素定位详解----案例集合--3（入门）

案例一：

代码来源（https://www.haolyy.com/html/1LoginRegister/login.html）

定位登录按钮：

css = footer[class$="loginButton"]     或   css = footer   这两种方式才能定位到

使用如下方式，定位不到：

css = footer[class^="FPfooter"]  或  css = footer[class~="FPfooter"]   这两种定位方式不能成功定位，具体原因不详

 

 

案例二：

代码来源：https://hlwm.chinazyjr.com/html/second/list.html

背景：

我们最终需要的元素是【夏日活动标3】这个元素

css = div[id="section-3"]>div:nth-child(2)>p.planBidTitle>span

css = div#section-3>div:nth-child(2)>p.planBidTitle>span

解释：

（1）div:nth-child(n)    这里面的n，代表上一层主元素的第多少个子元素

（2）判断某个元素是否是上一个元素的子元素，就点击上一个元素，折叠之后如果可以隐藏下一个元素，那么就是上一个元素的子元素，否者是相邻元素（在css里面，需要使用+）

折叠前后的效果图：