CSS选择器
1.标签选择器：元素选择器
1.元素选择器/类型选择符（element选择器）
例：div{width;100px;height:100px;background:red}
语法：元素名称{属性：属性值；}如：div,p,h1,img,a,span,i,em,strong,b,ul,li,ol,li,...等等
说明：
a，元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称为选择符。例如body，div，p，img， em，,strong,span...等等
b，所有的页面元素都可以作为选择符；
用法：
1）如果想改变某个元素的默认颜色时，可以使用类型选择符；
（如：改变一个div，p，h1样式 ）
2）当统一文档某个元素的显示效果时，可以使用类型选择符
（如：改变文档所有p段落样式）
2.标签选择器：class选择器/类选择器
语法：class名{属性:属性值;}
说明：
a）当我们使用class选择符，应先为美国元素定义一个class名称
b）class选择符的语法格式是：
如:<div class="top"></div>
.top{
width:200px;height:100px;bakground:green;
}
用法：class选择符跟适合定义一类样式
<style>
.ezr{
color: brown;
}
.top{
background-color: blue;
color: aliceblue;
}
</style>
<div class=" top ezr">1111div</div>
<div class="ezr">222</div>
<div>333</div>
<div>444</div>
优先显示顺序看style的排列顺序，与标签内类别排列顺序无关
3.id选择器
语法：#id名{属性:属性值;}
说明：
a)当我们使用id选择符时，应为每一个元素定义一个id属性
如：<div id="box"></div>
b)id选择符的语法格式是"#"加上自定义的id名
如：#box{
width:300px;height:300px;
}
c)起名时只能对应文档中的一个具体元素对象。（唯一性）
4.通配符/通配选择器
语法:*{属性:属性值;}
说明：通配符的写法是"*"，含义就是所有元素。
*{
margin:0;padding:0;
}
margin 外边距 padding 内边距
5.群组和后代选择器
1.群组选择器
语法：选择符1，选择符2，选择符3...{属性:属性值;}例：#top,#nv1,h1{width:960px;}
说明：当有多个选择符应用相同声明时，可以将选择符用","分隔的方式，合并为一组
margin:0 auto;实现盒子的水平居中
2.包含选择器/后代选择器 子代选择器
语法：选择符1 选择符2{
属性:属性值;
}
说明：含义就是选择符1中包含的所有选择符2；
用法：当我的元素存在父级元素的时候，我要改变直接本身的样式，可以另加选择符，直接用包含选择器的方式解决。
如：结构<ul class="ezr">
<li></li>
<li></li>
<li></li>
</ul>
.ezr li{
background:red;
}
子代选择器
例如：ul>li{}
6.伪类选择器
语法：
a:link{属性:属性值;}超链接的初始状态；
a:visited{属性:属性值;}超链接被访问后的状态；
a:hover{属性:属性值;}鼠标悬停，即鼠标滑过超链接时的状态；
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态；
link--visited--hover--active。
说明：
a）当这4个超链接伪类选择器联合使用时，应注意他们的顺序，正常的顺序为
link--visited--hover--active。
B）为了简化代码可以把伪类选择符中相同的声明提出来访者a选择符中；
例如：a{color:red;}a:hover{color:green;}表示超链接的初始和访问过后的状态一样，鼠标滑过的状态和点击时一样
7.选择器的权重
当多个选择器，选中的是同一个元素，且都为大门定义了样式，如果属性方式冲突了，会选择权重高的来执行
！important>行内选择器>id选择器>class>包含选择符（为包含选择符的权重之和）>元素选择器
css选择器解析规则1：当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖地权重选择符的样式
css选择器解析规则2：相同权重的选择符样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式
2.层级选择器
子代选择器
ul li{}
ul下面的所有li标签，包括孙级代码的li
ul>li{}
ul下面的亲儿子li
兄弟选择器
.box+li{}
当前元素的后面第一个兄弟
.box~li{}
当前元素后面的所有的亲兄弟
3.属性选择器
1、E[attr]：只使用属性名，但没有确定任何厲性值;
2、 E[attr= "value"]：指定属性名，井指定了该属性的属性值：只能有这一个属性值
3. E[attr~="value"]门：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格陽开，其中词列表中包含了一个value词，而且等号前面的“~”不能不能写空格
扩展知识
4,E[attr^="value"]:指定了属性名，且有属性值，属性值是以value开头的
5,E[attr$="value"]:指定了属性名，且有属性值，属性值是以value结束的
6,E[attr*="value"]:指定了属性名，且有属性值，属性值中包含了value
1. []中写属性名，name，class，id，type，等等
[class]带有class属性名的，但不指定class的值
div[class]表示选中div中带有class的
2.[]中写属性名=""，完全匹配，属性名只等于属性值的
[class="a"]选中带有class且，class只=a的，
3.[属性名~="属性值"]
[class~="bbb"]选中带有class，且包含有属性bbb的元素
模糊匹配
4,E[attr^="value"]
div[class^="o"]div中带有class，且属性值由o开头的
5,E[attr$="value"]
div[class$="o"]div中带有class，且属性值由o结束的
6,E[attr*="value"]
div[class*="o"]div中带有class，且属性值包含了o的
4.伪类选择器
1.结构伪类选择器
X:first-child 匹配子集的第一个元素。IE7就可以支持
第一个元素
X:last-child匹配父元素中最后一个X元素
最后一个元素
X:nth-child(n)用于匹配素引1值为n的子元素。索引值从1开始
第几个元素
单数2n-1 odd
偶数2n even
X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
只有一个子元素
x:root匹配文档的根元素。在HTML (标准通用标记语言下的-
一 个应用）中，根元素永远是HTML
匹配根元素，根元素拥有是html
X:empty匹配没有任何子元素（包括包含文本）的元素x
匹配空元素，文本都没有的空元素
div:first-child 选中第一个div元素
div:last-child 选中最后一个div元素
.box div:last-child{
margin-right: 0px; }
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
div:nth-child(n) 选中第n个div元素
child(2n) 第双数个元素 child(2n-1)单数个div元素
X:only-child
div p:only-child{
background-color: red;
}
<--选中div中只有一个孩子的元素-->
<div>
<p>111</p>
<p>222</p>
</div>
<div>
<p>111</p>
</div>
X:empty
选中div中没有孩子（包含文本）的元素，
div:empty{}
<div>
111
</div>
<div></div>
x:root匹配文档的根元素。在HTML (标准通用标记语言下的-
一 个应用）中，根元素永远是HTML
html====:root
<style>
:root,body{
background:red;
}
</style>
以上选择器仅在子元素类型相同时使用，强行使用可能会引起语法错误
元素类型可以不一样的结构伪类选择器
1.选择元素中 特定元素的的第一个
div p:first-of-type
表示选中div标签中第一个p标签
2.选择元素中 特定元素的最后一个
div p:last-of-type
表示选中div标签中最后一个p标签
3.选择元素中 特定元素的第n个
div p:nth-of-type(n)
表示选择div标签中第n个p标签
2.目标伪类选择器
E：target 选择匹配的所有元素，且匹配元素被相关url指向
div[id]{
display: none;
}
div[id]:target{
display: block;
}
<--结合锚点使用，选中被指定的元素标签-->
<div>
<a href="#aaa">aaa</a>
</div>
<div id="aaa">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum esse officia tempora delectus quod voluptates mollitia, quo id reiciendis inventore neque repellendus facere nihil commodi consequuntur, aliquid cupiditate magni error?</div>
<div>
<a href="#bbb">bbb</a>
</div>
<div id="bbb">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum esse officia tempora delectus quod voluptates mollitia, quo id reiciendis inventore neque repellendus facere nihil commodi consequuntur, aliquid cupiditate magni error?</div>
<div>
<a href="#ccc">ccc</a>
</div>
<div id="ccc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum esse officia tempora delectus quod voluptates mollitia, quo id reiciendis inventore neque repellendus facere nihil commodi consequuntur, aliquid cupiditate magni error?</div>
3.UI元素状态伪类选择器
E:enabled 匹配所有用户界面 (form表单）中处于可用状态的E元素
选中处于可用状态的表单标签
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
选中处于不可用状态的表单标签
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
选中正在被用户选中状态的表单标签
E::selection 匹配E元素中被用户选中或处于高亮状态的部分
选中被用户选中或处于高亮的部分,不用于表单标签
input:enabled{
background-color: red;
}
处于可用状态的标签背景颜色为红色
input:disabled{
background-color: green;}
处于不可用状态的标签颜色为绿色
<input type="text" disabled >
input:focus{
background-color: blueviolet;}
选中正在被用户选中使用的表单标签背景颜色为紫色
选择div中文字后，字体颜色为红色背景颜色为黄色
div::selection{
background-color: yellow;
color: red;
}
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit saepe enim quas quo eos repellendus earum quod accusamus ut molestias cum eius, quaerat cumque sunt aperiam. Deleniti sed cupiditate ipsa.
</div>
4，否定伪类选择器
E:not(s)(IE6-8浏览器不支持.not（）选择器）
匹配所有不匹配简单符s的元素E
意义为除了s选择器选中的e元素全部选中
li:not(:first-child){
background-color: yellow;
}
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
表示除了第一个li元素全部选中
5.动态伪类选择器
E:link
链接伪类选择器
选择匹配E元素，而且匹配元素被定义了超连接并且未被访问过，常用于链接锚点上
E:visited
链接伪类选择器
选择匹配E元素，而且匹配元素被定义了超连接并且已被访问过，常用于链接锚点上
E：active
用户行为选择器
选择匹配的E元素，且匹配元素被激活，常用于锚点和按钮上
意义为用户鼠标点击时的样式
E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。ie6及以下的浏览器仅支持a:hover
意义为用户鼠标正停留在选择元素上时
1798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
