CSS选择器
2018-01-31 22:36
197 查看
一、类选择器
选择class=某值的所有元素<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
/*类选择器：选择class=某值的所有元素*/
.test {
color: red;
}
</style>
</head>
<body>
<p class="test">类选择器</p>
</body>
</html>二、ID选择器
选择id=某值的所有元素<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
/*ID选择器：选择id=某值的所有元素*/
#p1 {
color:green;
}
</style>
</head>
<body>
<p id="p1">id选择器</p>
</body>
</html>三、选择器组
写出一组选择器，逗号隔开<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
/*选择器组：写出一组选择器，逗号隔开*/
.test, #p1 {
color:red;
}
</style>
</head>
<body>
<p class="test">类选择器</p>
<p id="p1">id选择器</p>
</body>
</html>四、派生选择器
4.1:后代选择器
选择某元素的子孙<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style>
#p5 b {
color: red;
}
</style>
</head>
<body>
<p id="p5">
人生一世，草木一<b>秋</b>。
</p>
</body>
</html>4.2:子元素选择器
选择某元素的儿子<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style>
#p5>b {
color: red;
}
</style>
</head>
<body>
<p id="p5">
人生一世，草木一<b>秋</b>。
</p>
</body>
</html>五、伪类选择器
根据元素状态选择元素<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style>
/*未访问的链接*/
a:link {
color: green;
}
/*已访问的链接 */
a:visited {
color: red;
}
/*当有鼠标悬停在链接上 */
a:hover {
color: blue;
}
/*被选择的链接 */
a:active {
color: blueviolet;
}
/*选择有焦点(光标)的框*/
a:focus {
background-color: green;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 