问题描述
为什么当我有3个单独的段落，每个都有一个匹配的单词作为他们的类属性的一部分，他们都得到样式相同，即使我不是通过部分属性选择...例如，我有4段，3与类1）pad，2）pad bdr，3）pad bdr mgn，然而下面的代码不包含〜或|用于通过部分属性进行选择，但每行代码下面的样式全部3个段落，尽管不包含正确的类名称。
Why when I have 3 separate paragraphs, each with a matching word as PART of their class attribute, do they all get styled the same even if I am not selecting by partial attribute...for example I have 4 paragraphs, 3 with the classes 1)pad, 2)pad bdr, 3)pad bdr mgn, and yet the code below contains no ~ or | for selecting by partial attribute, yet each line of code below styles all 3 paragraphs despite not containing the correct class name?
p.pad {padding: 1em}
p.bdr {border: 0.5em solid red}
p.mgn {margin: 2em}
推荐答案
选择器文档说的是left re：.classes方法：
The selector documentation speaks to the comment left re: .classes method: http://www.w3.org/TR/CSS2/selector.html#pattern-matching
我测试了一组P标签提供的CSS，没有得到奇怪的结果：
I tested the CSS provided on a set of P tags and did not get odd results: 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，将会有所帮助。
If there is relevant HTML surrounding what is already provided it would be helpful.
这篇关于关于选择部分属性CSS3 HTML5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！