前端基础-02-CSS选择器

傷城~ 2022-06-05 01:18 348阅读 0赞

# 前端基础-CSS样式 #

### 1. CSS样式常用的三种引用方式： ###

#CSS样式分为3种:
    #优先级：行内样式>内嵌样式>外部样式
    1.行内样式：
    <div style="width: 300px;height: 300px;background: green">
    </div>
    
    2.内嵌样式
    head中间添加样式：
    <style>
            div{
                width: 200px;
                height: 200px;
                background: green;
            }
    </style>
    3.外部样式
    lesson.css样式文件：
    div {
        width: 200px;
        height: 200px;
        background: green;
    }
    #引用方式：
    <link rel="stylesheet" href="lesson.css">
    
    扩展：修改页面页签的图标：
    <link rel="shortcut icon" href="image/test1.ico">

### 2.选择器 ###

#1.通配符选择器
    * {
        margin: 0;
    }
    
    #2.标签（tagName）选择器
    div {
       width: 100px;
       height: 100px;
       background: red;
    }
    #3.class选择器，一般给具有相同属性的元素设置同一个class
    .box {
         background: blue;
    }
    #4.id选择器，id具有唯一性
    
    #box{ 
         background: gray;
    }
    #5. +是相邻选择器，操作的对象是该元素后的同级元素，只会针对一个元素
     div + p+p {
        background: blue;
    }
    #6.群组选择器，对几个相同熟悉的选择器进行样式设置，div和p都生效
            div, p {
                width: 100px;
                height: 100px;
                background: red;
            }
    #7. ~ 是兄弟选择器：div后所有同级p元素生效
            div ~ p {
                background: green;
            }
    #8.>子代选择器 :div所有子元素p生效，变成蓝色
            div > p {
                background: blue;
            }
    #9.后代选择器：可以指定某一层级子元素生效，div的下面所有li元素样式生效
            div li {
                width: 50px;
                height: 50px;
                background: red;
            }
    #10.伪选择器
           #a标签：
            a:link { /*未被点击的链接*/
                color: red;
            }
    
            a:visited { /*已被点击的链接*/
                color: green;
            }
    
            a:hover { /*鼠标悬浮的颜色*/
                color: aqua;
            }
    
            a:active { /*鼠标按下的颜色*/
                color: black;
            }
    
           #div标签：
            div {
                width: 100px;
                height: 100px;
                background: red;
            }
    
            div:hover { /*改变元素本身*/
                /*
                    default 默认箭头
                    pointer 手指
                    wait 显示正忙
                    help 显示帮助
                */
                cursor: pointer;
                background: blue;
            }
    
            div:hover p { /*改变元素下面的p标签*/
                width: 100px;
                height: 20px;
                background: green;
            }
    
    
    #11.通用选择器的优先级：
    选择器优先级：
    (*)<tagName<(.)class类选择器<（#）id选择器 级别相同的选择器，后面的样式会覆盖前面的 复杂后代选择器： 1.先比id 再比class 再比tagName 2.id选择器个数不相等，id越多，优先级越高 3.id选择器相同，则比class，在比tagName # 快捷键： ul>li*5 + TABL 快捷输出5个li标签