首页 > > 网页制作 > css >

选择CSS常用选择器的方法

2019-08-27 07:10:28来源：爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

CSS中常用的选择器有非常多，但是有很多人在都不知道该如何进行选择，下面爱站小编为大家介绍关于选择CSS常用选择器的方法，感兴趣的朋友们get起来吧。

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

基本使用：

????? .类选择器{

??????????? 属性名: 属性值;

??????????? ...

????? }

案例：

CSS Code复制内容到剪贴板
    css">
  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;?? ??
  5. ????font-style:italic;?? ??
  6. }?? ??
  7. /*对id选择器为#id1下的span元素下的span元素定义样式*/?? ??
  8. #id1?span?span{?? ??
  9. ????color:green;?? ??
  10. }?? ??
  11. #id1?span?span?a{?? ??
  12. ????color:blue;?? ??
  13. }????

通过上面总结：

?（1）父子选择器可以有多级（但是在实际开发中，建议不要超过三层）；

（2）父子选择器有严格的层级关系；

（3）父子选择器不局限于什么类型选择器，比如

CSS Code复制内容到剪贴板
  1. #id?span?span ??
  2. ??
  3. s1?#id?span ??
  4. ??
  5. div?#id?s2 ??
  6. ??

2、一个元素可以同时有id选择器和类选择器（但是id选择器不可以有多个）

案例：

<span class="s1" id="tid">TestId</span>?

3、一个元素最多有一个id选择器，但是可以有多个类选择器

使用方法如下：

<元素 class=”类选择器1 类选择器2”>内容</元素>

案例：

CSS Code复制内容到剪贴板
  1. /*类选择器1*/?? ??
  2. .s1{?? ??
  3. ????background-color:?pink;?? ??
  4. ????font-weight:?bold;?? ??
  5. ????font-size:?16px;?? ??
  6. ????color:?black;?? ??
  7. }?? ??
  8. /*再配置一个类选择器2*/?? ??
  9. .cls1{?? ??
  10. ????font-style:italic;?? ??
  11. ????text-decoration:underline;?? ??
  12. }????

（注：这里需要注意的是，当同时使用多个类选择器且类选择器中的样式发生冲突时，以CSS文件中最尾的类选择器的样式为准，不依赖于html文件中的类选择器的放置顺序。）


4、我们可以把某个CSS文件中的选择器共有的部分，独立出来写成一份。比如：

CSS Code复制内容到剪贴板
  1. /*招生广告*/?? ??
  2. .ad_stu{?? ??
  3. ????width:136px;?? ??
  4. ????height:196px;?? ??
  5. ????background-color:#FC7E8C;?? ??
  6. ????margin:5px?0?0?6px;?? ??
  7. ????float:left;?? ??
  8. }?? ??
  9. ?? ??
  10. /*广告2*/?? ??
  11. .ad_2{?? ??
  12. ????background:#7CF574;?? ??
  13. ????height:196px;?? ??
  14. ????width:457px;?? ??
  15. ????float:left;?? ??
  16. ????margin:5px?0?0?6px;?? ??
  17. }?? ??
  18. ?? ??
  19. /*房地产广告*/?? ??
  20. .ad_house{?? ??
  21. ????background:#7CF574;?? ??
  22. ????height:196px;?? ??
  23. ????width:152px;?? ??
  24. ????float:left;?? ??
  25. ????margin:5px?0?0?6px;?? ??
  26. }?? ??
  27. //上面的CSS可以写成 ??
  28. ??
CSS Code复制内容到剪贴板
  1. /*招生广告*/?? ??
  2. .ad_stu{?? ??
  3. ????width:136px;?? ??
  4. ????background-color:#FC7E8C;?? ??
  5. }?? ??
  6. ?? ??
  7. /*广告2*/?? ??
  8. .ad_2{?? ??
  9. ????background:#7CF574;?? ??
  10. ????height:196px;?? ??
  11. ????width:457px;?? ??
  12. }?? ??
  13. ?? ??
  14. /*房地产广告*/?? ??
  15. .ad_house{?? ??
  16. ????background:#7CF574;?? ??
  17. ????height:196px;?? ??
  18. ????width:152px;?? ??
  19. }?? ??
  20. ?? ??
  21. .ad_stu,?.ad_2,?.ad_house{?? ??
  22. ????height:196px;?? ??
  23. ????margin:5px?0?0?6px;?? ??
  24. ????float:left;?? ??
  25. }????

5、CSS文件本身也会被浏览器从服务器下载到本地，才能显示效果。

这篇文章主要介绍了选择CSS常用选择器的方法及注意事项，内容还包含了CSS选择器的优先级，感兴趣的小伙伴们可以参考一下


原文链接:https://js.aizhan.com/web_authoring/css/8532.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：HTML5学习手册

下一篇：纯CSS3如何实现3D旋转书本效果

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签