一.标签选择器

标签{属性：值;}

  <!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. CS程序中XML编码Encode和解码Decode

    VB6的代码,原则上只要是Windows系统均可以使用此方法 Function XMLEncode(ByVal text As String) As String Dim xmldoc Set xml ...

  2. jupyter命令把.ipynb文件转化为.py文件

    jupyter nbconvert --to script *.ipynb 就能把当前文件夹下面的所有的.ipynb文件转化为.py文件

  3. Office 2010 打开文件后所有的格式成了时间的解决方法

    最新不知道什么原因,每一个 Excel 文件打开后,时需的数据都成了时间格式. 而且改都改不了,改了后第二次打开又成了这个样子. 最后找到解决方法. 如下动画,将 [$F400] 数据格式删除就可以. ...

  4. LambdaAOP

    项目地址 :  https://github.com/kelin-xycs/LambdaAOP LambdaAOP 一个 用 C# 实现的 使用 Lambda 表达式 的 AOP 这是 一个 用 C# ...

  5. MFC message routine

    现在维护的一个软件还是用mfc写的,最近被要加入一个功能弄得焦头烂额.主要现象就是加入的菜单的响应函数没被call到 上网搜索,在官方网站找到了不少资料 主要链接如下 https://msdn.mic ...

  6. mysql之 mysql_config_editor/login-path 登录密码保护

    login-path是MySQL5.6开始支持的新特性.通过借助mysql_config_editor工具将登陆MySQL服务的认证信息加密保存在.mylogin.cnf文件(默认位于用户主目录) . ...

  7. sql server 附加只有mdf的数据库文件

    有时候SQL Server意外断电会导致SQL Server的ldf日志文件丢失或者损坏,这个时候你如果直接附加mdf文件到SQL Server会失败,这里提供一个方法可以还原只有mdf的数据库文件, ...

  8. 一道Linux 面试题

    一个文本文件info.txt的内容如下:aa,201zz,502bb,1ee,42每行都是按照逗号分隔,其中第二列都是数字,请对该文件按照第二列数字从大到小排列 答案:cat info.txt|awk ...

  9. cocos 3.16 生成预编译库模板

    打开模板功能 不知道什么原因,cocos 3.16关闭了模板功能,因此使用cocos -h命令时,无法显示gen-templates参数. 打开的方式也挺简单,打开tools/cocos2d-cons ...

  10. mvc 部署到iis 提示错误未能加载文件或程序集System.Web.Http.WebHost

    Nuget程序包管理 —>程序包管理控制台,运行以下命令即可: Update-Package Microsoft.AspNet.WebApi -reinstall