第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

简介: 一、属性选择器其特点是通过属性来选择元素,具体有以下5种形式:1、E[attr] 表示存在attr属性即可;   div[class]2、E[attr=val] 表示属性值完全等于val;   div[class=mydemo]3、E[attr*=val] 表示的属性值里包含val字符并...

一、属性选择器

其特点是通过属性来选择元素,具体有以下5种形式:

1、E[attr] 表示存在attr属性即可;

   div[class]

2E[attr=val] 表示属性值完全等于val

   div[class=mydemo]

3E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置;

     div[class*=mydemo]

4E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置;

      div[class^=mydemo]

5E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置;

  div[class$=demos]

二、伪类选择器

除了以前学过的:link:active:visited:hoverCSS3又新增了其它的伪类选择器。

1、以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。

重点理解通过E来确定元素的父元素

  • E:first-child   第一个子元素
  • E:last-child    最后一个子元素
  • E:nth-child(n)   n个子元素,计算方法是E元素的全部兄弟元素

  div>ul>li:nth-child(3){  //选中第三个li 
           color: deeppink;

}  

E:nth-last-child(n) E:nth-child(n) 相似,只是倒着计算;

div>ul>li:last-child(2){  //选中倒数第二个li
         color: deeppink;

}

 2、 n遵循线性变化,其取值01234... 但是当n<=0时,选取无效

(1) 选中所有的奇数li

   li:nth-child(2n-1){
       color: red;
   }

(2)选中所有的7 的倍数的li

li:nth-child(7n){
      color: red;
    }
 (3)  选中前面五个
   li:nth-child(-n+5){
       color: red;
   }
  (4) 选中后面五个
   li:nth-last-child(-n+5){

 color: red;
   }
   (5)所有的偶数
   li:nth-child(even){
      color:red
   }
  (6) 所有的奇数
   li:nth-child(odd){
      color:blue;
   }

注意:

n可是多种形式:nth-child(2n)nth-child(2n+1)nth-child(-1n+5)等;

E:empty 选中没有任何子节点的E元素;(使用不是非常广泛)

没有任何的子元素,包括空格.

3、目标伪类

E:target 结合锚点进行使用,处于当前锚点的元素会被选中

      <li><a href="#title1">CSS (层叠样式表)</a></li>

  <h2 id="title1">CSS (层叠样式表)</h2>

   h2:target{

    color:red;

  }

三、nth选择器

  1.  :first-child  选择某个元素的第一个子元素;
  2.  :last-child  选择某个元素的最后一个子元素;
  3.  :nth-child()  选择某个元素的一个或多个特定的子元素;
  4.  :nth-last-child()  选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
  5.  :nth-of-type()  选择指定的元素;
  6.  :nth-last-of-type()  选择指定的元素,从元素的最后一个开始计算;
  7.  :first-of-type  选择一个上级元素下的第一个同类子元素;
  8.  :last-of-type  选择一个上级元素的最后一个同类子元素;
  9.  :only-child  选择的元素是它的父元素的唯一一个了元素;
  10.  :only-of-type  选择一个元素是它的上级元素的唯一一个相同类型的子元素;
  11.  :empty  选择的元素里面没有任何内容。

四、伪元素选择器

重点:E::beforeE::after

是一个行内元素,需要转换成块元素

E:afterE:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:afterE:before会被自动识别为E::afterE::before,按伪元素来对待,这样做的目的是用来做兼容处理。

E::first-letter   文本的第一个字母(如中文、日文、韩文等);

案例:首字下沉

E::first-line 文本第一行  文本第一行高亮..

E::selection 可改变选中文本的样式;

":" "::" 区别在于区分伪类伪元素

  关于beforeafter
      CSS2中 E:before或者E:after,是属于伪类的,并且没有伪元素的概念
      CSS3中 提出伪元素的概念 E::beforeE::after,并且归属到了伪元素当中,伪类里就不再存在E:before或者   E:after伪类;

相关文章
|
15天前
|
前端开发
CSS:高级选择器
CSS:高级选择器
29 1
|
15天前
|
前端开发 JavaScript
CSS:基础选择器
CSS:基础选择器
29 1
|
16天前
|
前端开发 JavaScript 容器
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
17天前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
50 1
|
1月前
|
前端开发 JavaScript
【CSS】选择器
【CSS】选择器
|
2月前
|
前端开发
CSS3选择器
【8月更文挑战第23天】CSS3选择器。
29 1
|
2月前
|
前端开发
CSS中的层级选择器&伪类选择器和伪元素选择器
CSS中的层级选择器&伪类选择器和伪元素选择器
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)