基础选择器
选择器 | 作用 | 缺点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如p | 不能差异化选择 | 较多 | p { color:red;} |
类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 不推荐使用 | * {color: red;} |
复杂选择器
选择器 | 作用 | 特征 | 隔开符号及用法 |
---|---|---|---|
后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 符号是空格 .nav a |
子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 符号是> .nav>p |
兄弟选择器 | 选择紧挨着后面的一个兄弟元素 | 选兄弟 | 符号是+ div + p |
群组选择器 | 选择多个标签 | 既是 又是 | 没有符号 div,p |
属性选择器 | 选择属性 | 找到该属性 | [title] |
链接伪类选择器 | 给链接更改状态 | 重点记住 a{} 和 a:hover 实际开发的写法 |
伪类选择器(主要应用于a标签) :hover 当鼠标指向时产生的样式 :link 超链接未访问时的状态 :visited 超链接访问后的状态 :active 激活状态 点击时的状态
注意
定义CSS时候的顺序不同,也会直接导致链接显示的效果不同
写的时候,他们的顺序尽量不要颠倒 按照 link、visited、hover、active 的顺序
爱恨法则:love hate
选择器的命名规范
-
要做到见名知意
-
不能以数字开头(class选择器必须以字母开头)
-
不能用中文字符
选择器优先级
优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
使用选择器相同的情况下:就近原则
使用选择器不同情况下:计算权值
选择器 | 权重值 |
---|---|
通配选择符 | 0,0,0,0 |
标签选择器 、伪元素选择器 | 0,0,0,1 |
类选择器、属性选择器、伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式 | 1,0,0,0 |
!important | ∞无穷大 |
使用的规则也很简单,就是 选择器的权值加到一起,大的优先;如果权值相同,后定义的优先 ,虽然很简单,但如果书写的时候没有注意,很容易就会导致CSS的重复定义,代码冗余
总结:
权值的大小跟选择器的类型和数量有关
样式的优先级跟样式的定义顺序有关