css选择器
元素选择器:可以根据标签的名字来从页面选取制定的元素
类选择器:可以根据元素的class属性值选择元素
语法:.classname
比如:.hello会选择页面所有class属性为hello的元素
ID选择器:可以根据元素的id属性值选取元素
语法:#id
比如:#box会选中页面中id属性值为box的元素,和class属性不同,id属性是不能重复的
复合选择器(交集选择器):可以使用多个选择器,可以选择同时满足多个选择器的元素
比如:div.box1会选中页面中具有box1这个class的div元素
群组选择器(并集选择器):可以同时使用多个选择器
比如:p,.hello,#box会同时选中页面中p元素,class为hello的元素,id为box的元素
通用选择器:可以选中页面中的所有元素
语法:*{}
后代选择器:可根据标签的关系为处在元素内部的代元素设置样式
语法:祖先元素 后代元素 后代元素{}
比如p strong会选中页面中所有的p元素内的strong元素
伪类和伪元素:选择本身没有标签,但仍然易于识别的网页部位
正常链接::lank 访问过的链接::visited(只能定义字体颜色)
鼠标滑过的链接::hover 正在点击的链接::active
获取焦点::focus 指定元素前::before 指定元素后::after
选中元素:::selection
其他选择器:
首字母::first-letter 首行::first-line
子元素选择器:可以给另一个元素的子元素设置样式
语法:父元素>子元素
比如:boby>h1将选择boby子标签中的所有h1标签
其他子元素选择器:
选择第一个标签::first-child 选择最后一个标签::last-child
选择指定位置子元素:nth-child
选择指定类型的子元素:first-of-type
last-of-type
nth-of-type
兄弟选择器:根据兄弟关系查找元素
语法:
查找后边一个兄弟元素:兄弟元素+兄弟元素{}
查找后便所有的兄弟元素:兄弟元素~兄弟元素{}
否定伪类:选择不是其他东西的某件东西
语法::not(选择器)
比如:p:not(.hello)表示选择所有的p元素但是class为hello的除外
继承:应用在一个标签上的那些css样式会同时被应用到其内嵌标签上
权重:
不同的选择器有不同的权重值:
内联样式:1000
id选择器:100
类,属性,伪类选择器:10
元素选择器:1
通配符:0
计算权重需要将一个样式的全部选择器相加