关闭

前端基础-02-CSS选择器

标签: css前端
550人阅读 评论(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标签
0
0
查看评论

前端基础之五 元素关系及选择器

1、id和class:必须以字母开头,可以有数字。在前端开发中,编写css时,一般用class选择器,尽量避免使用id选择器。 id选择器    #id  。 id是一个元素的唯一标识。 class选择器    .class  。class...
  • sinat_37488524
  • sinat_37488524
  • 2017-03-09 21:36
  • 107

前端基础之四选择器分类

1、元素选择器: 可以选中页面中所有指定的元素,语法:标签名{},如   p{} 2、ID选择器 可以根据id的属性值选中一个元素。语法:#id属性值{},如   #p1{} 3、类选择器:    我们还可以为标签指定一个class属性,class属性用来为标...
  • sinat_37488524
  • sinat_37488524
  • 2017-03-09 20:46
  • 124

CSS中的三种基础选择器,

Html中有三种方法可以使用CSS,而在css中,有三种基础的选择器 1、元素选择器     也叫标签选择器,即在CSS中利用标签名称来定义其外观 2、类选择器,是用点.符号开头,后面跟上一个自定义的名称,在使用时候,以HTML标签的class属性来标记 3、ID选择器,以符号#...
  • liusure09
  • liusure09
  • 2016-01-13 16:00
  • 1393

Web前端(选择器and优先级)基础知识(5)

选择器的优先级:!important选择器>行内样式(作为style属性写在元素内的样式)>id选择器>类选择器>标签选择器>通配符选择器。 HTML的选择器主要有以下几种:
  • caimingxian401
  • caimingxian401
  • 2017-01-14 20:15
  • 262

CSS基础学习六:id选择器

一id选择器         id选择器允许以一种独立于文档元素的方式来指定样式。在某些方面,id选择器类似于类选择器,不过也有一些 重要差别。        语法        ...
  • erlian1992
  • erlian1992
  • 2015-11-05 22:35
  • 2549

【基础篇】理解基础选择器

一、ID 选择器          所谓ID选择器,是指通过元素的ID来把元素检索出来,跟CSS的写法一致,ID前面加“#”号:$("#elementID").html("kael&quo...
  • u010203181
  • u010203181
  • 2015-05-17 15:24
  • 323

CSS基础学习八:派生选择器

CSS语法中通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。         在CSS1中,通过这种方式来应用规则的选择器被称为上下文选择器(contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在C...
  • erlian1992
  • erlian1992
  • 2015-11-13 14:35
  • 1570

超级有用的前端基础技术面试问题收集

说说你对闭包的理解 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变量不会被垃圾回收机制回收 ...
  • ls_kevin
  • ls_kevin
  • 2016-09-24 14:07
  • 1439

【HTML5与CSS3基础】选择器querySelector和querySelectorAll

HTML5提供了两个类似JQuery的查找元素的选择器函数:querySelector和querySelectorAll,前者查找元素然后返回第一个,而后者查找元素后返回一个NodeList,里面包含了所有符合选择器的元素。 使用方法: var buttons = document.queryS...
  • zgljl2012
  • zgljl2012
  • 2015-03-23 20:32
  • 1184

前端基础进阶(十四):es6常用基础合集

ES6基础智商划重点 在实际开发中,ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。 ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大。值得高兴的是,如果你熟悉ES5,学习ES6并不需要花费太多的时间就可以掌握,因为常用的...
  • Fuohua
  • Fuohua
  • 2017-04-28 17:08
  • 525
    个人资料
    • 访问:215228次
    • 积分:2764
    • 等级:
    • 排名:第15279名
    • 原创:62篇
    • 转载:0篇
    • 译文:0篇
    • 评论:11条
    博客专栏
    个人账号

    简书 微博

    qq交流: 680596290

    微信公众号:蜗牛的狂奔

    最新评论