作用:通过元素选择器可以选择页面中的所有指定元素
语法:标签名{}
作用:通过元素的class属性值选中一组元素
语法:.class属性值{}
id选择器
作用:通过元素的id属性值选中唯一的一个元素
语法:#id属性值{}
复合选择器(交集选择器)
作用:可以选中同时满足多个选择器的元素
语法:选择器1选择器2选择器N{}
选择器分组(并集选择器)
作用:通过选择器分组可以同时选中多个选择器对应的元素
语法:选择器1,选择器2,选择器N{}
通配选择器
作用:可以用来选中页面中的所有的元素
语法:*{}
元素之间的关系:
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
兄弟元素:拥有相同父元素的元素叫做兄弟元素
作用:选中指定元素的指定后代元素
语法:祖先元素 后代元素{}
有时候,你需要选择本身没有标签,但是 仍然易于识别的网页部位,比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器:伪类和伪元素。
给链接定义样式:
有四个伪类可以让你根据访问者与该链接的交互方式,将链接设置成4中不同的方式。
其他:
否定伪类
否定伪类可以帮助我们选择不是其他东西的某种东西。
语法: :not(选择器){}
比如p:not(.hello)标识选择所有的p元素,但是class为hello的除外。
属性选择器可以挑选带有特殊属性的标签。
语法:
[属性名]
[属性名 = "属性值"]
[属性名 ~= "属性值"]
[属性名 ^= "属性值"]
[属性名 |= "属性值"]
[属性名 $= "属性值"]
[属性名 *= "属性值"]
作用:选中指定父元素的指定子元素
语法:父元素 >子元素
比如body >h1将选择body字标签中的所有h1标签
IE6及以下的浏览器不支持子元素选择器
其他子元素选择器
除了根据祖先父子关系,还可以根据兄弟关系查找元素。
语法:
兄弟元素 + 兄弟元素 :查找后边一个兄弟元素
兄弟元素 ~ 兄弟元素:查找后边所有的兄弟元素
在页面中使用CSS选择器选中元素时,经常都是一个元素同时被多个选择器选中。
比如:
这两个选择器都会选择h1元素,如果两个选择器设置的样式不一样那还好不会产生冲突,但是如果两个选择器设置的是同一个样式,这样h1到底要应用哪个样式呢?CSS中会默认使用权重较大的样式,下面看一下权重又是如何计算的。
不同的选择器有不同的权重值:
1. 标签名选择器 div { color:Red} 即页面中的各个标签名的css样式2.类选择器 .divClass {color:Red} 即定义的每个标签的class 中的css样式
3.ID选择器 #myDiv {color:Red}即页面中的标签的id
4.后代选择器(类选择器的后代选择器) .divClass span { color:Red} 即多个选择器以逗号的格式分隔 命名找到准确的标签
5.群组选择器 div,span,img {color:Red}即具有相同样式的标签分组显示
1.元素选择器:作用:通过元素选择器可以选择页面中的所有指定元素语法: 标签名{}2.id选择器:-通过元素的id属性值选择唯一元素-语法:#id属性值{} 3. 类选择器:- class属性和id属性类似,只不过class属性可以重复-拥有相同class属性值的元素,我们说他们是一组元素-一个元素可以有多个class属性值,多个值之间用空格隔开。 !!!!!-通过元素的class属性值选中一组元素-语法:.class属性值{}4.选择器分组: -通过选择器分组可以同时选中多个选择器对应的元素。 -语法:选择器1,选择器2,选择器N{} -效果:同时选中了选择器1,2,N他们所指向的元素,实现了代码的复用。 5.通配选择器:-他可以用来选中页面中的所有元素。(模糊选择)-语法: *{}6.精准(复合)(交集)选择器: !!!!!!-作用:- 可以选中同时满足多个选择器的元素 (精准选择)-语法:选择器1选择器2选择器N{} 指定同时选择器1,2,N的元素7.后代选择器:-作用:-可以选择某一元素的所有子孙元素。-语法:祖先元素 后代元素{}注:祖先元素与后代元素之间有一个空格。8.子元素选择器:-作用:-选中指定父元素的指定子元素。 注:明确子元素与子孙元素的区别-语法:父元素 >子元素 注:可在一个表达式中连续使用多个 >明确查找关系9.属性选择器:- 作用:可以根据元素中的属性或属性值来选取指定元素- 语法:[属性名] 选取含有指定属性的元素10.兄弟选择器:-选中某一个标签后的紧邻着的兄弟节点,若不紧邻则没用,选择不中。 -标签1 + 标签2{}-选中某一个标签的后面的所有兄弟节点-语法:前一个标签 ~ 后面的所有标签11.否定伪类:-作用:可以从已经选中的元素中剔除某些元素-语法::not(选择器)-例如:p:not(.hello) 选中class属性不为hello的p标签