关于前端:CSS3新增了哪些选择器属性结构伪类伪元素选择器

31次阅读

共计 3474 个字符,预计需要花费 9 分钟才能阅读完成。

在 css3 提供的新选择器之前,抉择一个元素须要借助 id 或者 class,css3 新增的选择器能够更灵便的去抉择须要的元素,那 css3 提供了哪些好用的选择器呢?

首先就是属性选择器,咱们能够通过属性选择器在同样的标签 / 类中抉择出具备雷同属性的元素,不必额定再增加 class 或者 id。

比方须要抉择出 input 标签中具备 value 属性的内容,就能够按以下形式

// css
input[value]{color: #333;}

// html
<input type="text" value="请输出用户名">
<input type="text">

属性选择器还有以下匹配规定(E 示意选择器,att 示意属性值,val 示意匹配的内容)

选择符 简介
E[att] 具备 att 属性的 E 元素
E[att=val] 具备 att 属性且值为 val 的 E 元素
E[att^=val] 具备 att 属性且值以 val 结尾的 E 元素
E[att$=val] 具备 att 属性且值以 val 结尾的 E 元素
E[att*=val] 具备 att 属性且值蕴含 val 的 E 元素

抉择出 input 标签中 type 为 password 的元素

// css
input[type=password]{color: #000}
// html
<input type="text">
<input type="password">

抉择出 div 标签中 class 以 movie 结尾的元素

// css
div[class^=movie]{color: brown}

// html
<div class="movie-sky"> 天空之城 </div>
<div class="movie-cat"> 龙猫 </div>
<div class="movie-windy"> 起风了 </div>
<div class="tv"> 武林外传 </div>

依照以上五种属性抉择规定,能够自在的抉择具备某些特色的元素,那么如果此时我须要抉择的元素没有独自的属性呢。
比方我想要在一串列表中抉择出奇数项和偶数项元素,别离设置不同的背景色彩,此时就须要构造伪类选择器退场了。
构造伪类选择器能够按下标选出指定项,比方第一项 :first-child,最初一项 :last-child,奇数项 :nth-child(even),偶数项 :nth-child(odd),第任何一项 :nth-child(n)

拿上述选择器做一个演示

// html
<ul>
  <li> 千与千寻的神隐 </li>
  <li> 起风了 </li>
  <li> 龙猫 </li>
  <li> 天空之城 </li>
  <li> 魔女宅急便 </li>
</ul>

// css
ul :first-child {color: brown // 抉择 ul 的第一个子元素设置字体色彩为棕色}

ul :last-child {text-decoration: underline; // 抉择 ul 的最初一个子元素设置下划线}

ul :nth-child(even){font-weight: bold;  // 抉择 ul 的偶数子元素 设置字体加粗 ( 下标从 1 开始)
}

能够看到,以上每一个伪类选择器与前一个选择器并没有间接连在一起,都有一个空格,那连在一起示意什么意思呢?拿  :first-child 来举例,:last-child 和 :nth-child 都是相似的原理

ul :first-child  示意抉择 ul 里的第一个子元素 
ul:first-child   示意抉择第一个 ul 元素 

以下为 ul:first-child

如果咱们须要对子元素的选择器属性进行校验,心愿抉择 ul 里的第一个子元素,并且是 li,那么就能够这样定义

ul li:first-child

然而如果第一个元素与选定的元素不匹配,那么设置的款式就不会失效

// css
div p:first-child {color: brown  // 先找到 div 的第一个子元素,发现它并不是 p 元素,所以款式不失效}

// html
<div>
   <div>div---- 千与千寻的神隐 </div>
    <p>p---- 起风了 </p>
    <p>p---- 龙猫 </span>
    <h6>h6---- 天空之城 </h6>
    <div>div---- 魔女宅急便 </div>
</div>

那如果,咱们想要抉择 div 上面的第一个 p 元素呢?此时就能够应用 :first-of-type

// 示意抉择 div 下 p 元素的第一个子元素
div p:first-of-type {color: brown}

那如果没有限定指定的子元素类型,所有的不同类型的子元素都会被设置款式

// css
div :first-of-type {color: brown}

与 :first-of-type 相似的还有以下两种选择器,别离是  :last-of-type(抉择某种类型的最初一个子元素),:nth-of-type(按指定规定抉择元素)

// css
div :first-of-type {color: brown}

div :last-of-type {text-indent: 10px;}

div :nth-of-type(2n+1) {text-decoration: underline;}

来一个表格总结以下以上六种构造伪类选择器

选择符 简介 备注
E :first-child 抉择 E 元素的第一个子元素 E A:first-child(抉择 E 元素的第一个子元素,且该子元素是 A 类型元素)
E :last-child 抉择 E 元素的最初第一个子元素 E A:last-child(抉择 E 元素的最初第一个子元素,且该子元素是 A 类型元素)
E :nth-child(n) 抉择 E 元素的指定规定元素,比方 1、2、3 这样的数字,even(偶数)、odd(基数)这样的关键字,n 或者 2n+ 1 这样的表达式 E A:nth-child(n)(抉择 E 元素中合乎指定规定的子元素,且该子元素是 A 类型的元素)
E :first-of-type 抉择 E 元素中不同类型的子元素中的第一个 E A:first-of-type(抉择 E 元素中子元素为 A,A 元素中的第一个)
E :last-of-type 抉择 E 元素中不同类型的子元素中的最初一个 E A:last-of-type(抉择 E 元素中子元素为 A,A 元素中的最初一个)
E :nth-of-type(n) 抉择 E 元素的不同类型的指定规定 E A:nth-of-type(抉择 E 元素中子元素为 A,A 元素的指定规定)

以上的属性选择器和构造伪类选择器都是操作元素自身,那接下来这个选择器就很神奇,它会增加一个新的不存在的元素,并操作,一起来看看伪元素选择器。

伪元素选择器有两个,::before,在元素的后面增加一个行内元素,::after,在元素的前面增加一个行内元素,须要增加两个冒号,为了兼容,也能够只写成一个冒号

设置伪元素,必须的属性是 content,其它的属性能够依据本人的须要设置,它常见的有以下几种用处,增加一个小图标,比方圆点,箭头

实现代码如下

// css
div {position: relative;}

div::after {
   position: absolute;
   top: 7px;
   left: 70px;
   content: '';
   display: block;
   width: 7px;
   height: 7px;
   border-right: 1px solid #333;
   border-top: 1px solid #333;
   transform: rotate(45deg)
}

// html
<div> 查看更多 </div>

或者设置鼠标滑动后增加一个遮罩层,成果显示如下

 实现代码如下
// css
div{
   position: relative;
   width: 200px;
   height: 200px;
   margin-right: 60px;
}

img {
   width: 100%;
   height: 100%;
}

div::after {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   content: '';
   width: 100%;
   height: 100%;
   background: url(./src/broadcast.png) rgba(0,0,0,.5) center center no-repeat
}

div:hover::after{display: block;}

// html
<div>
   <img src="./src/pig.jpg">
</div>

css3 减少的以上选择器能够缩小 html 的构造,更加灵便的获取须要的元素

正文完
 0