css基础知识之css选择器

（1）标签选择器： body、div、p、ul等等

（2）通用选择器： *（用来选取所有元素）

（3）id选择器：   #idName

（4）类选择器:   .className

（5）后代选择器/包含选择器:（连接符为空格）
　　div p //指作为div元素后代的所有p元素，允许有隔代关系
（6）子元素选择器（连接符为 >）
　　div > p //仅指作为div元素子元素的p元素，仅有父子关系

（7）群组选择器（连接符为,）

　　div,p  //几个元素样式属性一样时使用
（8）相邻兄弟选择器（连接符为 +）

　　div + p //指都作为div兄弟元素的p元素，两者有共同父元素，但是div不会受样式影响

（9）伪类选择器（向某些选择器添加特殊的效果）

伪元素的语法：

　　selector:default-element{property:value;}

CSS 类也可以与伪元素配合使用：

　　selector.class:default-element{property:value;}

　　:first-line{}　　　　　　　　　  /* 用于向文本首行设置特殊样式，只能用于块级元素 */

　　:first-letter{}　　　　　　　　  /* 用于向文本的首字母设置特殊样式 */

　　:before{}　　　　　　　　　　  /* 用于向元素前插入内容 */

　　:after{}　　　　　　　　　　　 /* 用于向元素后插入内容 */

　　:link{}          　　　　　　　　 /* 向未被访问的链接添加样式 */

　　:visited{}      　　　　　　　　 /* 向已访问的链接添加样式 */

　　:hover{}　　　　　　　　　　   /* 当鼠标悬停在元素上方时，向元素添加样式 */

　　:active{}　　　　　　　　　　   /* 向被激活的元素添加样式 */

　　:focus{}　　　　　　　　　　    /* 向获取焦点后的元素添加样式 */

　　:first-child{}  　　　　　　　    /* p:first-child选取的是p元素父元素的第一个子p元素，而不是此p元素的第一个子元素 */

　　:last-child{}　　　　　　　　　 /* 选取此父元素的最后一个子元素 */

　　:nth-child(n){}　　　　　　　　/* 选取此父元素的第n个子元素，索引从1开始，n为表达式时索引从0开始 */

　　:empty{}　　　　　　　　　　  /* 选取没有任何内容的元素 */

　　:enabled{}　　　　　　　　　　/* 选取处于可用状态的元素，一般用于input、select和textarea */

　　:disabled{}　　　　　　　　　  /* 选取处于禁用状态的元素，一般用于input、select和textarea */

　　:checked{}　　　　　　　　　  /* 选取处于被选中状态的元素，一般用于input和textarea */

（10）属性选择器（对带有指定属性的HTML元素设置样式）

　　[attr]　　　　　　　　　　　　 /* 选取带有指定属性的元素 */

　　[attr = value]　　　　　　　　/* 选取带有指定属性和值的元素 */

　　[attr ~= 'value']　　　　　　  /* 选取属性值中包含指定value的元素,value为单独存在的单词，不能包含在其他单词中 */

　　[attr *= 'value']　　　　　　  /* 选取属性值中包含指定词汇的元素 */

　　[attr |= 'value']　　　　　　　/* 选取带有以指定值开头，或者等于该值的元素 */

　　[attr ^= 'value']　　　　　　 /* 选取属性值以value开头的所有元素 */

　　[attr $= 'value']　　　　　　 /* 选取属性值以value结尾的所有元素 */

　　

转载于:https://www.cnblogs.com/nullman/p/6739651.html