/*
css语法：
选择器{
声明1；
声明2；
。。。
}
声明由属性和值组成
css的引用方式
1.行内式
<p style="color: red;font-size: 50px;text-align: center">行内式</p>
关键字：style,直接在行内进行显示效果调整
2.嵌入式
<head>
<style>
p {
color: red;
font-size: 50px;
text-align: center
}
</style>
</head>
在html文件中，head模块中定义，关键字style
3.外部样式表之链接式
在css文件中写选择器，然后点文件名直接拖到html中你要放def位置：
<head>
<link rel="stylesheet" href="css/mystyle.css">
</head>
_______________________________________________________
id 选择器:
根据对象的标签设置属性
id名称 {
属性：值；
}
1、在企业开发中如果仅仅只是为了设置样式，通常不会使用id，在前端开发中id通常是留给js使用的
2、每个标签都可以设置唯一一个id，id就相当于人/标签的身份证，因此在同一界面内id绝不能重复
3、引用id一定要加#
4、id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字如p，a，img等
例 :
#li{
color:red;
}
<p id="li">例，因为用的color属性，调整的是红色，这条语句也就变成红色</p>
_______________________________________________________
类选择器:
根据类名设置属性
.类名{
属性：值；
}
1、类名就是专门用来给某个特定的标签设置样式的
2、每个标签都可以设置一个或多个class（空格分隔），class就相当于人/标签的名称，因此同一界面内class可以重复
3、引用class一定要加点.
4、类名的命名规则与id的命名规则相同
.li{
color:red;
}
<p class="li">例，因为用的color属性，调整的是红色，这条语句也就变成红色</p>
_______________________________________________________
标签选择器:
根据指定的标签名称，设置索引
标签名称 {
属性：值;
}
1、只要是HTML的标签都能当做标签选择器
2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签
3、标签选择器，无论嵌套多少层都能选中
p{
color:red;
}
<p >例，因为用的color属性，调整的是红色，这条语句也就变成红色</p>
_______________________________________________________
通配符选择器：
选择所有标签
* {
属性：值；
}
1、在企业开发中一般不会使用通配符选择器
理由是：
由于通配符选择器是设置界面上所有的标签的属性，
所以在设置之前会遍历所有的标签
如果当前界面上的标签比较多，那么性能就会比较差
*{
color:red;
}
<p >例，因为用的color属性，调整的是红色，这条语句也就变成红色</p>
<a >例，因为用的color属性，调整的是红色，这条语句也就变成红色</a>
_______________________________________________________
标签名/类名等等空格标签名/类名等等空格。。。 {
属性：值;
}
1、后代选择器必须用空格隔开
2、后代不仅仅是儿子，也包括孙子、重孙子
3、后代选择器不仅仅可以使用标签名称，还可以使用其他选择器比如id或class
4、后代选择器可以通过空格一直延续下去
#id1 li p {
color: red;
}
<ul id='id1'>
<li >
<p >例，因为用的color属性，调整的是红色，这条语句也就变成红色</p>
</li>
</ul>
_______________________________________________________
子元素选择器
找到制定标签的所有特点的直接子元素，然后设置属性
标签名/类名等等>标签名/类名等等>。。。 {
属性：值;
}
#id1>li>p {
color: red;
}
1、子元素选择器之间需要用>符号链接，并且不能有空格
比如div >p会找div标签的所有后代标签，标签名为">p"
2、子元素选择器只会查找儿子，不会查找其他嵌套的标签
3、子元素选择器不仅可以用标签名称，还可以使用其他选择器,比如id或class
4、子元素选择器可以通过>符号一直延续下去
<ul id='id1'>
<li >
<p >例，因为用的color属性，调整的是红色，这条语句也就变成红色</p>
</li>
</ul>
<p >不是子节点，所以不改变颜色</p>
_______________________________________________________
相邻选择器
给指定选择器后面紧跟的那个选择器选中的标签设置属性
选择器1+选择器2 {
属性：值;
}
1、相邻兄弟选择器必须通过+号链接
2、相邻兄弟选择器只能选中你紧跟其后的那个标签，不能选中被隔开的标签
p+a {
color: red;
}
<p >啦啦啦德玛西亚</p>
<a >例，因为用的color属性，调整的是红色，这条语句也就变成红色</a>
_______________________________________________________
兄弟选择器
给指定选择器后面的所有选择器中的所有标签设置属性
选择器1~选择器2 {
属性：值;
}
1、通用兄弟选择器必须用~来链接
2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签
无论有没有被隔开，都可以被选中
p+a {
color: red;
}
<p >啦啦啦德玛西亚</p>
<a >例，因为用的color属性，调整的是红色，这条语句也就变成红色</a>
<a >例，因为用的color属性，调整的是红色，这条语句也就变成红色</a>
<a >例，因为用的color属性，调整的是红色，这条语句也就变成红色</a>
_______________________________________________________
交集选择器
给所有选择器选中的标签中，相交的那部分标签设置属性
选择器1选择器2 {
属性：值;
}
1、选择器与选择器之间没有任何链接符号
2、选择器可以使用标签名称、id、class
3、交集选择器在企业开发中并不多见，了解即可
因为：p.part1 完全可以用.part1取代
p.part1 {
color: red;
}
<p class="part1">例，因为用的color属性，调整的是红色，这条语句也就变成红色</p>
_______________________________________________________
并集选择器
给所有满足条件的标签设置属性
选择器1，选择器2{
属性：值
}
1、选择器与选择器之间必须用逗号来链接
2、选择器可以使用标签名称、id、class
p,a{
color:red;
}
<p >例，因为用的color属性，调整的是红色，这条语句也就变成红色</p>
<a >例，因为用的color属性，调整的是红色，这条语句也就变成红色</a>
_______________________________________________________
序列选择器
标签:first-child
同级别的第一个
标签是p的话找同级别的，第一个是p就效果调整
标签:last-child
同级别的最后一个
标签是p的话找同级别的，倒数第一个是p就效果调整
标签:nth-child(n)
同级别第n个
标签是p的话找同级别的，第n个是p的话就效果调整
标签:nth-last-child(n)
同级别第n个
标签是p的话找同级别的，倒数第n个是p的话就效果调整
标签：:first-of-type
同级别同类别第一个
标签是p的话找同级别的，然后找出所有的p标签的，调整第一个p标签的效果
标签：:last-of-type
同级别同类最后一个
标签是p的话找同级别的，然后找出所有的p标签的，调整倒数第一个p标签的效果
标签：:nth-of-type(n)
同级别同类第n个
标签是p的话找同级别的，然后找出所有的p标签的，调整第n个p标签的效果
标签：:nth-last-of-type(n)
同级别同类型的倒数第n个
标签是p的话找同级别的，然后找出所有的p标签的，调整倒数第n个p标签的效果
标签：:only-of-type
同类型的唯一一个
标签是p的话，只有它是p类的唯一一个才会调整他的效果
标签：:only-child
同级别的唯一一个
标签是p的话，当前级别只有他一行才调整他的效果
_______________________________________________________
属性选择器
该选择器，最常用于input标签
[属性名]
中括号包裹属性
如果属性名为id，所有带id属性的全部调整
其他选择器[属性名]
选择器后跟中括号，括号中跟属性
如果选择器为p，属性名为id，所有p标签带id属性的全部调整
[属性名=值]
中括号中，属性名带值的
如果属性名为class，值为1，那所有class=1的显示都调整
[属性名^=值]
中括号中，属性和值中间加^
如果属性名为class，值为aa,那所有class=的值的开头带aa的显示都调整
[属性名$=值]
中括号中，属性和值中间加$
如果属性名为class，值为aa,那所有class=的值的结尾带aa的显示都调整
[属性名*=值]
中括号中，属性和值中间加*
如果属性名为class，值为aa,那所有class=的值中带aa的显示都调整
_______________________________________________________
伪类选择器
没有访问的超链接a标签样式：
标签:link {
属性: 值;
}
如果标签为a，那他没别访问时就会根据{}内的属性和值调整显示
访问过的超链接a标签样式：
标签:visited {
属性: 值;
}
如果标签为a，那它被访问过再打开时就会根据{}内的属性和值调整显示
鼠标悬浮在元素上应用样式：
没有访问的超链接a标签样式：
标签:hover {
属性: 值;
}
如果标签为a，那当鼠标移到该链接上时就会根据{}内的属性和值调整显示
鼠标点击瞬间的样式：
标签:active {
属性: 值;
}
如果标签为a，那当时鼠标点击到时就会根据{}内的属性和值调整显示
input输入框获取焦点时样式：
标签:focus {
属性: 值;
}
如果标签为a，那当你点击时输入框就会根据{}内的属性和值调整显示
1 a标签的伪类选择器可以单独出现，也可以一起出现
2 a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效
link，visited，hover，active
3 hover是所有其他标签都可以使用的
4 focus只给input标签使用
_______________________________________________________
伪元素选择器
首字母调整：
标签:first-letter {
属性: 值;
}
如果标签为p，那p标签的的首字母做调整显示
在元素的内容前面插入新内容：
标签:before {
属性: 值;
}
如果标签为p，那p标签内容前方加入新内容并做调整显示
在元素的内容后面插入新内容：
标签:after {
属性: 值;
}
如果标签为p，那p标签内容后方加入新内容并做调整显示
_______________________________________________________
css三大特性
继承性
1、定义：给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性
2、注意：
1、只有以color、font-、text-、line-开头的属性才可以继承
2、a标签的文字颜色和下划线是不能继承别人的
3、h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大
ps:打开浏览器审查元素可以看到一些inherited from。。。的属性
3、应用场景：
通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式
层叠性
1、定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果
2、注意：
1、层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，
才会发生层叠性
ps：通过谷歌浏览器可以查看到，一些属性被划掉了
优先级
1、定义：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定
2、优先级
整体优先级从高到底：行内样式>嵌入样式>外部样式
在整体优先级的基础上
1.直接选中 > 间接选中(即继承而来的)
2、如果都是间接选中，那么谁离目标标签比较近，就听谁的
3、如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的
4、如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠
id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）
优先级之!important
1、作用：还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高，但是不推荐使用。因为大量使用!import的代码是无法维护的。
2、注意：
1、!important只能用于直接选中，不能用于间接选中
2、!important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升
3、!important必须写在属性值分号的前面
优先级之权重
1、强调
如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级
2、计算方式
1、id数多的优先级高
2、id数相同，则判定类数多的优先级高
3、id数、class数均相同，则判定标签数多的优先级高
4、若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高
*/