选择器：是指选择标签的方法

1.选择器类型

2.id选择器

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            #box{

                width: 100px;

                height: 100px;

                background: red;

            }

            #box1{

                width: 200px;

                height: 200px;

                background: green;

            }

        </style>

    </head>

    <body>

        <!--

            id选择器           能过id选择元素（选择到的是一个元素）

                语法          #id名称{要添加的样式}

                注意：id具有唯一性，一个页面当中只能出现一个同样的id

        -->

        <div id="box"></div>

        <div id="box1"></div>

    </body>

</html>

3.标签选择器

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div{

                width: 100px;

                height: 100px;

                background: green;

                margin-top: 50px;

            }

        </style>

    </head>

    <body>

        <!--

            标签选择器           通过标签名字选择元素（选择到的是一组元素）

                语法              标签名{要添加的样式}

                注意：标签选择器会给所有的标签都添加上相同的样式，会影响其它的标签

        -->

        <div></div>

        <div></div>

        <div></div>

    </body>

</html>

4.class选择器

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .box{

                width: 100px;

                height: 100px;

                background: green;

                margin-top: 50px;

            }

            .border{

                border: 10px solid #000;

                width: 200px;

            }

        </style>

    </head>

    <body>

        <!--

            类选择器                通过class选择元素（选择到的是一组元素）

                语法              .class名称{要添加的样式}

                注意：页面中的class是可以重名的

                    一个元素的class可以有多个，每个class之间用空格隔开，如果后面class里的样式与前面的有重复的，那后面的会把前面的覆盖了

        -->

        <div class="box"></div>

        <p class="box border"></p>

        <section class="box border"></section>

    </body>

</html>

5.群组选择器

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div,p,section,#title1,#title2,.head{

                width: 100px;

                height: 100px;

                background: red;

            }

        </style>

    </head>

    <body>

        <!--

            群组选择器           能过逗号的方式选择元素（选择到的是一组元素）

                语法              标签名,标签名{要添加的样式}

                                #id名称,#id名称{要添加的样式}

                                .class名称,.class名称{要添加的样式}

                                标签名,#id名,.class名称{要添加的样式}

                只要任意一个元素有相同的样式，那都可以用群组选择器放在一起，不过要用逗号隔开。不管他是id选择器、class选择器、标签选择器都可以

        -->

        <div></div>

        <p></p>

        <section></section>

        <h1 id="title1"></h1>

        <h2 id="title2"></h2>

        <header class="head"></header>

    </body>

</html>

6.包含选择器

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            /*div div{

                width: 100px;

                height: 100px;

                background: green;

            }*/

            /*.wrap div{

                width: 100px;

                height: 100px;

                background: green;

            }*/

            .wrap #div2{

                width: 100px;

                height: 100px;

                background: green;

            }

        </style>

    </head>

    <body>

        <!--

            包含选择器           通过范围选择元素（选择到的可能是一个元素也可能是多个元素）

                语法              父级 目标元素{要添加的样式}

                                父级与目标元素都可以是用任意一种选择器选择到的元素

        -->

        <div class="wrap">

            div1

            <div id="div2">div2</div>

        </div>

    </body>

</html>

7.通配符（*）

通配符（*）——->获取页面所有的元素

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            *{

                height: 50px;

                border: 1px solid #f00;

                margin: 10px;

            }

        </style>

    </head>

    <body>

        <!--

            *       通配符

            用来获取到页面中的所有元素

        -->

        <div>

            div

        </div>

        <p>p</p>

        <h1>h1</h1>

        <h2></h2>

    </body>

</html>

8.选择器优先级

地址：http://blog.csdn.net/baidu_37107022/article/details/71440766

