Css之选择器

2024-11-25 技术教程

一、CSS选择器之标签选择器(元素选择器)

二、CSS选择器之id选择器

三、CSS选择器之类选择器

四、CSS选择器之分组选择器(并集选择器)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>选择器</title><styletype="text/css">/***分组选择器(并集选择器)*作用：通过选择器分组可以同时选中多个选择器对应的元素*语法:选择器1，选择器2，选择器3{}*/p,#four,.three{background-color:aquamarine;}</style></head><body><h2>静夜思</h2><pclass="multihello">床前明月光，</p><pclass="multi">疑是地上霜。</p><pclass="three">举头望明月，</p><pid="four">低头思故乡。</p></body></html>

五、CSS选择器之通配选择器

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>选择器</title><styletype="text/css">/***通配选择器*选中页面中的所有元素*语法：*{}*/*{background-color:red;}</style></head><body><h2>静夜思</h2><pclass="multihello">床前明月光，</p><pclass="multi">疑是地上霜。</p><pclass="three">举头望明月，</p><pid="four">低头思故乡。</p></body></html>

六、CSS选择器之复合选择器（交集选择器）

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>选择器</title><styletype="text/css">/***复合选择器（交集选择器）*作用：可以选中同时满足多个选择器的元素*语法：选择器1选择器2选择器3{}*/p.three{background:yellow;}</style></head><body><h2>静夜思</h2><pclass="multihello">床前明月光，</p><pclass="multi">疑是地上霜。</p><pclass="three">举头望明月，</p><pid="four">低头思故乡。</p></body></html>

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>选择器</title><styletype="text/css">/***标签选择器*作用：通过元素选择器可以选择页面中的所有指定元素*语法：标签名{}*/p{background-color:yellow;}/***id选择器*作用：通过元素的id属性值来选择唯一的元素*语法：#id属性值{}*/#four{background-color:aqua;}/***类选择器*作用:通过元素的class属性值选中一组元素*语法：.class属性值{}*/.multi{background-color:antiquewhite;}.hello{font-weight:bold;}.three{font-family:"楷体";}/***分组选择器(并集选择器)*作用：通过选择器分组可以同时选中多个选择器对应的元素*语法:选择器1，选择器2，选择器3{}*/p,#four,.three{background-color:aquamarine;}/***通配选择器*选中页面中的所有元素*语法：*{}*/*{background-color:red;}/***复合选择器（交集选择器）*作用：可以选中同时满足多个选择器的元素*语法：选择器1选择器2选择器3{}*/p.three{background:yellow;}</style></head><body><h2>静夜思</h2><pclass="multihello">床前明月光，</p><pclass="multi">疑是地上霜。</p><pclass="three">举头望明月，</p><pid="four">低头思故乡。</p></body></html>