1.重点说一下属性选择器的优先级：
测试1：在以下的冲突中，~="warning"占了更高的优先级。第一行和第三行文本显示为灰色
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
.warning{
color: red;
}
p[class~="warning"]{
color: gray;
}
</style>
</head>
<body>
<p class="warning">Welcome!</p>
<p class="danger">Hello!</p>
<p class="warning danger">Hello!</p>
测试2：在以下冲突中，.warning.danger占了最高的优先级。
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
.warning{
color: red;
}
p[class~="warning"]{
color: gray;
}
.warning.danger{
color: orange;
}
</style>
</head>
<body>
<p class="warning">Welcome!</p>
<p class="danger">Hello!</p>
<p class="warning danger">Hello!</p>
测试3：在以下冲突中，我突然发现了一个结论：在属性选择器上冲突的问题实际上是渲染上的次序问题，按照要求渲染的，在后面满足要求的渲染中会被覆盖。
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
p[class*="ng"]{
color: pink;
}
p[class$="er"]{
color:red;
}
p[class^="war"]{
color:blue;
}
</style>
</head>
<body>
<p class="warning">Welcome!</p>
<p class="danger">Hello!</p>
<p class="warning danger">Hello!</p>
2.伪类和伪元素：
可以为文档中不一定具体存在的结构指定样式。
1）链接伪类： a:link a:visited
2) 动态伪类： :focus a:hover a:active
3)选择第一个子元素：:first-child ---这里指的是第一个子元素，是所选元素的第一个。不是内部后代的第一个。
4）选择第一个字母： first-letter --这里的伪类只能应用于标记或者段落的块状元素，而不能应用与行内元素。
5）在文档中插入内容： :before :after
总结： 主要讲解了几个选择器，后续学习的时候，多参考手册，多实践就可以了。浏览器通常必须慎用选择器，因为如果不能正确的解释选择器，会导致用户代码根本无法使用CSS。另外一方面，WEB梦想家要正确的编写选择器，这很关键，一旦有错误，浏览器就不能按预想的那样应用样式。要想正确的理解选择器和组合选择器，就要深入掌握选择器与文档结构的关系，了解继承和层叠机制，这也是第三章要讲解的内容。
2015年12月5日 写于四川理工学院 第一实验楼 易天曦
时间： 2024-10-12 18:40:14