CSS选择器
作用:CSS选择器主要用来对网页中的元素进行设置样式
###CSS选择器的规范写法
标签名{ }
类选择器
作用:根据元素的class值进行选取元素
####语法
.className { }
ID选择器
作用:根据元素的id属性值选取元素
####语法
#id { }
符合选择器(交集选择器)
作用:可以同时使用多个选择器,这样可以选择同时满足多个选择器的元素。
####语法
选择器1选择器2 { }
群组选择器(并集选择器)
作用:可以同时使用多个选择器,多个选择器将被同时应用指定的样式
####语法
选择器1,选择器2,选择器3 { }
通用选择器
作用:可以选中页面中所有的元素
####语法
* { }
后代选择器
作用:后低选择器可以根据标签的关系,为处在元素内部的代元素设置样式
####语法
祖先元素 后代元素 后代元素{ }
选择器小练习
题号 | 代码 | 选择器 |
---|---|---|
1 | plate | 元素选择器 |
2 | bento | 元素选择器 |
3 | #fancyID | id选择器 |
4 | plate apple | 子元素选择器 |
5 | #fancy pickle | 子代选择器 |
6 | .small | 类选择器 |
7 | bento.small,plate.small | 子代选择器、分组选择器、类选择器 |
8 | bento orange | 子代选择器 |
9 | plate,bento,plate | 元素选择器、分组选择器 |
10 | * | 通用选择器 |
11 | plate>* | 子代选择器、通配选择器 |
12 | plate+.small,plate+apple | 兄弟选择器(后边一个元素) |
13 | bento~pickle | 兄弟选择器(后边所有元素) |
14 | plate>apple | 子代选择器 |
15 | plate>orange:first-child | 子元素选择器(为第一个子元素) |
16 | apple,pickle:only-child | 并集选择器(选择父元素只包含一个同类型子元素) |
17 | apple,pickle:last-child | 并集选择器 |
18 | :nth-child(3) | 子元素选择器(为指定位置的子元素) |
19 | :nth-last-child(4) | 子元素选择器(为bento标签第一个子元素) |
20 | apple:first-of-type | 子元素选择器(为apple标签第一个子元素) |
21 | plate:nth-of-type(even) | 子元素选择器 (为plate标签偶数子元素) |
22 | plate:nth-of-type(2n+3) | 子元素选择器(选择第2n+3个plate元素)【公式2n+3中n是计数器(从0开始)3是偏移值】 |
23 | apple:only-of-type | 选择父元素只包含一个同类型子元素,且包含apple元素 |
24 | orange:last-of-type,apple:last-of-type | 子元素选择器(选择最后一个标签) |
25 | bento:empty | 选择bento标签没有子元素的元素 |
26 | apple:not(.big,.small) | 子元素选择器 (否定伪类) |
伪类和伪元素
有时候,你需要选择本身没用标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的链接,CSS为他们提供一些选择器:伪类和伪元素
#给链接定义样式
###正常链接
a:link
访问过的链接
a:visited(只能定义字体颜色)
鼠标滑过的链接
a:hover
正在点击的链接
a:active
其他的选择器方法
获取焦点
:focus
指定元素前
:before
指定元素后
:after
选中的元素
::selecti
段落定义首字母
:first-letter
段落定义首行
:first-line
属性选择器
语法
[属性名]
[属性名="属性值"]
[属性名~="属性值]
[属性名|="属性值]
[属性名^="属性值]
[属性名$="属性值]
[属性名*="属性值]
子元素选择器
作用:子元素选择器可以给另一个元素的子元素设置样式
- 语法
父元素 > 子元素 {}
其他子元素选择器
选择第一个子标签
:first-child
选择最后一个子标签
:last-child
选择指定位置的子元素
:nth-child
选择指定类型的子元素
:first-of-type
:last-of-type
:nth-of-type
兄弟选择器
作用:除了根据祖先父子关系,还可以根据兄弟元素查找元素
- 语法
兄弟元素 + 兄弟元素{}
查找后边一个兄弟元素
兄弟元素 ~ 兄弟元素{}
查找后边所有的兄弟元素
否定伪类
作用:否定伪类可以帮助我们选择不是其他东西的某件东西
- 语法
:not(选择器){}
继承
- 继承就像父亲的财产会继承给儿子一样,在CSS中祖先元素的样式同样也会被子元素继承
- 继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上
比如
为父元素设置了字体颜色,子元素也会应用相同的颜色,当然并不是所有的样式都会被继承
选择器的权重
作用:在页面中使用CSS选择器选中元素时,经常都是一个元素同时被多个选择器选中
###权重的计算
不同的选择器有不同的权重值
选择器 | 权重 |
---|---|
内联样式 | 1000 |
ID选择器 | 100 |
类,属性,伪类选择器 | 10 |
元素选择器 | 1 |
通配符 | 0 |