CSS选择器
Posted 栗栗本栗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS选择器相关的知识，希望对你有一定的参考价值。
基本选择器
介绍
通用选择器
可以同时选中页面中的所有元素。
语法:*{}
* {
font-size: 18pt;
font-family: 微软雅黑;
}
元素选择器
根据标签名，选中页面中的指定元素。
语法:标签名{}
span {
color: lightsalmon;
}
ID选择器
根据元素的id属性值选中一个唯一的元素
语法: #id { }
#div1 {
background: palevioletred;
width: 200px;
height: 100px;
}
类选择器
根据元素的class属性值，选中一组元素。
语法: .class { }
.d1 {
background: pink;
width: 200px;
height: 100px;
}
效果
<body>
<p>今天下雨</p>
<span>花园</span>
<br>
<div id="div1">
玫瑰
</div>
<br>
<div class="d1">
樱花
</div>
<br>
<div class="d1">
樱花
</div>
<br>
<div class="d1">
樱花
</div>
</body>
属性选择器
根据元素的属性选择指定元素。
例子:为带有title 属性的所有元素设置样式:
[title] {
color: lightblue;
font-size: 18pt;
}
例子:为title="imcode”的所有元素设置样式:
[title="imcode"] {
font-family: 宋体;
color: dodgerblue;
}
效果
<body>
<p title="imcode">今天下雨</p>
<p>今天不下雨</p>
<div title="hot">天气好热</div>
<div>快下雨</div>
</body>
并集选择器
可以同时选中符合多个选择器的元素。
语法:选择器1,选择器2,选择器N{}
注意：选择器之间用,分隔开
比如 p,.hello, #box会同时选中页面中 p元素，class为hello的元素，id为box的元素。
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style>
p, #hello, .box, [href='https://www.baidu.com'] {
color: green;
}
</style>
</head>
<body>
<p>今天下雨</p>
<p>今天不下雨</p>
<div id="hello">天气好热</div>
<div class="box">快下雨</div>
<br>
<a href="https://www.baidu.com">百度</a>
</body>
</html>
交集选择器
可以选中满足多个条件的元素。
语法:选择器1选择器2选择器N{}
注意：选择器之间没有任何符号
比如div.box1会选中页面中具有box1这个class的div元素。
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
div.box1 {
color: cadetblue;
}
div.box2 {
color: deepskyblue;
}
</style>
</head>
<body>
<div>广州</div>
<div class="box1">广州</div>
<div class="box2">广州</div>
</body>
</html>
后代元素选择器
选中指定元素的指定后代元素
语法:祖先元素 后代元素{}
注意 有空格
div span{
color: brown;
}
div p {
color: red;
}
<div>
<span> DIV中的span </span>
<p> DIV中的p </p>
</div>
子元素选择器
选中指定元素的指定子元素
与后代选择器相比，子元素选择器只能选择直接子元素。
语法:父元素>子元素
div > span {}
div > p{}
以上是关于CSS选择器的主要内容，如果未能解决你的问题，请参考以下文章