class的使用方法

483 阅读1分钟

一:选择器

+ ,相邻的使用 例如: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 为不区分大小写

效果:

MDN:developer.mozilla.org/en-US/docs/…