13、10分钟学会使用CSS（选择器，伪类，伪元素）

2022-05-25 本文已影响0人小黄不头秃

一、css常用选择器和伪类

（1）id 选择器

每一个标签都要求有唯一的id，此属性可以用于CSS选择器选择。
例如：#blue{};#haha{}

#blue{
             color: blue;
         }

（2）元素选择器

使用标签的标签名进行选择。
例如：p{};h1{};h2{};div{}

p{
             color:red;
         }

（3）class 选择器

在标签中设置标签的class属性（可以重复），用过使用 . + class名，选中。
例如：.haha{}；.nimei{}

.class_name{
             color:red;
}

（4）通配选择器

所有元素：*{}

*{}

（5）交集选择器

交集选择器：选中同时符合多个条件的元素选择器1选择器2{}

.green, .red{
            /* 交集选择器 */
            color: gray;
        }

（6）并集选择器

并集选择器：同时选择多个选择器选择器1，选择器2{}

div.red{
            /* 并集选择器 */
            font-size: 40px;
}

（7）关系选择器

子元素选择器：父元素> 子元素
后代选择器：中间使用空格
-兄弟选择器：使用+号表示下一个，~表示所有兄弟

<style>
         /*子元素选择器：父元素> 子元素*/
         div.box>p{
             color: hotpink;
         }
         /* 后代选择器 :空格*/
         div.houdai p.hd span.hd{
             color: skyblue;
         }
         /* 兄弟选择器 :加号表示下一个，~表示下边所有*/
         p.bro2 ~ p{
            color: yellow;
         }
         p.bro1 + p{
             color: purple;
         }
</style>

<body>
    <!-- -----------------交/并选择器--------------------- -->
    <span class="sky">first</span>
    <div class="red">i am a div!</div>
    <p id="red">i am a p!</p>
    <br><br><br>
    <!-- -----------------子选择器--------------------- -->
    <div class="box nihao">
        我是一个div
        <p>
            我是div中的p元素<br>
            <span>
                我是div-p中的span元素！
            </span>
        </p>
        <span>我是div中的span元素</span>
    </div>
    <br><br><br>
    <!-- -----------------后代选择器--------------------- -->
    <div class="houdai">
        i am  div grandfather.
        <p class="hd">
            i am span's father.<br>
            <span class="hd">
                i am p's son.
            </span>
        </p>
    </div>
    <br><br><br>
    <!-- -----------------兄弟选择器--------------------- -->
    <div class="dad">
        here is the father!
        <p class="bro1">here is bro1!</p>
        <p class="bro2">here is bro2!</p>
        <p class="bro3">here is bro3!</p>
        <p class="bro4">here is bro4!</p>
    </div>
</body>

（8）继承样式

样式的继承：给父标签设置的属性会发生在子标签里面
所有的都会被继承，背景，布局，字体颜色，字体大小……
继承的设计是为了方便开发；利用继承可以将一些通用的样式设置到一起

body{
             /* 子元素也会有相应格式，但子元素如果也设置了相关样式，则会将原来的样式覆盖 */
             font-size: large;
         }

（9）伪元素

伪元素：表示在页面中一些特殊的并不存在的元素（特殊的位置）
使用：：开头

::first-letter表示第一个字母
::first-line表示第一行
::selection表示选中的文字
::before元素的开始
::after元素的最后
before和after要配合conent使用

<style>
        p{
            font-size: large;
        }
        p::first-letter{
            font-size: 50px;
        }
        p::first-line{
            background-color: yellow;
        }
        p::selection{
            background-color: skyblue;
        }
        div::before{
            /* 会在前面显示一个@ */
            content: "@";
            color: gray;
        }
        q{
            font-size: smaller;
            color: green;
        }
    </style>

（10）伪类

伪类：（不存在的元素）

用来描述一个特殊状态的元素
例如：第一个子元素，被点击的元素，鼠标移入的元素。。。
first-child:第一个子元素
last-child:最后一个子元素
nth-child（n）:选中第n个子元素,、；n表示0~正无穷；2n（even）表示偶数；2n+1（odd）表示奇数
first-of-type:
last-of-type:
nth-of-type():只找相同类型的子元素；
not（）；否定伪类：将符合条件的元素从选择器中剔除
例：第三个列不变黄
ul > li:not(:nth-of-type(3)){
color = "yellow";
}
一般上是：开头

<style>
         ul > li:first-child{
         color: red;
     }
        ul > li:nth-child(5){
            color: green;
        }
</style>

（11）超链接的伪类

可以通过超链接的伪类对超链接的样式进行改变。废话不多说，看代码

<style>
        /*
        link:用来表示没访问过的链接（正常的链接） 
         */
        a:link{
            color: orange;
        }
        /*
        visited:用来表示访问过的链接（正常的链接） 
        由于隐私的问题，所以只能改颜色
         */
         a:visited{
            color: gray;
        }

        /*:hover 用来表示鼠标的移入状态 */
         a:hover{
             color:yellowgreen;
         }

         /* :active 用来表示鼠标的点击状态 */
        a:active{
            color: blue;
        }
</style>

css优先级：https://www.jianshu.com/p/19f215c6b737
引入css的方法：https://www.jianshu.com/p/243d346763a8