手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

组选择器和层级选择器以及伪类伪元素选择器

时间:2024-10-18 05:29:04

通常,我们在编写网页的过程中,几乎不会一个容器中只用一个选择器,或者说我们还会嵌套着使用选择器,这个时候我们就需要用到组选择器或层级选择器。再或者我们想要营造鼠标有一定动作之后或之前等的效果,我们就需要用到伪类及伪元素选择器。

工具/原料

Pycharm

组选择器

1、其实就是选择器的集体声明。就和小学的提取公因式差不多,把共同的部分提取出来,相同的部分共同定义,不同的部分单独定义,保证风格统一,样式修改灵活,这也是优化代码很重要的一部分。

2、要记得用逗号,隔开用哟!

组选择器和层级选择器以及伪类伪元素选择器

3、例如,我们在HTML页面中写了好几个标题。代码如下:<h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6>

组选择器和层级选择器以及伪类伪元素选择器

4、然后再到样式表中设置集体样式为字体颜色为#900;代码如下:h1,h2,h3,h4,h5,h6{color:#900;}

组选择器和层级选择器以及伪类伪元素选择器
组选择器和层级选择器以及伪类伪元素选择器

层级选择器

1、选择器也是可以嵌套的,类似于Excel中的函数嵌套。例如我们想要这个div中的p拥有一个共同样式,如字体颜色均为绿色,那么我们就可以通过父级标签来设置样式。

组选择器和层级选择器以及伪类伪元素选择器
组选择器和层级选择器以及伪类伪元素选择器

2、样式表中代码如下:.two p{color:green; }

组选择器和层级选择器以及伪类伪元素选择器
组选择器和层级选择器以及伪类伪元素选择器

伪类及伪元素选择器

1、常用hover表示鼠标悬浮在上时的状态;after表示在元素里面的尾部插入内容;before表示在元素里面的头部插入内容;

2、例如,设置类名为two的div鼠标移上去时背景颜色变为红色,字体颜色变为白色;在每个p标签前面插入我爱 ,尾部插入感叹号!。

3、css中的代码如下:.two:hover{ background-color:red; color:#fff;}.two p:before{content:'我爱';}.two p:after{content:'!';};

组选择器和层级选择器以及伪类伪元素选择器
组选择器和层级选择器以及伪类伪元素选择器
© 手抄报圈