为什么当我有3个单独的段落,每个段落都有一个匹配的单词作为其class属性的PART时,即使我没有通过部分属性选择,它们的样式也都相同...例如我有4个段落,3与类1)pad,2)pad bdr,3)pad bdr mgn,但下面的代码不包含〜或|通过部分属性进行选择,但是下面的每行代码都设置了所有3个段落,尽管它们没有包含正确的类名吗?
p.pad {padding: 1em}
p.bdr {border: 0.5em solid red}
p.mgn {margin: 2em}
答案 0 :(得分:1)
选择器文档说明了左边的注释:.classes方法:http://www.w3.org/TR/CSS2/selector.html#pattern-matching
我测试了一组P标签上提供的CSS并没有得到奇怪的结果:http://jsfiddle.net/Roralee/Taejc/1/
.pad {padding: 1em}
.bdr {border: 0.5em solid red}
.mgn {margin: 2em}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat euismod aliquet. Phasellus porttitor gravida viverra. Sed at mauris faucibus, lobortis leo et, rhoncus velit. Duis varius turpis sed sollicitudin eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec mollis sapien a luctus convallis. Integer tincidunt posuere neque, congue congue lacus accumsan sed. Maecenas tempus massa eget vestibulum lacinia.</p>
<p class="pad">Aliquam erat volutpat. Nullam accumsan ipsum ut dui vulputate, eget congue elit mattis. Sed quis elit odio. Quisque blandit accumsan iaculis. Fusce et est id quam ultrices hendrerit. Etiam placerat posuere sem. Phasellus blandit, orci eget adipiscing commodo, erat quam vulputate metus, tristique auctor lectus nunc id nunc.</p>
<p class="pad bdr">Sed id semper nunc. Sed hendrerit augue magna, at aliquam nunc mollis id. Vivamus vitae neque id mi luctus ultricies. Donec id turpis lacus. Curabitur eu tincidunt est. Sed auctor suscipit accumsan. Donec lorem felis, porta at odio malesuada, rutrum congue erat. Morbi dui odio, aliquet eget vehicula at, porta blandit nulla.</p>
<p class="pad bdr mgn">Fusce facilisis urna sit amet malesuada adipiscing. Quisque pulvinar erat nec velit pulvinar varius. Nullam porta turpis ut tellus dignissim, sed pretium enim sollicitudin. Donec tincidunt, erat in volutpat vehicula, arcu nulla pellentesque felis, vitae ultrices mi erat et augue. Sed condimentum tempus tellus, at porta lorem pellentesque gravida. Nullam consectetur augue odio, blandit pellentesque elit varius eget.</p>
如果有相关的HTML围绕已经提供的内容,那将会有所帮助。