如何用css选择器选择某元素下的最后一个子元素？

html-css04

如何用css选择器选择某元素下的最后一个子元素？,第1张

CSS中没有针对最后一个子元素的选择器，但有第一个（:first-child），

如果你能确定span后只有这一个a标签的话可以使用相邻兄弟选择器（span + a {...} ），兼容性有待测试，没这么用过。

具体可参考w3school中CSS 选择器的介绍：

http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp

.content:first{...}

.content:nth-child(1){...}

CSS3 :nth-child() 选择器

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

CSS :first-child 选择器

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

这要看你这个button和input是什么关系来决定，比方说它们是紧靠在一起的兄弟元素（input在button的后面），且拥有共同的父元素，就像下面这样：

<button type=search>AAAA</button>

<input type=search value="BBBB" />

则可以这样实现：

button[type=search]:focus + input[type=search] {width:130px}

+是弟弟（且必须是和自己最接近的弟弟，比如自己是老三，则选择的是老四）选择器。

原则上，只要另一个选择器不是当前选择器的祖辈（比自己大至少一辈）或自己的哥哥（因为css不存在父选择器和哥哥选择器），则基本上都可以通过各种选择器的结合选择到对方。