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

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. lca最近公共祖先（模板）

    洛谷上的lca模板题--传送门 学了求lca的tarjan算法(离线),在洛谷上做模板题,结果后三个点超时. 又把询问改成链式前向星,才ok. 这个博客,tarjan分析的很详细. 附代码-- #in ...

  2. Jmeter自动化测试工具的简单使用--HTTP测试

    Jmeter自动化测试工具的简单应用 1.安装Jmeter 链接: https://pan.baidu.com/s/1mhSzU68 密码: 446z   到这里下载 1.1 jmeter 将下载好的 ...

  3. Go 并发随机打印1-n

    package main import (     "fmt"     "math/rand"     "sync"     "t ...

  4. 计算单词出现的次数--linq

    1.直接给出代码:声明数据,也可以是txt等文件,通过File类的静态方法读取其中的文本,再转换成List<string>数组. private static List<string ...

  5. 分布式文件系统 FastDFS 5.0.5 & Linux CentOS 7 安装配置（单点安装）——第一篇

    分布式文件系统 FastDFS 5.0.5 & Linux CentOS 7 安装配置(单点安装)--第一篇 简介 首先简单了解一下基础概念,FastDFS是一个开源的轻量级分布式文件系统,由 ...

  6. CF #93 div1 B. Password KMP/Z

    题目链接:http://codeforces.com/problemset/problem/126/B 大意:给一个字符串,问最长的既是前缀又是后缀又是中缀(这里指在内部出现)的子串. 我自己的做法是 ...

  7. HDU 5617 DP

    沿着一条条斜线DP即可,dp[k][i][j]表示第k步,一端在第j列,另一端在第i列,构成回文的个数,沿着四个方向推下去即可. #include <iostream> #include ...

  8. 使用 rsync 同步

    原文地址 http://www.howtocn.org/rsync:use_rsync 选项 说明 -a, ––archive 归档模式,表示以递归方式传输文件,并保持所有文件属性,等价于 -rlpt ...

  9. springcloud(一)：大话Spring Cloud

    研究了一段时间spring boot了准备向spirng cloud进发,公司架构和项目也全面拥抱了Spring Cloud.在使用了一段时间后发现Spring Cloud从技术架构上降低了对大型系统 ...

  10. 自动化运维：使用psutil和paramiko读取远程主机信息

    1.前言  今天大致看了下自动化运维的东西,里面介绍到了psutil模块,其封装了linux 下的大部分shell命令,用起来比较方便.但是基本都是介绍在本地如何使用,而实际情况大家很少这样使用,一般 ...