我的第一篇博客:css选择器专栏
1.css基本选择器
1.1标签元素选择器
最常见的是标签元素选择器,选择器通常是某个HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:
html{
color:red;
}
1.2类选择器(class选择器)
选择器:.类名 {属性名:属性}
匹配:属于指定类的元素;当跟元素类型一起使用时,匹配属于指定类的特定类型的元素。
.main{
color:red;
}
1.3ID选择器
选择器: #类名{属性:属性名}
匹配:具有指定全局属性id的元素。
#main{
color:red;
}
1.4属性选择器
选择器:[<条件>]或<元素类型>[<条件>]
匹配:具有匹配指定条件的属性元素。
<html>
<head>
<style type="text/css">
a[href][title]
{
color:red;
}
</style>
</head>
<body>
<a title="..." href="#">一个帅气的链接</a>
</body>
</html>
2.符合选择器
2.1并集选择器
选择器:<选择器>,<选择器>,<选择器>
匹配:单个选择器匹配的所有元素的并集
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS并集选择器</title>
<style>
/*选中符合条件的所有标签*/
.search, span, #Important {
color: red;
}
</style>
</head>
<body>
<a class="search" href="#">百度一下</a>
<h1>我是一个h1标签</h1>
<span>我是一个span标签</span>
<div>
<p>我是一个p标签</p>
<span>我是一个span标签</span>
<strong id="Important">我是一个强调标签</strong>
</div>
<p>我是一个p标签</p>
</body>
</html>
2.2交集选择器
选择器:<选择器>,<选择器>
匹配:交集符合选择器是由两个选择器直接构成的,其结果是二者元素范围的交集。
<html>
<head>
<meta charset="utf-8">
<title>交集选择器</title>
<style type="text/css">
p.xxx{
color: red;
}
</style>
</head>
<body>
<p>我是段落</p>
<p class="xxx">我是段落</p>
</body>
</html>
2.3后代选择器
选择器:<选择器> <选择器>
匹配:目标元素为匹配第一个选择器的元素后代,且匹配第二个选择器
<html>
<head>
<title>后代选择器<title>
<style type="text/css">
ul li{
color:red
}
</style>
</head>
<body>
<ul><li>我是一个无序标签</li></ul>
</body>
</html>
复杂的后代选择器:
<html>
<head>
<title>复杂的后代选择器<title>
<style type="text/css">
.my ul{
color:red
}
</style>
</head>
<body>
<div class="my">
<ul><li>我是一个无序标签</li></ul>
</div>
</body>
</html>
2.4子代选择器
选择器:<选择器> > <选择器>
匹配:目标元素为匹配第一个选择器的直接后代
<html>
<head>
<title>子代选择器<title>
<style type="text/css">
div > ul >li{
color:red
}
</style>
</head>
<body>
<div>
<ul><li>我是一个无序标签</li></ul>
</div>
</body>
</html>
2.5相邻兄弟选择器
选择器:<选择器> + <选择器>
匹配:目标元素紧跟匹配第一个选择器的元素,且匹配第二个元素。
<html>
<head>
<title>交集选择器</title>
<style type="text/css">
a + p{
color: red;
}
</style>
</head>
<body>
<p>我是段落</p>
<a>我是一个超链接</a>
<p >我是段落</p>
</body>
</html>
3伪元素选择器
3.1 :hover :active
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style>
/*鼠标悬浮在标签上的状态*/
div:hover, a:hover {
color: green;
}
/*元素在鼠标按下时的状态*/
div:active, a:active {
color: yellow;
}
</style>
</head>
<body>
<div class="block">我是一个div标签</div>
<br>
<a href="#">百度一下</a>
</body>
</html>