css选择器: ID选择器 #idName{} 选择id为idName的元素 类选择器 .className 选择所有class为className的元素 元素选择器 p 选择所有的p标签 复合选择器: div.b1 选择所有class为b的div元素 复合选择器: p,#idName,.className 选择所有p标签,id为idName的元素,class为className的元素 通用选择器: * 选择所有的元素 后代选择器: .c1 .c2 选择.c1元素内的所有.c2元素 伪类/伪元素: a:link 正常链接的样式 a:visited 访问过的链接的样式 a:hover 鼠标在上面的链接的样式 a:active 鼠标正在点击时链接的样式 其它: 获取焦点: p:focus: 取得焦点的p元素,p省略为所有元素 指定元素前: p:before 在指定元素的前面添加内容,p省略为所有元素 指定元素后: p:after 在指定元素的后面添加内容,p省略为所有元素 选中的元素: p:selection 选中的元素的样式,,p省略为所有元素 其它选择器: 首字母 p:first-letter p标签的首字母 首行 p:first-line p标签的首行 属性选择器: p[属性名] 选择包含属性名的所有p标签,p省略为所有元素 p[属性名="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值完全相同 p[属性名~="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值中的一个 p[属性名|="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,"属性值-"开头或完全包含"属性值" p[属性名^="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值开头 p[属性名$="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值结尾 p[属性名*="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值包含在中间 子元素选择器: 父元素 > 子元素 选择父元素中的子元素 <div> <p>第一个元素</p> <h>第二个元素</h> <span>第三个元素</span> <span>第四个元素</span> </div> :first-child :last-child :nth-child p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素； h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个； span:first-child 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素； :first-child 匹配到的是p元素,因为在这里div的第一个子元素就是p。 :first-of-type :last-of-type :nth-of-type p:first-of-type 匹配到的是p元素,因为p是div的所有为p的子元素中的第一个，事实上这里也只有一个为p的子元素； h1:first-of-type 匹配到的是h1元素，因为h1是div的所有为h1的子元素中的第一个，事实上这里也只有一个为h1的子元素； span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是第一个。 :first-of-type 匹配到的是p元素 兄弟选择器 兄弟元素 + 兄弟元素{} 选择后一个兄弟元素 兄弟元素 ~ 兄弟元素{} 选择后面所有兄弟元素 否定选择器: p:not(.not){} 所有除了.not的p元素 选择器的权重: 内联样式：权重是 1000 id选择器：权重是 100 类、属性、伪类选择器：权重是 10 元素选择器：权重是 1 通配符：权重是 0 样式的优先级: 内联式:直接写在html标签中 嵌入式:写在<head/>标签的<style type="text/css"/> 标签中 外部式:写在外部文件中,通过<link href="style.css" rel="stylesheet" type="text/css" />引用 内联式 > 嵌入式 > 外部式，但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。
转载请注明原文地址: https://www.6miu.com/read-76612.html
