CSS选择器
标签选择器:根据标签名找到标签
<head>
<meta charset="UTF-8">
<title>CSS Test</title>
<style>
div {
font-size: 20px;
background-color: rgba(58, 53, 255, 0.16);
border-color: royalblue;
border: double 1px;
width: 46%;
}
p {
font-size: 30px;
background-color: rgba(255, 51, 47, 0.82);
border: solid 3px ;
}
</style>
</head>
<body>
<div>我是一段文字</div><br>
<div>我是一段文字</div><br>
<p>我是一段文字</p>
<p>我是一段文字</p>
</body>
类选择器：
类选择器的格式：.类名
<head>
<meta charset="UTF-8">
<title>CSS Test</title>
<style>
.custom {
background-color: darkmagenta;
border: solid 5px darkslateblue;
}
</style>
</head>
<body>
<div>我是一段文字</div><br>
<div class="custom">我是一段文字</div><br>
<p>我是一段文字</p>
<p class="custom">我是一段文字</p>
</body>
id选择器：
<head>
<meta charset="UTF-8">
<title>CSS Test</title>
<style>
#id1 {
font-size: 20px;
background-color: teal;
border: solid 5px greenyellow;
}
#id2 {
font-size: 15px;
background-color: mediumturquoise;
border: solid 5px royalblue;
}
</style>
</head>
<body>
<div>我是一段文字</div><br>
<div id="id1">我是一段文字</div><br>
<p id="id2">我是一段文字</p>
<p>我是一段文字</p>
</body>
并列选择器：
div, .custom, #id1 {
font-family: 迷你简少儿;
}
复合选择器：
div.custom2 {
margin-left: 20px;
}
后代选择器：
div p {
font-size: 15px;
background-color: mediumturquoise;
border: solid 5px royalblue;
margin-left: 10;
margin-bottom: 10;
margin-right: 10;
margin-top: 10;
}
<div>
<p>这是一段在div中的段落文字</p>
<p>这是一段在div中的段落文字</p>
<div>
<p>这是一段在div中的div中的段落文字</p>
</div>
</div>
直接后代选择器：
div.applelink>a {
font-family: Arial;
}
<div>
<p>这是一段在div中的段落文字</p>
<p>这是一段在div中的段落文字</p>
<a href="https://www.apple.com">Apple</a>
<div class="applelink">
<p>这是一段在div中的div中的段落文字</p>
<a href="https://www.apple.com">Apple</a>
</div>
</div>
相邻兄弟选择器：
div + p {
color: teal;
}
<div>
<div>div中的div</div>
<span>div中的span</span>
</div>
<p>与div相邻的p</p>
<p>与p相邻的p</p>
属性选择器：
div[name] {
color: brown;
}
div[name][age] {
color: brown;
}
div[name = "iori"] {
color: brown;
}
<div name="iori" age="18">11111</div>
<div name="kyo">22222</div>
<div>33333</div>
通配符：
作用于所有元素
* {
font-size: 24px;
}
important：
作用：提高选择器
#Box {
color:red !important;
color:blue;
}
<div id="Box"> 在IE环境下，这行字是蓝色，在firefox下，为红色</div>