一、属性选择器1.1 基本语法[属性名] {} /* 选择含有指定属性的元素 */ [属性名属性值] {} /* 选择含有指定属性和属性值的元素 */ [属性名^属性值] {} /* 选择属性值以指定值开头的元素 */ [属性名$属性值] {} /* 选择属性值以指定值结尾的元素 */ [属性名*属性值] {} /* 选择属性值含有某值的元素 */1.2 应用示例[titlea] { background-color: pink; /* title属性值为a的元素 */ } [title^ab] { background-color: green; /* title属性值以ab开头的元素 */ } [title$ab] { color: orange; /* title属性值以ab结尾的元素 */ } [title*ab] { font-size: 40px; /* title属性值包含ab的元素 */ }1.3 title属性说明当鼠标移入设置了title属性的标签时会出现提示信息显示对应的title属性值。二、伪类选择器2.1 顺序类伪类第一类写法:first-child /* 第一个子元素 */ :nth-child(2) /* 第二个子元素 */ :nth-child(n) /* 选中所有子元素 */ :nth-child(2n) /* 偶数位置元素 */ :nth-child(2n1) /* 奇数位置元素 */ :nth-child(anb) /* nth {b, ab, 2ab, ..., anb} */ :last-child /* 最后一个子元素 */2.2 顺序类伪类第二类写法:first-of-type /* 同类别中第一个子元素 */ :nth-of-type(2) /* 同类别中第二个子元素 */ :nth-of-type(n) /* 同类别中所有子元素 */ :last-of-type /* 同类别中最后一个子元素 */2.3 区别说明伪类作用:first-child所有子元素中的第一个:first-of-type同类别中的第一个子元素2.4 特殊伪类:only-child /* 唯一子元素 */ :empty /* 空元素 */ :not(选择器) /* 否定伪类将符合条件的元素从选择器中去除 */2.5 应用示例ul li:not(.l1) { color: red; /* 选择ul下所有li除了class为l1的 */ }三、链接相关伪类3.1 链接状态伪类:link {} /* 未访问过的链接 */ :visited {} /* 已访问过的链接只能修改颜色 */ :hover {} /* 鼠标移入状态 */ :active {} /* 鼠标点击状态 */3.2 注意事项:link和:visited只针对超链接标签:visited由于隐私原因只能修改颜色属性:hover和:active适用于所有标签四、伪元素选择器4.1 基本语法::before {} /* 在元素内容之前插入内容 */ ::after {} /* 在元素内容之后插入内容 */4.2 特殊说明::before和::after必须结合content属性使用这两个伪元素是唯一可以在CSS中更改页面结构的4.3 应用示例.element::after { content: ; display: block; height: 8px; background-color: #eee; }五、样式继承5.1 继承特性为一个元素设置的样式同时也会应用到它的后代元素上。优势方便开发将通用样式统一设置到共同祖先元素上。5.2 可继承属性属性说明font-size字体大小font-family字体族color文字颜色5.3 不可继承属性属性说明border边框padding内边距margin外边距width宽度height高度5.4 注意事项不是所有样式都会被继承样式的继承优先级很低任意选择器都可以覆盖六、选择器优先级权重6.1 权重计算规则选择器类型权重值示例内联样式1000style...ID选择器100#myId类/伪类/属性选择器10.class/:hover/[attr]元素选择器1div/p通配符选择器0*继承的样式无优先级从父元素继承6.2 特殊情况处理规则6.2.1 交集选择器各个选择器的权重需要累加计算。/* 权重元素选择器(1) 类选择器(10) 11 */ p.p1 { background-color: yellow; } /* 权重元素选择器(1) 类选择器(10) 类选择器(10) 21 */ p.p1.p2 { background-color: blue; }6.2.2 并集选择器各个选择器的权重单独计算不累加。/* p 和 .p1 的权重分别计算互不影响 */ p, .p1 { background-color: aqua; }6.2.3 相同权重处理如果选择器的权重计算后相同则以样式表中靠下的样式为准。/* 权重相同都是1后者生效 */ p { background-color: red; } p { background-color: blue; /* 这个样式生效 */ }6.2.4 权重累加上限选择器的权重再累加也不会超过它的上一级选择器权重。/* 11个类选择器10×11110仍然不会超过1个ID选择器100 */ .p1.p2.p3.p4.p5.p6.p7.p8.p9.p10.p11 { background-color: yellow; /* 权重110 */ } #p2 { background-color: pink; /* 权重100但优先级高于上面的110 */ /* 注意实际上110 100是不对的这里只是说明上限概念 */ }补充说明权重累加上限的意思是无论多少个类选择器叠加都不会超过一个ID选择器的优先级。但在实际计算中110确实大于100所以上述例子中类选择器会覆盖ID选择器。这里的“上限”是指不同层级之间的跨越限制而非数值比较。6.3 !important规则background-color: pink !important; /* 最高优先级 */6.3.1 使用场景不易被修改的样式也不想被别的样式覆盖测试样式未生效是否是选择器权重的问题6.3.2 使用建议慎用​!important它会破坏正常的层叠规则仅在确实需要覆盖其他样式时使用优先考虑通过提高选择器特异性来解决问题6.4 实际应用示例!-- HTML结构 -- div p classp1 p2 p3 p4 p5 idp2 stylebackground-color: yellowgreen; 我是div中的p元素 /p /div/* 样式优先级分析 1. 内联样式1000 生效黄色绿色背景 2. !important最高优先级 生效粉色背景覆盖内联样式 3. ID选择器100 被!important覆盖 4. 类选择器10×550 被ID选择器覆盖 5. 元素选择器1 被类选择器覆盖 */6.5 面试题准备常见面试题你常用的选择器有哪些请说说它们的优先级。回答要点按照权重从高到低列举选择器类型说明权重计算规则和特殊情况提及!important的作用和使用注意事项举例说明权重冲突的解决方法七、元素显示类型7.1 元素分类类型特点示例块元素用来框框架div,p,h1~h6行内元素用来包裹内容span,a,strong行内块元素兼具两者特性img,input,button7.2 display属性display: inline; /* 转为行内元素 */ display: block; /* 转为块元素 */ display: inline-block; /* 转为行内块元素 */ display: none; /* 隐藏元素 */7.3 使用建议标签有自己的分类、特点和语义如无必要不要强行转换显示类型八、总结本文详细介绍了CSS选择器的进阶内容属性选择器通过属性精确定位元素伪类选择器处理元素的状态和位置伪元素选择器在CSS中创建页面结构样式继承了解哪些属性可以继承选择器优先级掌握权重计算规则元素显示类型理解块级、行内和行内块元素掌握这些知识后你将能够更加灵活地控制页面样式解决各种样式冲突问题。