html5 学习笔记2017-2-14 pm
2017-02-14 本文已影响0人
GodlinE
标签选择器
- 什么是标签选择器
- 作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性
- 格式：
标签名称｛属性:值;｝
注意点： - 标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签
- 标签选择器无论标签藏的多深都能选中
- 只要是 HTML 中的标签就可以作为标签选择器 (h/a/img/ul/ol/dl/input....)
id 选择器
- 什么是 id选择器
- 作用：根据指定的 id 名称找到对应的标签，然后设置属性
- 格式：
#id名称{属性:值;}
注意点 - 每个 html 标签都有一个属性叫做 id，也就是每个标签都可以设置 id
- 在同一个界面中 id 的名称是不可以重复的
- 在编写 id 选择器时一定要在 id 名称前面加上 #
- id 的名称是有一定规范的：id 的名称只能由字母、数字、下划线 a-z 0-9 _
- id 名称不能以数字开头
- id 名称不能是 HTML 标签的名称，不能是 a h1 img input...
- 在企业开发中一般情况下如果仅仅是为了设置样式，我们不会使用 Id,因为在前端开发中 id 是留给 js 使用的
例子
<style>
#identity1{
color: red;
}
#identity2{
color: green;
}
#identity3{
color: blue;
}
#identity4{
color: yellow;
}
</style>
类选择器
- 什么是类选择器
- 作用:根据指定的类名称找到对应的标签，然后设置属性
- 格式：
.类名｛属性:值;｝
注意点 - 每一个 HTML 标签都有一个属性叫做 class，也就是说每个标签都可以设置类名
- 在同一个界面中 class 的名称是可以重复的
- 在编写 class 选择器时一定要在 class 名称前面加上 .
- 类名的命名规范和 Id 名称的命名规范一样
- 类名就是专门用来个 CSS 设置样式的
- 在html 中每个标签可以同时绑定多个类名
- 格式：
<标签名称 class="类名1 类名2 ...">
id 选择器和 class 选择器
-
id 和 class 的区别
-
id相当于人的身份证不可以重复，class 相当于人名可以重复
-
一个 html 标签只能绑定一个 id 名称，一个 HTML 标签可以绑定多个 class 名称
-
id 选择器和 class 选择器的区别
-
id 选择器是以 # 开头的，class 选择器时以 . 开头的
-
在企业开发中到底用 Id 选择器还是用 class 选择器？
-
id 一般情况下是给 js 使用的，所以除非特殊情况，否则不要使用 id 去设置样式
-
在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平，一般情况下在企业开发中要注重冗余代码抽取到一个类选择器中，然后让标签和这个类选择器绑定即可
后代选择器
- 什么是后代选择器
- 作用：找到指定标签的所有特定的后代标签，设置属性
- 格式：
标签名称1 标签名称2｛属性:值;｝
先找到所有名称叫做 "标签名称1"的标签，然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签，然后再设置属性div p{}
注意点 - 后代选择器必须用空格隔开
- 后代不仅仅是儿子，也包括孙子/重孙子，只要最终是放到指定标签中的都是后代
- 后代选择器不仅仅可以使用标签名称，还可以使用其他选择器
- 后代选择器可以通过空格一直延续下去
div ul li p{}
子元素选择器
- 什么是子元素选择器
- 作用：找到指定标签中所有特定的直接子元素，然后设置属性
格式：标签名称1>标签名称2{属性:值;}
先找到所有名称叫做"标签名称1"的标签，然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素
注意点 - 子元素选择器只会查找儿子，不会查找其他被嵌套的标签
- 子元素选择器之间需要用 > 符号链接，并且不能有空格
- 子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器
- 子元素选择器可以通过 > 符号一直延续下去
div>ul>li>p
后代选择器和子元素选择器
-
后代选择器和子元素选择器的区别
-
后代选择器使用空格作为链接符号，子元素选择器使用 > 作为链接符号
-
后代选择器会选中指定标签中，所有的特定后代标签，也就是会选中儿子/孙子...，只要是被放到指定标签中的特定标签都会被选中，子元素选择器只会选中指定标签中，所有的特定的直接标签，也就是只会选中特定的儿子标签
-
后代选择器和子元素选择器的共同点
-
后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
-
后代选择器和子元素选择器都可以通过各自的链接符号一直延续下去
选择器1>选择器2>选择器3>选择器4{} -
在企业开发中如何选择
-
如果向选中指定标签中的所有特定的标签，那么就使用后代选择器如果只想选中指定标签中的所有特定儿子标签，那么就使用子元素选择器
交集选择器
- 什么是交集选择器
- 作用：给所有选择器选中的标签中，相交的那部分标签设置属性
格式：选择器1选择器2{属性:值;}
注意点： - 选择器和选择器之间没有任何的链接符号
- 选择器可以使用标签名称/id名称/class名称
- 交集选择器仅仅作为了解，企业开发中用的并不多
并集选择器
- 什么是并集选择器
-作用：给所有选择器选中的标签设置属性 - 格式：
选择器1,选择器2{属性:值;}
注意点： - 并集选择器必须使用 , 来链接
- 选择器可以使用标签名称/id名称/class名称
兄弟选择器
- 相邻兄弟选择器 CSS2
- 作用：给指定选择器后面紧跟的哪个选择器选中的标签设置属性
- 格式：
选择器1+选择器2{属性:值;}
注意点： - 相邻兄弟选择器必须通过 + 链接
- 相邻兄弟选择器只能选中紧跟其后的哪个标签，不能选中被隔开的标签
<style>
h1+p{
color: green;
}
</style>
<body>
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p> <!--不变色-->
<p>我是段落</p>
<a href="#">我是超链接</a>
<p>我是段落</p> (!--不变色--)
<h1>我是标题</h1>
<p>我是段落</p> <!--变色-->
<p>我是段落</p>
<p>我是段落</p>
</body>
- 通用兄弟选择器 CSS3
- 作用：给指定选择器后面的所有选择器选中的所有标签设置属性
- 格式：选择器1~选择器2｛属性:值;｝
注意点： - 通用兄弟选择器必须用~链接
- 通用兄弟选择器选中的是指定选择器后面某个选择器中的所有标签，无论有没有被隔开都可以选中
<style>
h1~p{
color: green;
}
</style>
<body>
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p> <!--变色-->
<p>我是段落</p>
<a href="#">我是超链接</a>
<p>我是段落</p> (!--变色--)
<h1>我是标题</h1>
<p>我是段落</p> <!--变色-->
<p>我是段落</p>
<p>我是段落</p>
</body>
