web之CSS入门02

CSS选择器

用来指定要为哪个 HTML 元素定义样式。选择器是CSS 样式规则中重要的组成部分，我们可以将选择器看作是 CSS 样式与HTML 元素之间的匹配模式，与选择器关联的样式规则会应用于选择器所指定的 HTML 元素上

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的

css基础选择器

基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

通配符选择器

通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距

* {
	属性1: 属性值1;  
}

* {
    margin: 0;
    padding: 0;
}

标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式

标签选择器 {
	属性1: 属性值1;  
}

p {
    color: blue;
}

类选择器

类选择器可以根据标签的 class 属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值

.类名 {
	属性1: 属性值1;  
}

<div class="类名"> 变红色 </div>

.black {
    color: black;
}

<div class="black"></div>

1. 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
2. 类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点.号显示
3. 类选择器使用.（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）
4. 可以理解为给这个标签起了一个名字，来表示
5. 长名称或词组可以使用中横线来为选择器命名
6. 不要使用纯数字、中文等命名，尽量使用英文字母来表示
7. 命名要有意义，尽量使别人一眼就知道这个类名的目的

我们可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选出这个标签

简单理解就是一个标签有多个名字

<div class="red font20">亚瑟</div>

1. 在标签class 属性中写 多个类名
2. 多个类名中间必须用空格分开
3. 这个标签就可以分别具有这些类名的样式

ID 选择器

ID 选择器用来匹配 HTML 文档中具有指定 ID 属性的标签，ID选择器的定义需要用到井号#，后面紧跟 ID 属性的值,id属性只能在每个 HTML 文档中出现一次

#id名 {
	属性1: 属性值1;  
}

<div id="id名"></div>

#nav {
    color: red;
}

<div id="nav"></div>

id选择器和类选择器的区别

1. 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
2. id 选择器好比人的身份证号码，全中国是唯一的，不得重复
3. id 选择器和类选择器最大的不同在于使用次数上
4. 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

基础选择器	作用	特点	使用情况	用法
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	*{}
标签选择器	可以选出所有相同的标签	不能差异化选择	较多	标签名{}
类选择器	可以选出一个或多个标签	可以根据需求选择	非常多	.类名{}
ID选择器	只能选择一个标签	只能在HTML文档中出现一次	一般和js搭配	#id名{}

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代

ul li a {
    text-decoration: none;
}

ul li a选择器仅会匹配无序列表<ul>标签的所有后代<a>标签

• 元素1 和 元素2 中间用空格隔开
• 元素1 是父级，元素2 是子级，最终选择的是元素2
• 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
• 元素1 和 元素2 可以是任意基础选择器

子选择器

子选择器与后代选择器类似，不过子选择器只会匹配某个元素的直接后代（元素与其子元素之间只有一层嵌套关系），子选择器由两个或多个选择器组成，选择器之间用大于号>分隔开

p > strong {
    color:red;
}

p > strong选择器会将下面代码中第一个<p>标签的子标签<strong>内的文字设置为红色，但对第二个<p>标签中的<strong>标签则没有影响

<p>欢迎访问<strong>欢迎访问</strong>！</p>
<p><em><strong>欢迎访问</strong></em></p>

• 元素1 和 元素2 中间用 大于号 隔开
• 元素1 是父级，元素2 是子级，最终选择的是元素2
• 元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器

并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号,连接而成，任何形式的选择器都可以作为并集选择器的一部分

h1, h2, h3 {
    font-weight: normal;
}

选择器h1、h2、h3中包含相同的样式font-weight: normal

• 元素1 和 元素2 中间用逗号隔开
• 逗号可以理解为和的意思
• 并集选择器通常用于集体声明

相邻兄弟选择器

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+，加号两边为相邻的两个元素，选择器会匹配加号后面的元素

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

h1 + p选择器会匹配同一父级元素下紧邻<h1>标签并在其后的<p>标签。ul.task + p选择器则会匹配同一父级元素下紧邻<ul>标签并在其后的<p>标签，但<ul>要具有class="task"属性

属性选择器

属性选择器用来匹配具有特定属性的元素。属性选择器的定义方式与标签选择器相似，只不过需要在标签的后面使用方括号[ ]来指定标签具有的属性信息

input[type="text"] {
   color: blue;
}

input[type="text"]选择器会匹配所有具有type="text"属性的<input>标签。属性选择器中方括号[ ]内的属性信息还支持以下几种写法：

• [target]：选择所有带有target属性元素；
• [target=_blank]：选择所有具有target="_blank" 属性的元素；
• [title~=flower]：选择title属性包含单词flower的所有元素；
• [lang|=en]：选择lang属性正好是en或以en为开头的所有元素

通用兄弟选择器

通用兄弟选择器与相邻兄弟选择器非常相似，但却没有那么严格。通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号~，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素

h1 ∼ p {
    color: blue;
    font-size: 18px;
}

h1 ∼ p选择器会匹配同一父级元素下<h1>标签之后的所用<p>标签

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用冒号:表示

链接伪类选择器

• a:link 没有点击过的(访问过的)链接
• a:visited 点击过的(访问过的)链接
• a:hover 鼠标经过的那个链接
• a:active 鼠标正在按下还没有弹起鼠标的那个链接

a:hover {
    color:yellow;
}

:focus 伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取

input:focus {
    background-color:yellow;
}

first-letter

常用的给首字母设置特殊样式

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
} 

before和after多用于清除浮动