css3 - css中如何让第一个和最后一个不被选中?

html-css019

css3 - css中如何让第一个和最后一个不被选中?,第1张

方法很多种，例如通过伪类：last-child{ 样式 }这个是选择最后一个父级子元素。

第一个父级子元素可以这样nth-child(1){ 样式 }

除了上面的方法还可以通过给第一和最后一个元素设置一个额外的类来设置样式。

利用CSS3新增的一个伪类last-child

如下代码，设置最后一个类名为div1的元素

css写法为

.div:last-child{/*这里添加属性*/} <!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

<style>

  .div1:last-child{}

</style>

</head>

<body>

  <div class="div1"></div>

  <div class="div1"></div>

  <div class="div1"></div>

  <div class="div1"></div>

  <div class="div1"></div>

  <div class="div1"></div>

</body>

</html>

1、首先CSS3新增的：not()伪类选择符，匹配不含有选择符的元素。

2、其次鼠标经过当前li，当前li添加上边框颜色变为红色，第一个li的上边框始终为红色。

3、最后使用lastchild的border为none去掉最后一个元素的右边框即可。