引入css的三种方式
<!-- 行间样式 -->
<div style="width: 100px;height: 100px;background-color: #f40;"></div>
<!-- 内嵌式css -->
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<!-- 外部css文件 -->
<link rel="stylesheet" href="文件路径">
选择器
基本选择器
<!-- id选择器 #oonlt{} -->
<div id="only"></div>
<!-- 类选择器 .content{} -->
<div class="conent"></div>
<!-- 标签选择器 p{} -->
<p></p>
<!-- 通配符选择器 *{} -->
<!-- 属性选择器 input[type=text] -->
<input type="text" name="" id="">
<!-- 后代选择器/派生选择器 div i{} -->
<div>
<span>
<i></i>
</span>
</div>
<!-- 直接子元素选择器 div>p{} -->
<div>
<p></p>
</div>
<!-- 并列选择器 div.div1 -->
<div class="div1"></div>
<div class="div2"></div>
<!-- 分组选择器 div,span,strong{} -->
<div></div>
<span></span>
<strong></strong>
<!-- 相邻兄弟选择器 #first + .inner{} 它只会匹配紧跟着的兄弟元素 -->
<!-- 通用兄弟选择器 #first ~ div{} 它会匹配所有的兄弟元素(不需要紧跟) -->
<!--
伪类选择器
a:hover{鼠标移入}
a:active{鼠标选定}
a:link{鼠标未访问}
a:visited{鼠标点击过一次的状态}
-->
<a href="#"></a>
<!-- 伪元素选择器 是行级元素 -->
<div>计算机</div>
<style>
div::before{
content: '全国';
width: 200px;
height: 200px;
background-color: green;
}
div::after{
content: '等级';
width: 200px;
height: 200px;
background-color: red;
}
</style>
复杂选择器
<!--
伪类选择器
1> :first-child ->(选择第一个子元素)
:first-of-type ->(选择子元素中第一个指定类型的元素)
2> :last-child ->(选择最后一个子元素)
:last-of-type ->(选择子元素中最后一个指定类型的元素)
3> :nth-child(n) ->(选择指定的第n个子元素)
:even,关键字,等同于2n
:odd,关键字,等同于2n-1
4> :nth-of-type() ->(选中指定的子元素中第几某类型的元素)
-->
<!--
伪元素选择器
1> ::first-letter -> (选中元素中的第一个字母)
2> ::first-line -> (选中元素中的第一行文字)
3> ::selection -> (选中用户框起来的部分)
-->
<!--
属性选择器
input[type=text] ==> E[attr=val] 属性值完全等于val
a[title] ==> E[attr] 存在attr属性即可
div[class^=font] ==> E[attr^=val] 属性值包含val并且在开始位置
div[class$=footer] ==> E[attr$=val] 属性值包含val并且在结束位置
div[class*=font] ==> E[attr*=val] 属性值包含val并且在任意位置
-->
选择器优先级
行间样式>id选择器>class选择器>标签选择器>通配符选择器
css权重
!important Infinity
行间样式 1000(256进制)
id 100
class/属性/伪类 10
标签/伪元素 1
通配符 0