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

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. Bitbucket导入项目

    1.先初始化git本地仓库(如果已经受git管理跳过此步) $ git init 2.添加远程仓库 $ git remote add origin git@bitbucket.org:name/rep ...

  2. python代码零散知识点

    1.用python读入csv文件 green_taxi1=pd.DataFrame(pd.read_csv('../../../../MatlabCode/data/green/green_tripd ...

  3. 权限管理系统 mysql 数据脚本

    # SQL-Front 5.1 (Build 4.16) /*!40101 SET @OLD_SQL_MODE=@@SQL_MODE */; /*!40101 SET SQL_MODE='STRICT ...

  4. PHP的虚拟域名的配置

    由于本人的自己搭建的php环境,Wamp环境.虚拟域名是写程序的一个最基本的配置,也对项目的调试有一定的真实感.我在学习虚拟域名的时候是受到了一些的问题,所以说写这个是为了帮助新人少走弯路, 也是为了 ...

  5. WF4.0以上使用代码完整自定义动态生成执行工作流Xaml文件

    给大家分享一下,如何完全使用代码自定义的创建生成工作流文件(用代码创建Xaml文件),并且动态加载运行所生成的工作流. 工作流生成后 在Xaml文件里的主要节点如下: 输入输出参数 <x:Mem ...

  6. java中难度大一点的面试题

    1.请大概描述一下Vector和ArrayList的区别,Hashtable和HashMap的区别.(5) (1)Vector和ArrayList的异同 实现原理,功能相同,可以互用 主要区别: Ve ...

  7. maven（02）--简单的命令操作

    使用maven有什么好处呢? 这个问题留到该文的末尾进行总结>v< maven测试 在上一篇文章中介绍了如何简单的编译一个java文件,执行mvn compile命令后,你会发现在你新建的 ...

  8. ECMAScript迭代语句

    迭代语句又叫循环语句,声明一组要反复执行的命令,直到满足某些条件为止. 循环通常用于迭代数组的值(因此而得名),或者执行重复的算术任务. do-while, while, for, for-in -- ...

  9. codeforce 149D Coloring Brackets 区间DP

    题目链接:http://codeforces.com/problemset/problem/149/D 继续区间DP啊.... 思路: 定义dp[l][r][c1][c2]表示对于区间(l,r)来说, ...

  10. 学习笔记：javascript内置对象：字符串对象

    1.字符串的创建   var str = "Hello Microsoft!";   2.字符串属性   constructor  返回创建字符串属性的函数   length    ...