一天搞定CSS：css选择器--07的更多相关文章

  1. 一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  2. (转)一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  3. 十分钟搞定CSS选择器

    在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级 不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. ...

  4. (转)十分钟搞定CSS选择器

    原文地址:http://www.cnblogs.com/dolphinX/p/3347713.html 在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下 ...

  5. sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...

  6. 一天搞定CSS---终篇CSS总结

    虽然说是一天搞定CSS,实际上也没有那么简单.只能说让你快速了解常见的CSS知识,解决基本的页面样式布局和设置. 每个独立的CSS知识点都比较简单,但是它们的应用非常灵活,特别是在综合应用中. 粗略说 ...

  7. DIV CSS 网页兼容全搞定 （IE6 IE7 IE8 IE9 火狐 谷歌）

    CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...

  8. 3D 穿梭效果？使用 CSS 轻松搞定

    背景 周末在家习惯性登陆 Apex,准备玩几盘.在登陆加速器的过程中,发现加速器到期了. 我一直用的腾讯网游加速器,然而点击充值按钮,提示最近客户端升级改造,暂不支持充值(这个操作把我震惊了~).只能 ...

  9. 全面系统讲解CSS工作应用+面试一步搞定

    [TOC] 一.课程介绍 二.HTML基础强化 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下元素) * meta * title * style * link * ...

  10. CSS的选择器

    <div id="demo"> <div class="inner"> <p><a href="#" ...

随机推荐

  1. webapp 1px显示两倍的问题

    公司最近换新首页,按照设计师的要求<大家都在逛>的分割线要1个像素. .span-3{ width:33.3333%; &:not(:first-child){ &:bef ...

  2. 【2017-04-20】Sql字符串注入式攻击与防御

    一.攻击 所谓sql字符串注入式攻击就是在用户输入界面输入一串sql语句,来改变C#中连接数据库要执行的sql语句 通过你写的程序,直接来执行我想要执行的sql语句 例如:在这么一个程序中,sname ...

  3. 【理论篇】Percona XtraBackup 恢复单表

    小明在某次操作中,误操作导致误删除了某个表,需要立即进行数据恢复. 如果是数据量较小的实例,并且有备份,即便是全备,做一次全量恢复,然后单表导出导入,虽然麻烦一点,却也花不了多少时间:如果是数据量大的 ...

  4. 【原】Unity Shader VS UDK Material Editor

    UDK 的材质编辑器十分好用,毕竟是所见即所得的.虽然unity也有类似第三方插件,但易用性还是差很多,下面主要是,把一些常见表达式概念对应起来. 1. UDK CameraVector (相机位向量 ...

  5. python基本数据类型——int

    一.int的范围 python2: 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1: 在64位系统上,整数的位数为64位,取值范围为-2**63-2**63-1: pyth ...

  6. 【外文翻译】使用Timer类去调度任务 ——java

    使用Timer类去调度任务 --java 原文地址:https://dzone.com/articles/using-timer-class-to-schedule-tasks 原文作者:Jay Sr ...

  7. jQuery常用代码片段

    检测IE浏览器 在进行CSS设计时,IE浏览器对开发者及设计师而言无疑是个麻烦.尽管IE6的黑暗时代已经过去,IE浏览器家族的人气亦在不断下滑,但我们仍然有必要对其进行检测.当然,以下片段亦可用于检测 ...

  8. PHP怎么打开或者关闭文件？

    什么是文件处理? 文件处理包括读取,关闭,重写等.掌握文件的处理需要读者理清思路,掌握好文件处理的关键步骤和常用函数,那么就可以运用自如了!感兴趣的请移步php文件处理专题. 比如,访问一个文件需要 ...

  9. PHP学习笔记-4（时间戳）

    在学习PHP时间戳的时候,发现了一个有趣的现象,就是发现用strtotime()这个函数返回的时间戳跟人家的不一样,以为是自己哪里写错了,后来发现不是这样的. 是因为设置的时区不同,从而导致了时间显示 ...

  10. 门面(Facade)模式

    门面模式是对象的结构模式,外部与一个子系统的通信必须通过一个统一的门面对象进行.门面模式提供一个高层次的接口,使得子系统更易于使用. 医院的例子 现代的软件系统都是比较复杂的,设计师处理复杂系统的一个 ...