经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTMLCSS » HTML5 » 查看文章
CSS选择符
来源:cnblogs  作者:bignewbie  时间:2018/10/15 9:19:27  对本文有异议

 

W3School离线手册(2017.03.11版)下载:https://pan.baidu.com/s/1c6cUPE7jC45mmwMfM6598A

 

 

选择符指的是要修改的元素。CSS中常用的选择符有 HTML选择器、类选择器、id选择器

 

HTML选择器

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。

例如:

  1. html {color:black;}
  2. h1 {color:blue;}
  3. h2 {color:silver;}

可以将某个样式从一个元素切换到另一个元素。

假设您决定将上面的段落文本(而不是 h1 元素)设置为灰色。只需要把 h1 选择器改为 p。

  1. html {color:black;}
  2. p {color:gray;}
  3. h2 {color:silver;}





类选择器

在 W3C 标准中,元素选择器又称为类型选择器(type selector)。

“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”

格式如下:

  selector.classname{

    property1:valu;

    property2:valu;

    ……

  }

例如:

  1. p.left {font-family: sans-serif;}

 

 

 

id选择器

当需要为某个元素单独设计样式时,可以使用id选择器,使用id选择器要先为设计样式的对象定义一个id值.id选择器是唯一的,不同元素的id值是不能重复的。

例子:

<div id="top"></div>

定义top的样式:

#top{

  property1:value;

  property2:value;

  ……

}

 

html

  1. <!DOCTYPE html>
  2. <html >
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>CSS 常用选择器</title>
  6. <link rel="stylesheet" type="text/css" href="0923.css">
  7. </head>
  8. <body>
  9.  
  10. <!--
  11. id 选择器
  12. -通过id属性值选中唯一的元素
  13. - #id属性名{}
  14. class 类选择器
  15. -通过类选择器,选中一组
  16. -.class属性名{}
  17. -->
  18. <h1>HTML选择器</h1>
  19. <p id="p1">css test</p>
  20. <p class="p2">css test</p>
  21. <p class="p2">css test</p>
  22. <p class="p2">css test</p>
  23.  
  24.  
  25.  
  26. </body>
  27. </html>

 

 

0923.css

  1. h1{
  2. color: yellow;
  3. }
  4. #p1{
  5. color: aqua;
  6. font-size: 20px;
  7. }
  8. .p2{
  9. color: red;
  10. font-size:40px;
  11. }

 

 

 

特此声明:如需转载请注明出处,如有疑问请及时提出以便于改正,如有侵权,联系删除,谢谢

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号