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

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. linux常用操作命令

    cd: cd /data 进入目录 cd .. 返回上级菜单tar: tar -cvf jcms20170411.tar.gz jcms/ 将jcms文件夹打包为 jcms20170411.tar.g ...

  2. Python 一行代码

    Python语法十分便捷,通过几个简单例子了解其趣味 1.Fizz.Buzz问题为: 打印数字1到100, 3的倍数打印"Fizz", 5的倍数打印"Buzz" ...

  3. 修改linux系统时间和同步

    date 查看当前时间 date -s 15:14:13 修改时间 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 修改时区 yes cront ...

  4. Struts2框架的基本使用

         前面已经介绍过了MVC思想,Struts2是一个优秀的MVC框架,大大降低了各个层之间的耦合度,具有很好的扩展性.从本篇开始我们学习Struts2的基本用法,本篇主要包括以下内容: Stru ...

  5. JQuery实现通过点击标题切换字体

    这个主要通过判断被点击的元素的子元素中是否包含了b元素来进行字体的切换,其中wrapInner函数是为了在$author元素的内部添加b标签. 切换回正常字体是通过将内容转化为纯文本形式,再替换元素内 ...

  6. JavaScript中undefined 和not defined

    首先呢,我们来介绍undefined,xx is not defined的区别 (创建一个html文件,在头部编写JavaScript代码) 我们先编写如下代码: <script type=&q ...

  7. hibernate的映射关系之一对多

    关系:事物之间相互作用.相互联系的状态.范围最大. 联系:在关系数据库中表示实体与实体之间的联系,1:1,1:n,m:n. 关联:表示对象之间的关系,既有数量性,又有方向性:动词:将对象之间通过某种方 ...

  8. 2017Wow!新媒体营销深度分享会值得参加吗?

    "Wow!新媒体营销深度分享会"是虎嗅打造的创新跨界营销平台,以引领营销趋势和洞察技术奇点为目标,推动前沿技术创新与营销的碰撞融合. 在这里,你将看到2017年最前瞻的营销趋势.最 ...

  9. jquery按钮绑定特殊事件

    本文主要介绍点击一个按钮处理事件的一些特殊情况和技巧. 一.第一次点击触发一个函数,之后点击都触发另一个函数 1.小白实现 2.大神实现 代码如下: <body> <button&g ...

  10. OC中Foundation框架之NSArray、NSMutableArray

    NSArray概述 NSArray是OC中的数组类 NSArray特点 )只能存放任意OC对象,并且是有顺序的 )不能存放非OC对象,比如int/float/double/char/enum/stru ...