博客列表 >css样式 来源 规则 选择器权重

css样式 来源 规则 选择器权重

ianren
ianren原创
2021年12月27日 09:12:53405浏览

样式来源

用户代理样式(浏览器的默认样式)

element(自定义样式)

  • style 设置自定义样式
  • style 级别:行内样式大于内部及文档样式
  1. 行内样式:级别最高 style=”….”;
  2. 文档样式(内部样式):<style></style>

  3. 浏览器默认样式

  4. 继承样式

查询 :找到要被添加的选择器

  1. selector :选择器(找到要被添加样式的元素)
  • 标签选择器 :根据标签名设置选择器h1 : 标签选择器

为匹配的元素 ,设置样式规则

  • {} 用{}括起样式规则:使用“键值对” 表示

    1. 选择器{
    2. 一个或多个样式生命
    3. }
  • css 工作流程: 1- 找到元素; 2-设置元素样式

选择器

基本选择器:根据元素自身特点来选择

  1. <h1> item1 </h1>
  2. <h2 title="hello"> item2 </h2>
  3. <h3 id="a">item3</h3>
  4. <h4 class="b">item4</h3>
  • 标签选择器

    1. h1{
    2. color:red;
    3. }
  • 属性选择器
  1. h2[title="hello"]{
  2. color:green;
  3. }
  4. h3[id="a"]{
  5. color:blue;
  6. }
  7. h4[class"b"]{
  8. color:violet;
  9. }
  10. /* id和class 为高频属性 可以用#和.代替 */
  11. h3#a{
  12. color:blue;
  13. }
  14. h4.b{
  15. color:violet;
  16. }
  • 群组选择器
  1. h3#a,h4.b {
  2. color:blue;
  3. }
  4. /* 同时选择h3和h4标签*/
  • 通配符选择器
  1. html body * {
  2. color:blue;
  3. }
  4. /* html 下的 body 下的所有标签属性*/
  • 上下文选择器(层级选择器)
  1. <ul class="list">
  2. <li class="item">item1</li>
  3. <li class="item">item2</li>
  4. <li class="item">item3</li>
  5. <ul class="inner">
  6. <li>item3-1</li>
  7. <li>item3-2</li>
  8. <li>item3-3</li>
  9. </ul>
  10. <li class="item seconsd">item4</li>
  11. <li class="item">item5</li>
  12. <li class="item">item6</li>
  13. <li class="item">item7</li>
  14. <li class="item">item8</li>
  15. </ul>
  1. 下级元素:用空格
  1. .list li {
  2. color:blue;
  3. }
  4. /* 空格 为选中.list下面的所有li标签(包括下一代的li标签)*/

  1. 子元素:用 > 号
  1. .list > li {
  2. color:blue;
  3. }
  4. /* > 只为选中.list下面的li标签 (不包括下一代的li标签)*/

  1. 连续两个类:用. 符号(不能加空格)
  1. <li class="item second"> item2</li>
  2. .item.seconsd {
  3. color:blue;
  4. }
  5. /* class里面用空格分开 css里面用.连接(不能加空格)*/
  1. 相邻兄弟:+号
  1. .item.seconsd + * {
  2. color:blue;
  3. }
  4. /* 当前选择器的下面的一个标签*/
  5. .item.seconsd ~ * {
  6. color:blue;
  7. }
  8. /* 当前选择器的下面的所有相邻的标签(*/

选择器的权重

  • 三个权重的位置
    1.标签数量
    2.class数量
    3.id数量

    1. body h1.title{
    2. color:red;
    3. }
    4. /* 两个标签(body和h1)一个class(.title) 0.1.2*/
    5. body h1{
    6. color:red;
    7. }
    8. /* 两个标签(body和h1) 0.0.2*/

    id为百位 class 为十位 tag 为个为
    最高权重!importan

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