博客列表 >实例演示css规则的三种引入到html文档中的方式 实例演示标签选择器,class选择器,id选择器,上下文选择器, 结构伪类选择器,重点是结构伪类选择器

实例演示css规则的三种引入到html文档中的方式 实例演示标签选择器,class选择器,id选择器,上下文选择器, 结构伪类选择器,重点是结构伪类选择器

蔡威
蔡威原创
2021年01月02日 01:18:02535浏览

1. 实例演示css规则的三种引入到html文档中的方式;

  • 内部引用
    1. <style type = "text/css"> 这是在html head中直接写为内部引用
    2. 格式为代码 选择器 {属性名:属性值 ; 属性名:属性值 ...}
    3. p {
    4. padding: 50px;
    5. font-size: 1.5em; /*有了插件打fz1.5 tab 就能打出来了,真方便*/
    6. }
    7. .bd { /*class选择器*/
    8. border: 1px solid rgb(228, 7, 7);
    9. }
    10. </style>
    11. </head>
    12. <body>
    13. <div class="bd">
    14. <p>它的上下有间距</p>
    15. </div>
    16. </body>
    -外部引用 也是通常用的方法
    -行内引用 优先级最高,但不利于批量修改 一般不用
    三种引入方式

2. 实例演示标签选择器,class选择器,id选择器,上下文选择器, 结构伪类选择器,重点是结构伪类选择器

  • tab {属性名:属性值 ; 属性名:属性值 …}
  • .class {属性名:属性值 ; 属性名:属性值 …}
  • /#id {属性名:属性值 ; 属性名:属性值 …} 实际/是想反译 ..
  • 上下文选择器
    1 后代选择器 选择器1 选择器2 { } 选择器间是空格
    2 父子选择器 选择器1>选择器2 … {} 选中的是1中且2中的元素
    3 相邻选择器 选择器1 + 选择器2 {} 选中 1 相邻 2 元素
    4 同级指定位置后 选择器1 + 选择器2 {} 选中 1 后 2 的所有元素

老师费神了

  • 伪类…不是很明白 呢

    有结构伪类 nth + of + type (an +b)

    an 是起始点 b 是偏移量
    first - of -type 第一个
    nth-of-type (1n) 所有
    nth-of-type (2n) 偶数
    nth-of-type (2n+1) 奇数
    nth-of-type (-3) 倒数三个

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议