1 元素选择器:比如p{xxxx},选择文档中所有的p元素;
2 类选择器:比如.center_bar{xxxx},选择文档中使用了类center_bar的元素;
3 id选择器:比如.button1{xxxx},选择文档中使用了button1的元素;
4 或选择器:用逗号连接多个选择器;
5 与选择器:多个选择器紧挨在一起;
6 后代选择器:用空格连接多个选择器;
7 子代选择器:用大于号连接多个选择器,它其实是后代选择器的特殊情况;
8 属性选择器:
(1) 比如p[id],选择标签上有属性“id”的p元素;
(2) 比如p[id="button1"],选择标签上有属性“id”并且id的值为“button1”的p元素;
(3) 比如p[id^=”b”],选择标签上有属性“id”并且id的值以“b”开头的p元素;
(4) 比如p[id$=”b”],选择标签上有属性“id”并且id的值以“b”结尾的p元素;
(5) 比如p[id*=”b”],选择标签上有属性“id”并且id的值包含“b”的p元素;
9 p:first-child:既是p元素,也是某元素的第一个孩子;
10 p:last-child:既是p元素,也是某元素的最后一个孩子;
11 p:nth-child(3):既是p元素,也是某元素的第三个孩子;
12 p:nth-child(odd):既是p元素,也是某元素的第奇数个孩子;
13 伪类选择器都是某种状态,比如active、link、hover,使用“:”;
14 伪元素选择器,确实有某些实体的东西,比如第一行文字、第一个文字、被选中的文字,使用“::”
15 只有多个选择器选中了同一个元素的同一个属性,才会出现优先级的问题;
16 如果两个选择器优先级相同,那么写在后面的选择器生效;
17 选择器优先级的排列:
(1) !important
(2) 内联样式
(3) id选择器
(4) 类和伪类选择器
(5) 元素和伪元素选择器
(6) *选择器
(7) 继承样式
css3选择器如下:
一、通配符选择器(*)
通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。
二、元素选择器(E)
元素选择器,是css选择器中最常见而且最基本的选择器。
三、类选择器(.className)
类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名
四、id选择器(#ID)
ID选择器和上面说的类选择器是很相似的,在使用ID选择器之前也需要先在html文档中加注ID名称,这样在样式选择器中才能找到相对应的元素,不同的是ID选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#id),
五、后代选择器(E F)
后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E
F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。
六、子元素选择器(E&gtF)
子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E&gtF所表示的是选择了E元素下的所有子元素F。这和后代选择器(E
F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E &gtF,其中F仅仅是E的子元素而以。
七、相邻兄弟元素选择器(E + F)
相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。
~(波浪号):A ~ B表示选择A标签后的所有B标签,但是A和B标签必须有相同的父元素。
h3~h5选择前面有<h3>元素的每个<h5>元素,即选择h3之后出现的所有h5,两种元素必须拥有相同的 父元素 ,但h5不必紧随h3。
说明:这里的h5,h3也可以换成实际项目中的其他标签的类名、标签名或id等。
~(加号)加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素,且A和B必须拥有相同的父元素,所选到的仅为一个B元素标签。
大于号表示某个元素的下一代元素。A>B指选择A元素里面的B元素,其中B元素是A元素的第一代。
.myDiv>h3选择类名名为myDiv里面的第一代h3。