【html5+css】css引入方式选择器以及他们的优先级

苗雨旺

已于 2023-07-13 17:35:54 修改

阅读量679

点赞数 1

分类专栏： css html5 前端文章标签： html5 css 前端

于 2023-07-13 17:32:35 首次发布

本文链接：https://blog.csdn.net/weixin_63436826/article/details/131705121

版权

html5 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

css引入方法

行内引入

直接在标签内写入css

            <!--1.行内引入方式-->
            <p style="background-color: blue;color: red;font-size: 120px;"></p>

内联式

在标签内写css称为内联式引入css

    <style>
    *{
            /* 内边距 */
           padding: 0;
            /* 外边距 */
           margin: 0;
         }
    </style>

外联式

引入外css文件，称为外联式

    <link rel="stylesheet" href="./css/style.css">

选择器

通配符

通配符全局选择器去掉浏览器样式

*{
   /* 内边距 */
   padding: 0; 
   /* 外边距 */
   margin: 0; 
   /*盒子模型 */
   /* 注释 */
   /* color: red; */
}

标签选择器

他可以使用所有标签比如： h1-h6 ul li div span等

 p{
            background-color: rgb(red, green, blue);
            color: #6a2121;
}

类选择器

在html里面定义class通过 . 来写

         .classname{
            height: 300px;
            background-color: #6a2121;
         }
         .red_color{
            color: red;
         }

id选择器

在html里面定义好id 通过# 来调用修饰

         #idname{
            width: 400px;
            background-color: white;
         }

群组选择器

群组选择器选择器之间用，隔开

         .div1, .div2, .div3,p{
            width: 400px;
         }

层级选择器

子代选择器

子代选择器通过 > 来写

         .ulBig > li{
            list-style: none;
            font-size: 28px;
         }

后代选择器

后代选择器时通过空格来实现的

         .ulBig li{
            list-style: none;
         }

兄弟选择器

相邻兄弟选择器

兄弟选择器相邻兄弟 + 只修改他下面的相邻的选择器

         .li4+li{
            color: red;
         }

通用兄弟选择器

兄弟选择器通用兄弟 ~ 修改他后面的所有选择器

		 .li4~li{
            color: red;
         }

伪类选择器

这里展示选择器里面的功能之一（鼠标悬浮）
他通过：来调用

         .li4:hover{
            color: blue;
            /* 鼠标小手 */
            cursor: pointer;
         }

属性选择器

他是通过 [] 来调用的

 		div[class^="div"]{
            color: yellow;
         }
         input[type="checkbox"]{
            background-color: yellow !important;
         }

优先级

1000 !important 设置最高优先级；一般不建议用，改源代码时可以用
* 优先级最低<1
标签选择器<10
.class<100
#id 200<
行内引入方式 <
!important
.class #id > #id
组合选择器时，安优先级顺序叠加，谁大谁生效

练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cssy样式基础</title>
    <!-- 外联式 -->
    <link rel="stylesheet" href="./css/style.css">
    <!-- 内联式 -->
    <style>
        /* 基础样式
        1.width 宽
        2.height 高
        3.background-color 背景颜色
        4.list-style:none; 清楚li默认样式
         */
         /* 选择器 */
         /* 通配符 全局选择器 去掉浏览器样式 */
         *{
            /* 内边距 */
            /* padding: 0; */
            /* 外边距 */
            /* margin: 0; */
            /* 盒子模型 */
            /* 注释 */
            /* color: red; */
         }
         /* 标签选择器
         h1-h6 div ul li span
         */
         p{
            background-color: rgb(red, green, blue);
            color: #6a2121;
         }
         /* 类选择器 class */
         .classname{
            height: 300px;
            background-color: #6a2121;
         }
         .red_color{
            color: red;
         }
         /* id选择器
            注意：id名不能重复
         */
         #idname{
            width: 400px;
            background-color: white;
         }
         p{
            background-color: pink;
         }
         /* 群组选择器 选择器之间用，隔开 */
         .div1, .div2, .div3,p{
            width: 400px;
         }
         .div1{
            height: 100px;
            background-color: chocolate;
         }
         .div2{
            height: 200px;
            background-color: rgb(164, 221, 91);
         }
         .div3{
            height: 300px;
            background-color: rgb(11, 108, 101);
         }

         /* 层级选择器
            1.子代选择器  >
            2.后代选择器    空格
         */
         .ulBig > li{
            list-style: none;
            font-size: 28px;
         }
         .ulBig li{
            list-style: none;
         }
         /* 层级选择器
            1.兄弟选择器 相邻兄弟 + 只修改他下面的相邻的选择器
            2.兄弟选择器 通用兄弟 ~ 修改他后面的所有选择器
         */
         .li4{
            color: red;
         }
         .li4+li{
            color: red;
         }
         .li4~li{
            color: red;
         }
         /* 伪类选择器
                ：鼠标悬浮
         */
         .li4:hover{
            color: blue;
            /* 鼠标小手 */
            cursor: pointer;
         }
         .li3:hover{
            cursor: pointer;
         }
         .li3:hover li{
            color: blue;
         }
         /* 属性选择器 */
         div[class^="div"]{
            color: yellow;
         }
         input[type="checkbox"]{
            background-color: yellow !important;
         }

         /* 优先级
         1000 !important 设置最高优先级；一般不建议用，改源代码时可以用
         * 优先级最低<1
         标签选择器<10
         .class<100
         #id    200<
         行内引入方式 <
         !important
         .class #id > #id
         组合选择器时，安优先级顺序叠加，谁大谁生效
         */
    </style>
</head>
<body>
    <!-- 引入方式
            1.行内引入方式
            <p style="background-color: blue;color: red;font-size: 120px;"></p>
            2.内联式
            3.外联式

            优先级
            行内引入方式 优先级高
            内联式和外联式 谁在后谁生效（原理：代码自上而下执行，后面的吧前面的样式覆盖了）
    -->
    <h1 style="background-color: pink;">这是标题标签</h1>
    <p title="这是title" class="">这是 <span class="red_color">段落</span>标签</p>
    <p class="classname" id="idname" style="background-color: aqua;">这是另一个<span class="red_color">段落</span>标签</p>
    <div class="div1">
        <div class="box1">ddd</div>
    </div>
    <div class="div2">ddd</div>
    <div class="div3">ddd</div>
    <ul class="ulBig">
        <li>这叫无序列表</li>
        <li class="li2">这</li>
        <li class="li3">这叫无序列表
            <ul>
                <li>这叫无序列表2</li>
                <li>这叫无序列表2</li>
                <li>这叫无序列表2</li>
                <li>这叫无序列表2</li>
                <li>这叫无序列表2</li>
            </ul>
        </li>
        <li class="li4">这叫无序列表</li>
        <li>这叫无序列表</li>
        <li>这叫无序列表</li>
    </ul>
    <form action="">
        <input type="checkbox" name="a">男
        <input type="checkbox" name="a" checked>女
        <input type="checkbox" name="a">其他
    </form>
</body>
</html>

效果图

在这里插入图片描述

希望有用

苗雨旺

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
【html5+css】css引入方式选择器以及他们的优先级

1.兄弟选择器相邻兄弟 + 只修改他下面的相邻的选择器。2.兄弟选择器通用兄弟 ~ 修改他后面的所有选择器。他可以使用所有标签比如： h1-h6 ul li div span等。组合选择器时，安优先级顺序叠加，谁大谁生效。兄弟选择器相邻兄弟 + 只修改他下面的相邻的选择器。兄弟选择器通用兄弟 ~ 修改他后面的所有选择器。在html里面定义好id 通过# 来调用修饰。组合选择器时，安优先级顺序叠加，谁大谁生效。/* 群组选择器选择器之间用，隔开 */这里展示选择器里面的功能之一（鼠标悬浮）
复制链接

扫一扫