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

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. CSS border实现各个方向等腰直角三角

    CSS代码: .border_cort, .border_corr, .border_corb, .border_corl { display: inline-block; ; ; border-wi ...

  2. Android -- 带你从源码角度领悟Dagger2入门到放弃（二）

    1,接着我们上一篇继续介绍,在上一篇我们介绍了简单的@Inject和@Component的结合使用,现在我们继续以老师和学生的例子,我们知道学生上课的时候都会有书籍来辅助听课,先来看看我们之前的Stu ...

  3. Lucene工作原理

    Lucene是一个高性能的java全文检索工具包,它使用的是倒排文件索引结构.该结构及相应的生成算法如下: 0)设有两篇文章1和2 文章1的内容为:Tom lives in Guangzhou,I l ...

  4. Apache Spark1.1.0部署与开发环境搭建

    Spark是Apache公司推出的一种基于Hadoop Distributed File System(HDFS)的并行计算架构.与MapReduce不同,Spark并不局限于编写map和reduce ...

  5. DFB系列 之 Clear清空surface缓存

    1. 函数原型解析 函数声明: DFBResult Clear (     IDirectFBSurface    *  thiz,      u8     r,      u8     g,     ...

  6. CSS3弹性伸缩布局（中）——flexbox布局

    混合过渡版 上一篇我们主要讲了旧版box布局,今天这篇主要讲flexbox布局. 混合版本的Flexbox模型是2011年提出的工作草案,主要是针对IE10浏览器实现的伸缩布局效果,其功能和旧版本的功 ...

  7. Python标准模块—Regular Expressions

    作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 1 模块简介 正则表达式是一门小语言,你可以在Python中或者其 ...

  8. H5 canvas圆形的时钟

    今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...

  9. IDEA下使用maven构建web项目（SpringMVC+Mybatis整合）

    需求背景:由于最近总是接到一些需求,需要配合前端团队快速建设移动端UI应用或web应用及后台业务逻辑支撑的需求,若每次都复用之前复杂业务应用的项目代码,总会携带很多暂时不会用到的功能或组件,这样的初始 ...

  10. sbt结合IDEA对Spark进行断点调试开发

    笔者出于工作及学习的目的,经常与Spark源码打交道,也难免对Spark源码做修改及测试.本人一向讲究借助工具提升效率,开发Spark过程中也在摸索如何更加顺畅的对源码进行调试. Spark基于Sca ...