doublechina的博客

奔跑中的一缕尘埃

前端基础-02-CSS选择器

前端基础-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标签
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lianjiaokeji/article/details/78527209
文章标签: css 前端
个人分类: 前端
所属专栏: 前端的爱与恨
想对作者说点什么? 我来说一句

前端 html5 省市区选择器

2016年05月17日 148KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