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

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. 关于socket编程获取客户端地址笔记

    因为最近刚好碰到这块,而且很不小心的在上面踩了个坑,所以把这个坑记录下来 首先,在我们都是在accept函数以后来获取客户端的地址: client_sd = accept(watcher->fd ...

  2. 实现TOLock过程中的一处多线程bug

    背景 最近在啃<多处理器编程的艺术>,书中的7.6节介绍了时限锁--实现了tryLock方法的队列锁. 书中重点讲解了tryLock的实现,也就是如何实现在等待超时后退出队列,放弃锁请求, ...

  3. CF #311 D. Vitaly and Cycle 加最少边形成奇圈

    题目链接:http://codeforces.com/problemset/problem/557/D 大意 给出一个未必联通的无向图(点数至少为3),问最少加多少边可以形成一个奇圈,以及这样做的方案 ...

  4. JS自定义对象，正则表达式，JQuery中的一些知识点

    一:自定义对象 1.基本概念:①对象:包含一系列无序属性和方法的集合.②键值对:对象中的数据是以键值对的形式存在的,以键取值.③属性:描述对象特征的一系列变量.[对象中的变量]④方法:描述对象行为的一 ...

  5. IntelliJ-项目配置，解决no artifacts的warnings

    1.名词解释 artifacts:是maven中的一个概念,表示项目/modules如何打包,比如jar,war,war exploded,ear等打包形式, 一个项目或者说module有了artif ...

  6. edge animate从入门到放弃

    一.什么是edge animate edge animate这是一款方便网页设计师和前端工程师实现动画交互的一款工具,虽然是adobe出品的,但是属于Flash和H5时代的过渡产物,这一款产品在201 ...

  7. 蓝桥杯-四平方和-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  8. hust1010 kmp

    There is a string A. The length of A is less than 1,000,000. I rewrite it again and again. Then I go ...

  9. TypeScript入门-高级类型

    高级类型 交叉类型 交叉类型,就是将多个类型合并为一个新的类型,这个新的类型具有这多个类型的成员,含有这几个类型的所有特性,是他们的综合体,像是集合的并集 例子: function extend< ...

  10. 【NLP】3000篇搜狐新闻语料数据预处理器的python实现

    3000篇搜狐新闻语料数据预处理器的python实现 白宁超 2017年5月5日17:20:04 摘要: 关于自然语言处理模型训练亦或是数据挖掘.文本处理等等,均离不开数据清洗,数据预处理的工作.这里 ...