您现在的位置是：网站首页> 编程资料编程资料

四种CSS常用的选择器使用方法和注意事项_CSS教程_CSS_网页制作_

2023-11-11 352人已围观

简介 这篇文章主要介绍了四种CSS常用的选择器使用方法和注意事项，为大家介绍了CSS选择器的优先级，感兴趣的小伙伴们可以参考一下

本文为大家分享了CSS中常用的四种选择器，供大家参考，具体内容如下

1、类选择器（class选择器）

基本使用：

      .类选择器{

            属性名: 属性值;

            ...

      }

案例：

CSS Code复制内容到剪贴板
  1. /*类选择器*/     
  2. .s1{     
  3.     background-color: pink;     
  4.     font-weight: bold;     
  5.     font-size: 16px;     
  6.     color: black;     
  7. }     
  8.   

2、id选择器

基本使用：

      #id选择器{

             属性名: 属性值;

             ...

      }

案例：

CSS Code复制内容到剪贴板
  1. /*id选择器的使用*/     
  2. #id1{     
  3.     background-color: silver;     
  4.     font-size: 40px;     
  5. }     

3、html元素选择器

      某个html元素{

             属性名: 属性值;

             ...

      }

 案例：

CSS Code复制内容到剪贴板
  1. a:link{     
  2.     color: black;     
  3.     text-decoration: none;     
  4.     font-size: 24px;     
  5. }     
  6. a:visited{     
  7.     color: red;     
  8. }     
  9. a:hover{     
  10.     color: green;     
  11.     text-decoration: underline;     
  12.     font-size: 40px;     
  13. }     
  14.      
  15. /*对同一种html元素分类*/     
  16. p.cls1{     
  17.     color:blue;     
  18.     font-size:30px;     
  19. }     
  20. p.cls2{     
  21.     color:red;     
  22.     font-size:20px;     
  23. }     
  24.   

a 元素的效果为：

（1）默认样式是黑色，24px，没有下划线；

（2）当鼠标移动到超链接时，自动出现下划线；

（3）点击后，超链接变成红色。

p 元素的选择器在html中的使用，如：

XML/HTML Code复制内容到剪贴板
  1. <p class="cls1">hello,world!hello,world!hello,world!p>     
  2. <p class="cls2">hello,html!hello,html!hello,html!p>   

 4、通配符选择器

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

      *{

            属性名: 属性值;

            ...

      }

案例：

CSS Code复制内容到剪贴板
  1. /*通配符选择器*/     
  2. *{     
  3.     /*margin-top:0px;   
  4.     margin-left:0px;*/     
  5.     /*margin: 10px 30px 40px 1px;*/     
  6.     /*margin 可以写一个值，（上右下左（顺时针））如果是两个值（上下，左右）   
  7.     如果是是三个值（上，左右，下）*/     
  8.     margin:0px;     
  9.     padding:0px;     
  10. }     
  11.   

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

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

选择器的细节问题！！！

1、父子选择器的使用

CSS Code复制内容到剪贴板
  1. /*父子选择器*/     
  2. /*对id选择器为#id1下的span元素定义样式*/     
  3. #id1 span{     
  4.     color: red;  

    上一篇：浅析两列自适应布局的3种思路_css3_CSS_网页制作_

    下一篇：CSS3 3D位移translate效果实例介绍 _css3_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网