day04_CSS选择器-白红宇的个人博客

day04_CSS选择器

发布日期：2021-05-10 03:28:30 浏览次数：8 分类：精选文章

本文共 1151 字，大约阅读时间需要 3 分钟。

常用的选择器有如下几种：

1、标签选择器

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。

举例：

*{   margin:0;padding:0}div{   color:red}   
   
    ....
   
   
   
   
    ....

2、id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

举例：

#box{   color:red} 
   
    ....

3、类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

举例：

.red{   color:red}.big{   font-size:20px}.mt10{   margin-top:10px} 
   
    ....
   
....
....

4、层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。（注意空格）

举例：

.box span{   color:red}.box .red{   color:pink}.red{   color:red}
       
    ....    
    ....
   
....

5、组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。（注意逗号）

举例：

.box1,.box2,.box3{   width:100px;height:100px}.box1{   background:red}.box2{   background:pink}.box2{   background:gold}
   
    ....
   
   
    ....
   
   
    ....

6、伪类及伪元素选择器

** 常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态 **伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

其中hover伪类最常用

.box1:hover{   color:red}.box2:before{   content:'行首文字';}.box3:after{   content:'行尾文字';}
   
    ....
   
   
    ....
   
   
    ....

7、* 选择器

选择器选取所有元素。

选择器也能选取另一个元素中的所有元素：

实例

选取

元素内部的所有元素：

div *

{

background-color:yellow;

}

上一篇：day_05_CSS的盒子模型

下一篇：day03_CSS的基础语法及页面的引用

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！