css所有类型选择器

css基本选择器：

基本选择器

包含选择器

属性选择器

css3提供的新式选择器

逗号选择器

伪类选择器

伪元素选择器

一、基本选择器：

ID选择器：不可重复

<div id="xxx"></div>

<style>

#xxx{

}

</style>

类选择器：类名可重复

<div class="mag"></div>

<div class="mag"></div>

<style>

.mag{

}

</style>

标签选择器：

相同标签可以设置相同格式：

<style>

img{

}

</style>

通配符选择器：

对所有的标签进行设置：慎用

<style>

*{

border：1px solid red;//对多有边框进行设置

margin:0;

padding:0;

}

</style>

逗号选择器：（复合选择器）多个标签一起进行修饰

<style>

ui,ol,#box{

}

</style>

二、包含选择器

子代选择器：

父标签>子标签    只选择当前子代

后代选择器：

所有属于包含的

使用复合选择器，将选择的范围尽可能的准确化

三、属性选择器

通过属性反向选择标签

选择具有某属性的标签

<div class="box" title="这是个div"></div>

<style>

div[title]  // []中为要设置的属性

div[title="box"]  //仅选中为box的

div[title^="bo"] //以bo开始的

div[title$="ox"] //以什么结尾的

div[title*="box"] //包含box的

{        

}

</style>

四、css3提供的新式选择器

紧跟着的兄弟节点；即下一个节点（平行关系的标签）

div[title]+p

该标签后的所有标签（平行关系的标签）

div[title]~p

五、逗号选择器

多个标签通过逗号隔开 ，共同设置属性

六、伪类选择器

link,visited,hover,active

a{

color:#333

font-size:25px;

text-decoration:none;//删除下划线

}

a:hover{//鼠标放上去的属性

color:#800000;

text-decoration:underline//恢复下划线

}

<a herf='#'>百度</a>

:last-child 子类的第一个元素

:last-child 子类的最后一个元素

:nth-child(n)子类第n个元素

:root{//css的根标签；（body）

}

::selestion{

background-color:#8A2BE2;

color:white

作用为选中标签时标签的背景颜色以及字体颜色

}

七、伪元素选择器：

::before{

content：‘  ’

}在某标签前加入‘   ’

::after{

content：‘  ’

} 在某标签后加入‘   ’

input::placeholder{//修改输入框中的颜色

color:“ hotpink”

}