CSS-(选择器，伪类，选择器优先级)

最新推荐文章于 2024-09-27 11:01:06 发布

be great

最新推荐文章于 2024-09-27 11:01:06 发布

阅读量887

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_37431752/article/details/88046500

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

22:01 2019/2/27/周三
///
CSS：//层叠样式表
/
1：怎么找到标签（选择器）
2；如何操作标签对象。
//
4中调用css方式：
第一种：直接在标签里面加。
第二种直接在<head>里面的<style>里面写。
第三种是链接方式：
head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="test1.css" rel="stylesheet">//应用css
</head>
第四种就是导入方法：
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "test1.css";//通过import导入。
    </style>
</head>
区别：第四种是css代码方式，导入方式是有限制的。
     第三种是HTML方式。导入方式不限制。
结果：选择链接方式。
/
10:24 2019/2/28/周四 选择器

/
 <style>
       *{
           color: red;//*是通用选择器对所有的标签都有用。
       }
    </style>    
     #hellow{
            color: blue;//id选择器。
        }
        .hellow{
            color: black;
        }//这个是对应的是class，这个里面的值可以重复使用。不像id具有唯一性。
       div.hunhe{
               color: deepskyblue;
        }//这个必须是连一起，比如 div.hunhe中间不能有空格。

         #hellow,div.hunhe{ 合并标签。把多个标签通过“，”的形式合并标签。
            color: deeppink;
        }
        
          .div1  div{///这个里面必须有空格，相当于div1 里面的div,相当于一层一层的迭代。一层一层的。
            color: gold;
       }
       
           .div1 > .div2{
            color: gold;
       }/通过>来找，注意两边都有"."，这个只能在儿子层找。
 ///      
.div1.div2 div{
            color: gold;///这样写是错误的。并不能出现效果。
       }
/
.div2 div{
            color: gold;///这样写是对的。
       }
/


 <p id="hellow">hellow,word</p>//这里面的id只能有一个。
<p class="hellow">hellow,word</p>


ps:<a href="#hellow">跳转到</a>跳转到刚才那个标签。

<div class="div1">
    <div >div1.1
    <p>p里面的标签</p></div>
    <div class="div1.2">div1.2</div>
</div>
///
            属性选择器(算是自定义吧)

/
 <style>
 [render="1"]{
            background-color: red;
        }
          [render="12"]{
            background-color: firebrick;
        }
</style>

<div render ="1">自定义属性1</div>
<div render ="12">自定义属性12</div>

///
           伪类


   a:link{//什么都没做的颜色
               color: red;
        }
        a:visited{ 访问的时候的颜色
            color: gold;
        }
        a:hover{//鼠标悬浮时候的颜色
            color: deepskyblue;
        }
        a:active{ 点击时候的颜色
            color: black;
        }

///

          嵌套优先级


display

    常用值： inline; inline-block; block;

    区别：

        注：这几个元素都设置了同样的宽高

        inline: 行内元素
        inline-block: 行内块级元素
        block: 块级元素(自成一行)