css 样式引入和选择器权重

最新推荐文章于 2022-08-26 13:55:46 发布

小虎小虎花里胡哨

最新推荐文章于 2022-08-26 13:55:46 发布

阅读量178

点赞数 1

分类专栏： Css 文章标签： css

本文链接：https://blog.csdn.net/OX00001111/article/details/115750891

版权

Css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、css样式引入

1）、行内样式

使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

使用style属性设置CSS样式仅对当前的HTML标签起作为，并且是写在HTML标签中的
这种方式不能起到内容与表现相分离，本质上没有体现出CSS的优势，因此不推荐使用。

2）、内部样式表

CSS代码写在 head 的 style 标签中

<style>
h1{color: green; }
</style>

优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
引出外部样式表

3）、外部样式表

CSS代码保存在扩展名为.css的样式表中

<link rel="stylesheet" href="css/Test01.css" type="text/css">

2、选择器权重

1）、常用选择器

1、标签选择器
2、类选择器
3、ID选择器

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

2）、CSS高级选择器

1、层次选择器

  /*
          后代选择器
        */
        body p{
            background: red;
        }

  /*
          子选择器
        */
       body>p{
			background: pink;
}

  /*
          相邻兄弟选择器
        */
   .active+p {
			background: green;
}

  /*
          通用兄弟选择器
        */
 .active~p{
		background: yellow;
}

3）、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li:first-child {
            background: red;
        }

        ul li:last-child {
            background: green;
        }

        p:nth-child(1) {
            background: yellow;
        }

        p:nth-of-type(2) {
            background: blue;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

在这里插入图片描述

4）、属性选择器

1、E[attr]属性选择器
2、E[attr=val]属性选择器
3、E[attr*=val]属性选择器   任意开头
4、E[attr^=val]属性选择器  任意结尾
5、E[attr$=val]属性选择器   任意位置相匹配

5）、!important选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <!--
       权重
    -->
    <style>
        #box p {
            color: red;
        }


        .important_false {
            color: aqua;
        }

        /*
         使用!important
        */
        .important_true {
            color: aqua !important;
        }
    </style>
    <link rel="stylesheet" href="css/Test01.css" type="text/css">
</head>
<body>
<div id="box">
    <p class="important_false">111111111</p>
    <p class="important_true" style="color: red;">222222222</p>
</div>
</body>
</html>

在这里插入图片描述

3、引入样式的优先级

!important>内联样式>内部样式>外部样式

小虎小虎花里胡哨

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 样式引入和选择器权重

1、css样式引入1）、行内样式使用style属性引入CSS样式<h1 style="color:red;">style属性的应用</h1><p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>使用style属性设置CSS样式仅对当前的HTML标签起作为，并且是写在HTML标签中的这种方式不能起到内容与表现相分离，本质上没有体现出CSS的优势，因此不推荐使用。2）、内部样式表CS
复制链接

扫一扫

专栏目录