《Web前端开发基础》课件——视频6 伪类选择器.pptxVIP

CSS基础

--伪类选择器1;01;在选取元素时，我们学过：

;伪类选择器;;html

head

??title动态伪类选择器/title

??styletype=text/css

????a:link{

??????font-size:20;

????}

?a:active{

??????font-size:80;

????}

????a:hover{

??????color:red;

????}

???

??/style

/head

body

??ahref=百度/a

??hr/

??ahref=网易/a

??hr/

??ahref=中央广播电视/a

??hr/

/body

/html

;;;html

head

title否定伪类选择器/title

styletype=text/css

input:not([type=submit]){

border:1pxsolidred;

}

/style

/head

body

form

用户名：inputtype=text/br/

密码：inputtype=text/br/

inputtype=submitvalue=提交/

/form

/body

/html;总结：

CSS伪类是用来添加一些选择器的特殊效果。

由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。;CSS基础

--伪类选择器2;01;（1）作用：

根据元素在HTML中的结构关系查找元素

（2）优势：

减少对于HTML中类选择器的依赖，有利于保持代码整洁

（3）场景：

常用于查找某父级选择器中的子元素;选择器;选择器;;!DOCTYPEhtml

html

head

style

p:nth-of-type(2){

background:#ff0000;

}

p:nth-child(2){

background:#0000ff;

}

/style

/head

body

h1这是标题/h1

p第一个段落。/p

p第二个段落。/p

p第三个段落。/p

p第四个段落。/p

p第五个段落。/p

/body

/html

;理解技巧：

冒号前面要匹配的元素，

E:nth-child(n)，是看父元素下排列在位置n的子元素。

E:nth-of-type(n)，是看父元素下排列在位置n的指定类型的元素。

可以分为三个步骤：

1、找E元素的父元素；

2、找位置：父元素下的子元素里，排列在位置n的元素

3、匹配该位置的元素是否为E;CSS经典案例：餐厅练习

玩法：选中桌子上晃动的物品即可。

练习网址：https://flukeout.github.io/

作业交法：把自己闯关的最高记录截图交日志，并写出感受~

;;总结