css选择器
CSS选择器可以简单分为三类：简单选择器、伪元素选择器、组合选择器
简单选择器
标签选择器
标签选择器就是以元素的标签作为选择器
<style>
p{color:red}
</style>
<div>
<p>段落一</p>
<p>段落二</p>
</div>
类选择器
类选择器就是以元素的class名作为选择器，class值可以有多个
<style>
.special{color:red}
</style>
<div>
<p>段落一</p>
<p class="special p">段落二</p>
</div>
ID选择器
id选择器就是以元素的id属性值作为选择器，用法和类选择器查不多，id名不能重复，相同的id贼页面只能出现一次
通配符选择器
用*号作为选择器，选择页面所有元素
属性选择器
选择具有某个属性的元素,属性值如果包含特殊符号要用引号包裹
<style>
[disabled]{ //选择包含属性disabled的元素
color:red;
}
[type="text"]{ //选择属性type值为text的元素，也可以写成[type=text]
color:blue;
}
[class~=first]{//选择包含属性值first的元素
}
[type|=pass]{//选择属性值为pass或者以pass-开头的元素
}
[type^=pass]{//选择属性值以pass开头的元素
}
[type$=word]{//选择属性值以word结尾的元素
}
[type*=wor]{//选择属性值包含wor的元素
}
</style>
<form action="">
<div class="first div">
<input type="text" disabled value="张三">
</div>
<div>
<input type="password" placeholder="密码">
</div>
</form>
伪类选择器
a:link{}//href属性里有值的a标签
a:visited{}//选择点击过的a标签
a:hover{}//选择鼠标经过的a标签
a:active{}//选择鼠标点击时的a标签
//a:link和a:visited只能用于a标签
:enable{}//元素可用
:disable{}//元素不可用
:checked{}//选中的状态
li:first-child
li:last-child
li:nth-child()
li:nth-last-child()
:only-child
:first-of-type
:last-of-type
:nth-of-type
:nth-last-of-type
:only-of-type
:empty
:root
:not()
:target
:lang()
伪元素选择器
::first-letter{},选择第一个字符
::first-line{}选择第一行
::before{content:"before"}在某个元素的前面插入内容
::after{content:"after"}在某个元素的后面插入内容
::selection{}用于倍用户选中的内容
组合选择器
后代选择器
两个选择器用空格隔开，选择后面的元素是前面的后代，子选择器用>隔开，选择直接子元素
兄弟选择器
h2+p{}相邻兄弟选择器
h2~p{}通用兄弟选择器
选择器分组
用逗号隔开
继承
子元素能够继承父元素的某些样式
