您好,欢迎来到[编程问答]网站首页   源码下载   电子书籍   软件下载   专题
当前位置:首页 >> 编程问答 >> Web开发 >> CSS中的多类选择器优先级问题

CSS中的多类选择器优先级问题

来源:网络整理     时间:2016/6/5 16:38:15     关键词:CSS

关于网友提出的“CSS中的多类选择器优先级问题”问题疑问,本网通过在网上对“CSS中的多类选择器优先级问题”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

问题:CSS中的多类选择器优先级问题
描述:

从w3school看完多类选择器的概念,现在有一个疑问,请大神帮我看看。
我为最后一个段落设定了3个class:one two three,现在我在css部分规定了one和two的样式,最后一个段落的文字颜色就变成了蓝色,然后我又尝试了下只规定three的样式,最后一个段落的文字居然也是蓝色,这里面到底有什么规律呢?是否存在一个优先级问题?

代码1:规定one和two的样式





    Document
    


    

根据css规则,我将变成绿色

根据css规则,我将变成黄色

根据css规则,我将变成红色

根据css规则,我将变成蓝色

根据css规则,我将变成蓝色

代码2:规定three的样式





    Document
    


    

根据css规则,我将变成绿色

根据css规则,我将变成黄色

根据css规则,我将变成红色

根据css规则,我将变成蓝色

根据css规则,我将变成蓝色

w3school多类选择器链接:http://www.w3school.com.cn/css/css_selector_class.asp


解决方案1:

这里不存在任何优先级的问题
.one.two 会选择所有同时含有.one类和.two类的元素应用样式
.three 会选择所有含有.three类的元素应用样式

解决方案2:

举个例子来解释一下楼主遇到的问题,如果我给类a设置了css样式为字体颜色是白色,而类b设置了css样式为背景颜色是蓝色。在html中把这两个类赋给一个p标签

hello world


那么结果就是这个段落的字体颜色会变成白色而且背景颜色变为蓝色,就是说同时应用了两个class的样式。
而楼主所写的第二段代码最后一个p标签相当于有三个类就是one two和three,即使one和two类没有任何样式,但是three有样式,那么将会取三个类样式的并集,所以就显示了蓝色背景。假设我现在给four这个类设置css样式为实线边框,并给最后一个p标签添加这个类,那么最后这个p标签就回马上拥有实线边框这个样式了。 解决方案3:

并不存在css的优先级问题,.one.two 表示当同时拥有两个选择器的时候才应用该样式,所以第一段代码字体显示才会是蓝色,然后第二段代码中只有最后一个p标签采用有three选择器,所以只有他应用。如果想了解选择器的优先级问题可以自己google下,很多资料的

解决方案4:

.one.two{ color:blue; },这两个类中间没有空格,表示one和tow在一起的时候起作用…


以上介绍了“CSS中的多类选择器优先级问题”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:http://www.codes51.com/itwd/1539113.html

相关图片

相关文章