CSS

最新推荐文章于 2024-01-15 00:00:00 发布

难平是人心

最新推荐文章于 2024-01-15 00:00:00 发布

阅读量115

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/Just__2009/article/details/108798358

版权

HTML+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

样式层叠优先级

当同一个HTML元素定义了多个样式时。所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于标签内部）
内联样式（在HTML元素内部）

CSS语法

p{属性:值;属性:值;}
例：p{ color:red; text-align:center; }
css注释 /* … */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--外部样式表-->
    <link rel="stylesheet" href="./css/my.css">
    <!--内部样式表-->
    <style>

    </style>
</head>
<body>
    <h1>样式层叠优先级</h1>
    <ul>
        <li>
            当同一个HTML元素定义了多个样式时。所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。
             1. 浏览器缺省设置
        </li>
        <li>2. 外部样式表</li>
        <!--内联样式-->
        <li style="color:pink;font-size:40px;">3. 内部样式表（位于<head>标签内部）</li>
        <li>4. 内联样式（在HTML元素内部）</li>
    </ul>
    
</body>
</html>

常用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--外部样式表-->
    <link rel="stylesheet" href="./css/my.css">
    <!--内部样式表-->
    <style>
        /*1.html选择器（使用html自带的标签作为选择器）*/
        h1{color:red}
        /*2.类选择器（一个标签可以具有多个类class="cc dd"）*/
        /*修饰仅有class为cc的标签*/
        .cc{color:green;font-size:20}
        /*修饰有class为cc且标签为h1的*/
        h1.cc{color:purple;font-size:25}
        /*3.id选择器*/
        /*id属性值为#hid的*/
        #hid{font-size:"40px"}

    </style>
</head>
<body>
    <h1 class="cc">样式层叠优先级</h1>
    <ul>
        <li>
            当同一个HTML元素定义了多个样式时。所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。
             1. 浏览器缺省设置
        </li>
        <li>2. 外部样式表</li>
        <!--内联样式-->
        <li style="color:pink;font-size:40px;">3. 内部样式表（位于<head>标签内部）</li>
        <li class="cc">4. 内联样式（在HTML元素内部）</li>
    </ul>
    <h3 id ="hid">CSS语法
        
    </h3>
    
</body>
</html>

id选择器和类选择器的区别

id选择器比类选择器的级别高
id选择器在网页中是唯一的（尽量不要重复）

关系选择器

/*所有子标签（ul下的所有li子标签）*/
ul  li{color:blue;}
/*直接子标签（ul下的li子标签）*/
ul > li{color:blue;}
/*紧贴子标签（ul下紧贴在ul后的一个li子标签）*/
ul+li{color:blue;}
/*紧贴所有子标签（ul下紧贴在ul后的所有li子标签）*/
ul~li{color:blue;}

属性选择器
在这里插入图片描述

<style>
/*含有title属性的li标签*/
li[title]{color:red;}
/*含有title属性且值为“bb”的li标签*/
li[title="id"]{color:red;}
</style>

优先级

选择符的优先级:从大到小[ID选择器]>[class选择器]>[html选择器]>[html属性]
通过使用!important关键词修饰提升优先级
h1{color:red}!important}

难平是人心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS

CSS样式层叠优先级当同一个HTML元素定义了多个样式时。所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。浏览器缺省设置外部样式表内部样式表（位于标签内部）内联样式（在HTML元素内部）CSS语法p{属性:值;属性:值;}例：p{ color:red; text-align:center; }css注释 /* … */<!DOCTYPE html><html lang="en"><head> &l
复制链接

扫一扫