CSS选择器和优先级
程序员文章站
2024-01-29 17:59:58
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
CSS优先级
不同级别
1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2.作为style属性写在元素内的样式
3.id选择器
4.类选择器
5.标签选择器
6.通配符选择器
7.浏览器自定义
同一级别
同一级别中后写的会覆盖先写的样式
*/
#myId {
color:green;
}
.my-class {
color:blue;
}
p {
color:red;
}
* {
color:pink;
font-size: 24px;
}
.my-class-a, .my-class-b {
color:orange;
}
.my-class-c .my-class-d {
color: purple;
}
.my-class-e>.my-class-f {
color: gold;
}
.my-class-g+.my-class-h {
color: wheat;
}
.my-class-i~.my-class-j {
color: darkviolet;
}
.my-class-k.my-class-l {
color: saddlebrown;
}
.my-class-m[title] {
color:orangered;
}
.my-class-m[title=value1] {
color:darkgreen;
}
.my-class-m[title~=hello] {
background:green;
}
.my-class-m[title|=value2] {
background:blue;
}
.my-class-m[title^=value3] {
background:red;
}
.my-class-m[title$=value4] {
background:pink;
}
.my-class-m[title*=value5] {
background:orange;
}
.my-class-n:first-child{
background-color:purple;
}
a:link {
color: gold;
}
a:visited {
color: wheat;
}
a:active {
color: darkviolet;
}
a:hover {
color: saddlebrown;
}
.my-class-o:focus{
border: 2px solid orangered;
}
.my-class-p:lang(zh) {
background: darkgreen;
}
.my-class-q button:enabled {
background: green;
}
.my-class-q button:disabled {
background: #ddd;
}
.my-class-r input:checked+span:after {
content: "我被选中了";
}
.my-class-s::selection {
background:green;
color:pink;
}
.my-class-t span:nth-child(2) {
color:blue;
}
.my-class-u span:nth-last-child(3) {
color:blue;
}
.my-class-v p:nth-of-type(2) {
color:blue;
}
.my-class-w p:nth-last-of-type(2) {
color:blue;
}
.my-class-x:last-child{
background-color:purple;
}
.my-class-y p:first-of-type{
background-color:purple;
}
.my-class-z p:last-of-type{
background-color:purple;
}
.my-class-aa span:only-child{
background-color:purple;
}
.my-class-bb span:only-of-type{
background-color:purple;
}
.my-class-cc:empty{
background-color:purple;
}
.my-class-dd span:not(.my-style) {
background-color:purple;
}
.my-class-ee:first-line {
background-color:purple;
}
.my-class-ff:first-letter {
background-color:purple;
}
.my-class-gg:before{
content: 'xutongbao:'
}
.my-class-hh:after{
content: 'xutongbao:'
}
</style>
</head>
<body>
<div style="color:yellow!important">!important</div>
<div style="color:red">style</div>
<div id="myId">#id</div>
<div class="my-class">.class</div>
<p>element</p>
<span>*</span>
<div class="my-class-a">E,F</div>
<div class="my-class-b">E,F</div>
<div class="my-class-c">
<div class="my-class-d">E F</div>
</div>
<div class="my-class-e">
<div class="my-class-f">E>F<span>不匹配</span></div>
</div>
<div class="my-class-g">不匹配</div>
<div class="my-class-h">E+F</div>
<span>不匹配</span>
<div>
<div class="my-class-i">不匹配</div>
<div class="my-class-j">E~F</div>
<div class="my-class-j">E~F</div>
<div class="my-class-j">E~F</div>
</div>
<div class="my-class-k my-class-l">.class1.class2</div>
<div class="my-class-m" title>E[attr]</div>
<div class="my-class-m" title="value1">E[attr=value]</div>
<div class="my-class-m" title="value1 hello my world">E[attr~=value]</div>
<div class="my-class-m" title="value2-hello-my-world">E[attr|=value]</div>
<div class="my-class-m" title="value3a">E[attr^=value]</div>
<div class="my-class-m" title="value3a">E[attr^=value]</div>
<div class="my-class-m" title="avalue4">E[attr$=value]</div>
<div class="my-class-m" title="bvalue4">E[attr$=value]</div>
<div class="my-class-m" title="bvalue5c">E[attr*=value]</div>
<div>
<p class="my-class-n">E:first-child，这个段落是其父元素（div）的首个子元素。</p>
<p class="my-class-n">这个段落不是其父元素的首个子元素。</p>
</div>
<a href="http://www.baidu.com">E:link,E:visited,E:active,E:hover</a>
<input type="input" class="my-class-o" value="E:focus" style="display: block;">
<div lang="zh" class="my-class-p">E:lang(C)</div>
<div class="my-class-q">
<button>E:enabled</button>
<button disabled="true">E:disabled</button>
</div>
<div class="my-class-r">
<ul>
<li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
</ul>
</div>
<p class="my-class-s">你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>
<div class="my-class-t">
<span>E:nth-child(n)</span><span>E:nth-child(n)</span><span>E:nth-child(n)</span>
</div>
<div class="my-class-u">
<span>E:nth-last-child(n)</span><span>E:nth-last-child(n)</span><span>E:nth-last-child(n)</span>
</div>
<div class="my-class-v">
<p>E:nth-of-type(n)</p><p>E:nth-of-type(n)</p>
<span>E:nth-of-type(n)</span><span>E:nth-of-type(n)</span><span>E:nth-of-type(n)</span>
</div>
<div class="my-class-w">
<p>E:nth-last-of-type(n)</p><p>E:nth-last-of-type(n)</p>
<span>E:nth-last-of-type(n)</span><span>E:nth-last-of-type(n)</span><span>E:nth-last-of-type(n)</span>
</div>
<div>
<p>last-child</p><p class="my-class-x">last-child</p>
</div>
<div class="my-class-y">
<span>first-of-type</span>
<p>first-of-type</p><p>first-of-type</p>
</div>
<div class="my-class-z">
<span>last-of-type</span>
<p>last-of-type</p><p>last-of-type</p>
</div>
<div class="my-class-aa">
<span>only-child</span>
</div>
<div class="my-class-bb">
<span>only-of-type</span>
</div>
<div class="my-class-cc" style="width: 100%;height: 20px;"></div>
<div class="my-class-dd"><span>E:not(selector)</span><span class="my-style">E:not(selector)</span><span>E:not(selector)</span></div>
<p class="my-class-ee" style="width: 10px;">E:first-lineE:first-lineE:first-lineE:first-lineE:first-lineE:first-lineE:first-line</p>
<p class="my-class-ff">Eg:first-letterE:first-letterE:first-letter</p>
<div class="my-class-gg">E:before</div>
<div class="my-class-hh">E:after</div>
</body>
</html>