一:选择器
+ ,相邻的使用 例如:h2+h1 解释:给h2相邻的标签设置样式
效果:
,连接的使用,例如:h1p 解释:在一个区域内(盒子),对h1以后的p标签进行样式设置
效果:
. class选择器 解释:标签内有class名 进行样式设置
一:
直接对标签内的class名进行样式设置 会有所有class名的标签都进行设置
带上标签再进行设置 会对有这个class名的而且标签一致的进行样式设置
否则无效
效果:
二:解释: .border.oneBor 对有这两个class名的标签进行样式设置
效果:
三:解释:对p下面span标签class名为alert的进行样式设置
效果:
【】的使用
一:span[class="alert"] 解释:对span标签中只有alert这一个class名的进行样式设置
效果:
二:span[class="alert stop"] 解释:对span标签中有alert stop类名的进行样式设置注意:名字顺序需保持一致
效果:
三:a[title] 解释:对标签中符合有title的进行样式设置 class及其他都可
效果:
四:*=的使用 例如:a[href*="contact"] 解释:对a标签中href中含有contact的样式进行设置
效果:
五:^=的用法 例如:a[href^="https"] 解释:对a标签中href为https开头的进行样式设置扩展:$=为结尾
效果:
六:=的使用方法 例如:ul > li[class="one"] 解释:ul亲生li里面class名为one的进行设置注意~=与=不同 ~=可以允许li里面可以存在一个class名但也允许其他class名的存在 =则不允许(只允许一个class名的存在)
效果:
区分大小写
解释:i 为不区分大小写
效果: