栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

7.19 Web前端-css特殊选择器

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

7.19 Web前端-css特殊选择器

大家晚上好,今天我么把选择器部分说完,今天说的都是与伪类相关的知识点。

1.伪类选择器:

1.1伪类的意思是不存在的类,或者说特殊的类,伪类用来描述一个元素的特殊状态

例如:第一个元素,被点击的元素,鼠标移入的元素···

一般请情况下,使用:开头,在这里我们使用到的有三种:

1、 :first-child    代表第一个子元素

2、 :last-child    代表最后一个子元素

3、 :nth-child()  代表选中第n个子元素

第三个括号内部可填的特殊值有: n,2n或even选中偶数,2n+1或odd选中奇数

以上这些伪类都是根据所有的子元素进行排序

1、:first-of-type  第一个子元素

 2、:last-of-type    最后一个子元素

3、:nth-of-type()  选中第n个子元素

功能跟上面三个差不多,但是不同的是,这是在同类型的子元素中去选择

1.2否定伪类

否定伪类的作用就是将符合条件的元素从选择器中去除,和上面选中的恰好相反

语法   :not() 括号中放元素名

2.a元素的伪类:

a标签之间的介绍中就说过是一个特殊的标签,对于a元素来说,它有各种各样的变化,在这我们说四个a元素的伪类:它们分别是:

link:用来表示未访问过的链接

visited:用来表示访问过的链接

hovor:用来表示鼠标移入的状态,在后面会经常用到

active:用来表示鼠标点击后的状态

下面我来用代码举个例子给大家看看四个伪类的用法:



  
    
    
    
    Document
  
  
    第一个链接
第二个链接
第三个链接
第四个链接

上面是四个普通的a标签的链接,运行结果如图:

我们添加四个伪类: 

 



  
    
    
    
    Document
    
  
  
    第一个链接
第二个链接
第三个链接
第四个链接

运行结果如下:

 

 可以看到实现了上述所述的功能。

3.伪元素选择器:

 伪元素的定义是表示页面中一些特殊的并不真实存在的元素,我们选择伪元素要用到五个语法,它们分别如下:

::first-letter   表示第一个字母

::first-line     表示第一行

::selection   选中的内容

::before       元素的开始位置

::after         元素的结束位置

注意:before和after必须要结合content使用

伪元素选择器在这里不针对具体的某个元素,而是针对它所指代的一行或者某个字母。

 4.选择器的权重问题:

选择器的权重:

内联样式                                1000  

id选择器                                100

类和伪类选择器/属性选择器                   10

元素选择器                                1

通配符、子选择器、相邻选择器等。如*、>、+     0000

继承的样式      没有优先级

!important    最高优先级

注意:

比较优先级时,需要将所有选择器的优先级进行相加计算,最后优先级越高,则优先显示

(并集选择器)分组选择器是单独计算的

如果优先级计算后相同,此时则优先使用靠下的样式

选择器的累加,不会超过上一级数量级,例如:类选择器再高也不会超过id选择器  量变达不到质变       

一般来说:

选择器越具体,优先级越高 

!important  慎用

那么选择器部分就说完了,如果有什么错误希望大家指正,感谢大家的观看!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/1019852.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号