四种CSS常用的选择器使用方法和注意事项

2020-05-10 11:26:11易采站长站整理

}     
p.cls2{     
    color:red;     
    font-size:20px;     
}     
  

a 元素的效果为:

(1)默认样式是黑色,24px,没有下划线;

(2)当鼠标移动到超链接时,自动出现下划线;

(3)点击后,超链接变成红色。

p 元素的选择器在html中的使用,如:

XML/HTML Code复制内容到剪贴板

<p class="cls1">hello,world!hello,world!hello,world!</p>     
<p class="cls2">hello,html!hello,html!hello,html!</p>   

 4、通配符选择器

该选择器可以用到所有的html元素,但是其优先权最低

      *{

            属性名: 属性值;

            …

      }

案例:

CSS Code复制内容到剪贴板

/*通配符选择器*/     
*{     
    /*margin-top:0px;   
    margin-left:0px;*/     
    /*margin: 10px 30px 40px 1px;*/     
    /*margin 可以写一个值,(上右下左(顺时针))如果是两个值(上下,左右)   
    如果是是三个值(上,左右,下)*/     
    margin:0px;     
    padding:0px;     
}     
  

四个选择器的优先权如下:

Id选择器 > class选择器 > html选择器 > 通配符选择器

选择器的细节问题!!!

1、父子选择器的使用

CSS Code复制内容到剪贴板

/*父子选择器*/     
/*对id选择器为#id1下的span元素定义样式*/     
#id1 span{     
    color: red;     
    font-style:italic;     
}     
/*对id选择器为#id1下的span元素下的span元素定义样式*/     
#id1 span span{     
    color:green;     
}     
#id1 span span a{     
    color:blue;     
}    

通过上面总结: