css样式表权重关系及css选择器的特点及应用

最新推荐文章于 2022-10-10 17:25:42 发布

seeyouhao

最新推荐文章于 2022-10-10 17:25:42 发布

阅读量391

点赞数 1

分类专栏：笔记文章标签： css

本文链接：https://blog.youkuaiyun.com/seeyouhao/article/details/104977023

版权

笔记专栏收录该内容

16 篇文章

订阅专栏

本文详细解析了CSS样式表的权重关系，包括内联样式、内部样式、外部样式及!important声明的权重，介绍了类型选择符、ID选择符、类选择符、群组选择符、包含选择符和伪类选择器的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css样式表的权重关系：
内联样式表的权重最大！
内部和外部样式的权重，和书写的前后顺序有关。（放在后面的会把放在前面的样式覆盖掉,覆盖的只是相同属性的样式，不同属性的样式会继续执行。）
!important -> 当前声明具有最高权重！
语法：background:red!important;
css语法:
选择符{属性：属性值;}

一：类型选择符（标签选择符）

    所有的html标签可以直接当作选择符进行应用。
    div\p\em\i\b\strong.............
    特点：能选中当前结构里面全部同名标签。
    应用：想统一某一个标签样式的时候或者是清除某个标签默认样式的时候。

二：id选择符——>相当于人的身份证号

    语法：  起名字： <标签 id=“名称”> </标签>
    用名字写样式：  #名称｛属性：属性值｝
    特点：唯一性！ 在同一个页面一个id只能用一次
    应用：用来划分网页外围结构

三：类型选择符（class选择符）

    语法：   起名字：         <标签 class="名称1 名称2 名称3 名称4..."></标签>
    用类名写样式                 .名称｛属性：属性值；｝
    特点：a：一个元素可以有多个类名，类名可以重复出现
               b：可以制定一类样式

四：群组选择符

    语法:以逗号分隔的方式,把多个选择器组成一组,给整组添加样式.
        选择符1,选择符2,选择符3,选择符4{ 属性:属性值; }
        eg :     #box,.con,h3,#wrap{ width:300px; }

五: 包含选择符(子代选择器\后代选择符)

( 通过父元素找子元素 )
    语法:
        父元素 子元素{ 属性:属性值; }

六: 伪类选择器:

    a:link {color: red;}                    /* 未访问的链接状态 */
    a:visited {color: green;}				/* 已访问的链接状态 */
    a:hover {color: blue;}                  /* 鼠标滑过链接状态 */
    a:active {color: yellow;}               /* 鼠标按下去时的状态 */

七：通配符

         语法：        *{  }
                   * 选择页面中所有的元素！     
                   *  *{
        margin:0;    盒子外围间距清零
        padding:0;   盒子内部的距离清零
    }   *斜体样式*