前端基础-02-CSS选择器

原创 2017年11月14日 09:46:24

前端基础-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标签
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

【CSS 基础】02 选择器

概述当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某些对象。选择器就是CSS规则所作用的对象。CSS 规则由两个主要的部分构成:不同类型的选择器,以及一条或多条属性声明。 selector...
  • bodhixu
  • bodhixu
  • 2017年07月29日 20:45
  • 68

WEB前端 | H5基础——(3)CSS3选择器

CSS3选择器 /* 子代(兄弟、兄弟相邻) nth-child / of-type after(before) 属性(2种) input(可用和不...
  • Erosvan
  • Erosvan
  • 2016年09月20日 18:46
  • 221

WEB前端 | HTML基础——(2)CSS标签、边框、内外边距及选择器

一、组合标签 组合标签 有序列表1 有序列表2 有序列表3 有序列表4 无序列表 无序列表 ...
  • Erosvan
  • Erosvan
  • 2016年09月03日 15:24
  • 1150

前端基础学习之CSS选择器

CSS基础之选择器派生选择器通过元素在其位置的上下文关系来定义样式,使标记更加简洁 派生选择器允许你根据文档的上下文关系来定义某个标签的样式,通过合理的使用派生选择器,可以是Html代码更加的简洁...

前端必须掌握的css选择器方法

  • 2016年08月29日 08:48
  • 37KB
  • 下载

HTML5学习_day02(1)--css高级选择器

#test1{ width: 100px; height: 50px; background-color: blanchedalmond; } .test2{ ...

[02]CSS 选择器(上)

一.选择器汇总CSS 选择器,通过选择器定位到想要设置样式的元素。目前CSS 选择器的版本已经升级至第三代,即 CSS3 选择器。CSS3 选择器提供了更多、更丰富的选择器方式,主要分为三大类。本文主...

D 02_CSS中的选择器(常用的三种)

CSS中的选择器 基本选择器 1,元素选择器 HTML标签又名HTML元素。   元素选择器:即以HTML标签名作为选择器名称。   作用:选择CSS样式代码 作用于 对...

CSS02——选择器

02、CSS3结构选择器

:nth-child 选择指定索引处的子元素 nth-child(n) 父元素下的第n个子元素 nth-child(odd)奇数子元素(同nth-child(2n-1)...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端基础-02-CSS选择器
举报原因:
原因补充:

(最多只允许输入30个字)