兄弟选择器：选择任意两个元素，用逗号隔开
CSS：
.classname1,classname2{
属性
}
HTML5：
<p class="classname1"></p>
<p class="classname2"></p>
后代选择器：选择子元素中的一个元素，用空格隔开，（如下图能选择classname1同时选择了classname2）[后代选择器用空格表示,子代选择器用>表示]这样选择之后，子代的子代也会被选择
CSS：
a .classname1{
属性
}
HTML5：
<a class="classname">
<p class="classname1">
<p class="classname2"></p>
</p>
<p class="classname1"></p>
<p class="classname1"></p>
<p class="classname1"></p>
</a>
当触碰的一个选择器之后另一个也会发生变化用 ~（如下图）
CSS：
.classname:hover~classname2{
属性
}
HTML5：
<p class="classname"></p>
<p class="classname2"></p>
类选择器：. +选择器的名字设置一个名字
CSS：
.classname{
属性
}
HTML5：
<p class="classname"></p>
标签选择器：又成为元素选择器
CSS
p{ <--这是对标签的直接设置-->
属性
}
HTML5：
<p>~~~~~~~</p>
id选择器的使用如下图
CSS：
#classname{
属性
}
HTML5：
<p id="classname"></p>
通配符选择器：一般不用设置了会对整个body都会改变，主要用于取消外边距和内边距
*{
margin：0px；
padding：0px；
}
》》》后代选择器与子代选择器的区别：
》》使用：
后代选择器：
CSS
a p{
属性
}
HTML5：
<a>
<p class="classname">
<p class="classname1"></p>
</p>
</a>
》》书写形式上的区别：
后代选择器：
祖先元素 后代元素{
}
子代选择器：
父元素>子元素{
}
》》使用上的差别：
》后代选择器可以选择祖先元素的所有后代
》子代选择 器只能选择祖先元素的中的一代即父子关系的元素
》当只有父子这样一辈的关系时写两个形式都可以
》有时即使不是一辈的传承也可以使子代的也可以像后代元素一样设置所有的后代，因为这是设置的某些css样式可被后代所继承如颜色color；
并集选择器与交集选择器：
》》并集选择器：
同时选择多个选择器对应得元素 ，这是设置的只要含有这几个选择器的元素都能被设置
.classname1,.classname2{
}
<p class="classname1"></p>
<h2 class="classname2"></h2>
》》交集选择器：
是即含有这个元素，又含有另一个元素的选择器,是要同时满足这个这个元素同时存在的条件，
h2.classname1{
属性
}
<p class="classname1"></p>
<h2 class="classname2"></h2>
选择满足多个条件的选择器，即当同时满足这几个简单的选择器同时存在才能这个选择器所对应的元素设置属性：
选择器1选择器2选择器3{
}
>>伪类选择器:
是一个：后面再加上其他
>:hover(手指经过)
>:active(链接点击时的状态设置)
>:nth-of-child(n)(指设置了伪类选择器的祖先元素会对子元素进行选择)
一般n是一个数，也可以是代数表达式，当是代数表达式时n从0开始变化
当括号内是even时选择的时偶数
当括号内是odd时是奇数
>:first-child：第一个子元素
>:last-child：最后一个子元素
>:visited(访问过后的链接)
>:link(未被访问的链接)
>>伪元素选择器：
>::before(主要是在选择的元素前面添加内容，其中一定要含有content=“”）
>::after(主要是在选择的元素后面加内容，其中的属性一定要含有content=“”)
>::first-letter(对第一个字进行选择)
>::first-line(对第一行字进行选择)
伪元素可以用来做对话框,解决高度塌陷的问题,做水印
>>属性选择器：
>一般是对一些标签的的属性进行主要是对一些选择器的名称进行一些特意的选择,有的是选择名称前面有什么的,有的是选择名称以什么结尾的,有的是名称包含什么字段的
input[type="value"]{ 属性}div[class="footer"]{
属性 --------------指对footer这个类选择器所在的元素进行属性设置
}
div[class^="foot"]{
属性 -------------指对以foot为开头的类选择器的属性的设置
}
div[class*="foot"]{
属性 -------------指对含有foot的类选择器进行属性的设置
}
div[class$="foot"]{
属性 -------------指对以foot为结尾的类选择器进行属性的设置
}
网友评论