CSS选择器

CSS选择器

 

1.元素选择器：

作用：通过元素选择器可以选择页面中的指定元素

语法：标签名{}

例子：p{

color: red;

}

 

2.id选择器

作用：通过元素的id属性值选中唯一的一个元素

语法：#id属性值{}

例子：#p1{

font-size: 20px;

}

 

3.类选择器

作用：通过元素的class属性值选中一组元素

语法：.class属性值{}

例子：.p2{

color: red;

}

 

4.选择器分组（并集选择器）

作用：通过选择器分组可以同时选中多个选择器对应的元素

语法：选择器1，选择器2.选择器N{}

例子：#p1 , .p2 , h1{

background-color: yellow;

}

 

5.通配选择器

作用：他可以选中页面中的所有元素

语法：*{}

例子：*{

color: red;

}

 

6.复合选择器（交集选择器）

作用：可以选择同时满足多个选择器的元素

语法：选择器1选择器2选择器N

例子：span.p3{

background-color: yellow;

}

 

7.元素之间的关系：

父元素：直接包含子元素的元素。

子元素：直接被父元素包含的元素。

祖先元素：直接或间接包含后代元素的元素，父元素也可以是祖先元素。

后代元素：直接或者间接被祖先元素包含的元素，子元素也可以是后代元素。

兄弟元素：拥有相同父元素的元素叫做兄弟元素。

 

8.后代元素选择器

作用：选中指定元素的指定后代元素

语法：祖先元素 后代元素{}

例子：#d1 span{

color: greenyellow;

}

d1 p span{

font-size: 50px;

}

9.子元素选择器

作用：选中制定氟元素的指定子元素

语法：父元素 > 子元素

例子：div > span{

color: greenyellow;

}

 

10.伪类选择器

作用：伪类标识不存在的类，伪类用来标识元素的一种特殊的状态，比如访问过得超链接，普通的超链接，获取焦点的文本框，当我们需要为这些元素特殊的状态设置样式时就可以使用伪类选择器。

语法：

:link 表示普通的连接（没有访问过的连接）

:visited 表示访问过的连接

:hover 鼠标移入状态

:active 超链接被点击的状态

:focus 文本框获取焦点等

::selection 为p标签被选中的内容样式

 

11.伪元素

作用：为p中第一个字符设置特殊的样式

语法：p:first-letter{}

 

作用：为p中第一行字符设置特殊的样式

语法：p:first-line{}

 

作用：before表示元素最前边的部分，after表示元素最后变的部分，content配合before或after使用。

语法：p:before{

content:"我会出现在最前边的位置"

}

p:after{

content:"我会出现在最后边的位置"

}

 

12.属性选择器

作用：title属性可以指定给任何标签，当鼠标移入时，元素的title属性会弹出文字提示

语法：

标签名[属性名]{} 选择有属性名的

标签名[属性名="name"]{} 选择属性等于name

标签名[属性名^="name"]{} 选择属性以name开头的

标签名[属性名$="name"]{} 选择属性以name结尾的

标签名[属性名*="name"]{} 选择属性包含name的

例子：p[title="name"]{

color: greenyellow;

}

 

13.子元素的伪类

作用：选择子元素的伪类

语法：

:first-child 设置父元素第一个子元素

:last-child 设置父元素第一个子元素

:nth-child(n) 设置父元素第n个子元素,参数even表示偶数位置，参数odd表示奇数位置

 

:first-of-type

:last-of-type

:nth-of-type 和以上很相似，只不过child是在所有子元素中排行，type是在当前类型的子元素中的排行

 

14.兄弟元素选择器

作用：可以选中元素后的紧挨着的兄弟元素

语法：前一个 + 后一个

例子：span + p{}

 

作用：可以选中元素后所有的兄弟元素

语法：前一个 ~ 后变所有

例子：span ~ p{}

 

15.否定伪类

作用：可以从已选中的元素中剔除出某些元素

语法：:not(选择器){}

例子：p:not(.hello){} 不要class等于hello的p标签