CSS中选择器是非常重要的,它的作用是选择(找到)页面中对应的标签,方便后续设置(更改)样式。
(以下展示均为内嵌式写法:在head头部加上style标签,css写在style标签中)
一、标签选择器
结构:标签名{css属性名:属性值;}(注意:标点符号都要是英文的)
作用:通过标签名,找到页面中所有这类标签,设置样式。
如下在vscode中的代码:
任何标签都可以用这种方式来选择,但在实际应用中不太方便。
二、类选择器
结构:.类名{css属性名: 属性值;}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式 。
三、id选择器
结构:#id属性值{css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式。
id选择器一般配合JS找标签,一种id属性值在一个页面中只能出现一次。
四、通配符选择器
结构:*{css属性名:属性值;}
作用:找到页面中所有的标签,设置样式。
但这种选择器在开发中使用极少,只会在特殊情况喜爱才会用到。可能会用于去除标签默认的margin和padding。
五、复合选择器(后代选择器、子代选择器)
1、后代选择器:空格
作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素,在选择器1所找到标签的后代中,找到满足选择器2的标签,设置样式。
结构:选择器1 选择器2{css}
2、子代选择器:>
作用:根据HTML标签的嵌套关系,选择父元素子代中满足条件的元素,在选择器1所找到标签的子代中,找到满足选择器2的标签,设置样式。
结构:选择器1>选择器2{css}
六、并集选择器
作用:同时选择多组标签,设置相同的样式
结构:选择器1,选择器2{css}
七、交集选择器(紧挨着)
作用:选中页面中同时满足多个选择器的标签(找到页面中既能被选择器1选中,又能被选择器2选中的标签,设置样式)。
结构:选择器1选择器2{css}
八、hover伪类选择器
作用:选中鼠标悬停在元素上的状态,设置样式。
结构:选择器:hover{css}
注:伪类选择器选中元素的某种状态。
如: