css中选择器小总结（一）

时间：2023-04-05 23:38:29 HTML5

css中选择器小总结一、基础选择器基础选择器是最常用也是最方便的选择器，包括元素选择器（类似于a,div,body,ul），类选择器（我们在HTML标签）、ID选择器（类似于类选择器）、通用选择器（*）、选择器（类似于“p.one#first”）和并行选择器（类似于“p,.one,#first”）1.元素选择器示例：

Hello,css

css:div{border:1pxsolid#ededed;背景颜色：浅蓝色；}只有div标签的内容样式发生变化2.类选择器示例：Hello,css

Hello,css1

css:.one{border:1pxsolid#ededed;背景颜色：浅蓝色；}只有类为“one”的p标签的样式发生变化3.ID选择器示例：Hello,css

Hello,css

css:#first{border:1pxsolid#ededed;背景颜色：浅蓝色；}仅ID“first”的p标签的样式已更改4.通用选择器示例：

Hello,css

css:*{border:1pxsolid#编辑;背景颜色：浅蓝色；}所有标签中的样式都改变了5.选择器示例：你好，css

你好，css

css:p.one#first{border:1pxsolid#ededed;background-color:lightblue;}只有ID为“first”，class为“one”的p标签的样式发生变化6.平行选择器示例：

Hello,css

你好，css

你好，csscss:p,.one,#first{border:1pxsolid#ededed;background-color:lightblue;}p标签，类为“one”的标签和ID为“first”的标签都改变了样式2.层次选择器层次选择器一般用于选择网页中某个标签的子类很多情况下，这时候给每个标签都加上cla??ss或者ID是不现实的，但是不加的话很难选择需要样式化的标签，这时候分层选择器就特别适合。1.后代选择器（可以被后代继承使用）示例：

你好，css

one
two
三个

css:.content{border:1pxsolid#ededed;background-color:lightblue;}class为content的div标签中所有子孙的样式都变了2.childrenselector(最直接的孩子，不能被孙子元素继承）例子：

你好，css

one
two
三个

css:.content>li{border:1pxsolid#ededed;background-color:lightblue;}class在content的div标签里面所有的children（只有children，没有grandchildren）都改变了样式3.下一个siblingselector例子：

one
两个
三个

一个
两个
三个

一个

两个

三个

css:ul+ol{border:1pxsolid#ededed;background-color:lightblue;}ul和ol标签内容的样式变化，但是dl的内容没有变4.之后所有的兄弟选择器例子：

one
two
three

一个
两个
三个

一个

两个

三

css:ul~dl{border:1pxsolid#ededed;background-color:lightblue;}从ul到dl所有内容的样式都变了（未完待续，待总结。。。）