一.标签选择器

标签{属性:值;}

  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*标签选择器*/
div{
font-size:50px;
color: green;
background-color:yellow;
width:300px;
height:200px;
}
p{
color: black;
font-size: 60px;
}
</style>
</head>
<body>
<div>标签选择器1</div>
<div>标签选择器2</div>
<p>标签选择器3</p>
<p>标签选择器4</p>
<div>标签选择器5</div>
</body>
</html>

标签选择器

二.类选择器

.自定义类名{属性:值;  属性:值;}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
font-size:40px;
color: #ff0000;
width: 400px;
height: 300px;
background-color:#999;
}
.miss{
text-indent:2em;
/* text-align: right; */
} </style>
</head>
<body>
<div class="box miss" >类选择器1</div>
<div>类选择器2</div>
<p class="box">类选择器3</p>
<p>类选择器4</p>
<span class="box">类选择器5</span> </body>
</html>

类选择器

三.id选择器

#自定义名称{属性:值;}

特点: 一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上,不符合w3c规范,JS调用会出问题。

一个标签只能调用一个ID选择器。

一个标签可以同时调用类选择器和ID选择器。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
font-size: 40px;
color: rgb(0,0,255);
background-color: rgb(255,255,0);
}
.box{
text-indent: 2em;
}
</style>
</head>
<body>
<div id="box" class="box">ID选择器1</div>
<div id="box">ID选择器2</div>
<p>ID选择器3</p>
<p>ID选择器4</p> </body>
</html>

ID选择器

四.复合选择器

概念:两个或者两个以上的基础选择器通过不同的方式连接在一起。

(1) 交集选择器

标签+类(ID)选择器{属性:值;}

特点:即要满足使用了某个标签,还要满足使用了类(id)选择器。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
font-size:50px; }
div.box{
color:blue;
} div#miss{
width: 400px;
height: 300px;
background-color:yellow;
} </style>
</head>
<body>
<div class="box">交集选择器1</div>
<p class="box">交集选择器2</p>
<div id="miss">交集选择器3</div>
</body>
</html>

  

(2)后代选择器

选择器+空格+选择器{属性:值;}

后代选择器首选要满足包含(嵌套)关系。

父集元素在前边,子集元素在后边。

特点:无限制隔代。

只要能代表标签,标签、类选择器、ID选择器自由组合。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*.box{
font-size:40px;
color:red;
}
div span{
font-size: 50px;
}*/
/*.box span{
background-color: blue;
}*/
/* .box .miss{
color:red;
}*/
.box span{
color:red;
}
</style>
</head>
<body>
<div class="box">
<p><span class="miss">后代选择器1</span>
<span>后代选择器2</span>
</p> </div>
<div class="box"><span>后代选择器3</span></div>
</body>
</html>

后代选择器

(3) 子代选择器

选择器>选择器{属性:值;}

选中直接下一代元素。

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div>span{
color:red;
font-size:40px;
}
p>span{
color:green;
font-size:60px;
} </style>
</head>
<body>
<div>
<p><span>子代选择器1</span></p>
<span>子代选择器2</span> </div>
</body>
</html>

子代选择器

(4)并集选择器

选择器+,+选择器+,选择器{属性:值;}

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box,#miss,span,h1{
font-size:100px;
color: #fff;
background-color: green; }
</style>
</head>
<body>
<div class="box">并集选择器1</div>
<p id="miss">并集选择器2</p>
<span>并集选择器3</span>
<h1>并集选择器4</h1>
</body>
</html>

并集选择器

css学习(1)的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. css学习归纳总结(三) 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  3. css学习归纳总结(二) 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  4. css学习归纳总结(一) 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  5. 【2016年特别福利】史上最全CSS学习资料大全

    css学习篇 [2016年特别福利]史上最全CSS学习资料大全

  6. 【转】css学习专题-BFC

    css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...

  7. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  8. html+css学习总结

    HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  10. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

随机推荐

  1. LG3275 【[SCOI2011]糖果】

    前言 我对差分约束有我个人独特的看法,写这题解既是与大家分享,又算作我对差分约束系统的总结. 浅谈差分约束 对于一些给出形如\(x_i-x_j\leq a\)不等式(差分约束)组,求\(x_t-x_s ...

  2. 利用 httpmodule 强制所有页面使用同一基类

    public class OMSPageChecker : IHttpModule { public void Dispose() { } public void Init(HttpApplicati ...

  3. Intellij IDEA2017.3永久激活方法

    随着idea不断地发展,eclipse的缺点日渐明显,为了能够获得良好的编码体验,越来越多的朋友转向了idea,淘汰了eclipse但是由于近期idea所有私人服务器被封杀了,很多喜欢编码的朋友们都陷 ...

  4. mongodb之 复制集维护小结

    原文地址:https://www.cnblogs.com/zhaowenzhong/p/5667312.html 一.新增副本集成员 1.登录primary 2.use admin >rs.ad ...

  5. css3中的BFC,IFC,GFC和FFC

    出处:https://www.jianshu.com/p/e75f351e11f8 表格比较: 名称 英文全称 含义 BFC Block Formatting Contexts 块级格式化上下文 IF ...

  6. Packet for query is too large (1660 > 1024). You can change this value on the server by setting the max_allowed_packet' variable.

    原因是mysql 默认允许的 数据报包 是 1M  设置大一些就可以了 centos 下面  /ect/my.cnf 文件里面 加入或者修改 下面的参数 [mysqld] max_allowed_pa ...

  7. laravel中resource资源路由方法

    新增的 resource 方法将遵从 RESTful 架构为用户资源生成路由.该方法接收两个参数,第一个参数为资源名称,第二个参数为控制器名称. Route::resource('users', 'U ...

  8. Elasticsearch的数据导出和导入操作(elasticdump工具),以及删除指定type的数据(delete-by-query插件)

    Elasticseach目前作为查询搜索平台,的确非常实用方便.我们今天在这里要讨论的是如何做数据备份和type删除.我的ES的版本是2.4.1. ES的备份,可不像MySQL的mysqldump这么 ...

  9. WebService安全性的几种实现方法【身份识别】

     转:http://blog.csdn.net/yongping8204/article/details/8619577 WebService安全性的几种实现方法[身份识别] 标签: webservi ...

  10. onsubmit ajax return false 无效

    var flat=false; return flat; async:false, 是重点.   执行ajax时return false的function 与onsubmit()不是同一个函数,所以无 ...