CSS基础知识——选择器

选择器

元素选择器#

文档元素为最基本的选择器

例子：div{属性:值};

选择器分组

例子：h2,p{属性:值}; 表示符合这两种规则的元素设置相同的属性值

通配选择器

表示所有元素

类选择器

应用样式而不考虑具体涉及的元素 只需要在元素中设置class属性。例如：.header{属性:值}

多类选择器 .header .info{属性:值}

Id选择器

根据元素的ID设置样式属性值 例如：#divId2{属性:值}

属性选择器

根据元素的属性值，来选择元素： 例如： a[href][title]{属性:值}

根据具体的属性值来选择元素，例如：intput[type="text"]{属性:值}

根据部分属性值选择，例如：

“^ ” 表示以什么开头 例如：div[class^="cloud"]{属性:值}

“$” 表示以什么结尾 例如：div[class$="cloud"]{属性:值}

“*” 表示含有什么元素 例如：div[class*="cloud"]{属性:值}

后代选择器

表示后代中含有的元素，例如：div p{属性:值},表示div中所有p元素

选择子元素，例如：div>p 表示div中的直接子元素为p的元素

伪类选择器

连接伪类 :link 表示未访问的地址，:visited 表示已访问地址

动态伪类 :focus 表示当前拥有输入焦点的元素 :hover 表示指针停留在哪个元素上 :active 激活某元素

伪元素选择器

:first-letter 首个字母 :first-line 首行

:before 在元素前 :after 在元素后 例如： div:after{content:"test"}