CSS选择器2
1.结构选择器
(1)后代选择器:
可以选择一个元素的后代元素。这个后代元素包括儿子、孙子......
写法:E F {}
案例:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.content a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>中央气象台继续发布高温橙色预警 局部超40度</h1>
<div class="content">
<p>预计南、重庆和新疆南疆盆地等地有<a href="http://www.huadianedu.com" class="num">35°C</a></p>
<a href="http://www.huadianedu.com">前往现场</a>
</div>
<a href="http://www.huadianedu.com">查看原文</a>
</body>
(2)子元素选择器:
通过某一个元素选中直接后代元素
写法:E > F {}(“>”英文状态下输入)
案例:
<title></title>
<style type="text/css">
.content > a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>中央气象台继续发布高温橙色预警 局部超40度</h1>
<div class="content">
<p>预计南、<span><a href="">重庆</a></span>和新疆南疆盆地等地有<a href="http://www.huadianedu.com" class="num">35°C</a></p>
<a href="http://www.huadianedu.com">前往现场</a>
<a href="http://www.huadianedu.com">查看原文</a>
</div>
</body>
2.并选择器
将相同的样式放在一起,类名直接用英文逗号分隔
写法:E , F {}(中间用英文的逗号分隔)
案例:
<style type="text/css">
.div1,.div2{
position: relative;
width: 100px;
height: 100px;
}
.div1{
border: solid 1px yellow;
}
.div2{
border: solid 1px red;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
3.通配符选择器
通配符选择器可以选中页面所有的标签。
注意:通配符选择器对页面的所有元素都会设置相应的样式,而实际上有很多元素默认就是不带任何的样式。
写法:*{}
案例:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<h1>中央气象台继续发布高温橙色预警 局部超40度</h1>
<div class="content">
<p>预计南、<span><a href="">重庆</a></span>和新疆南疆盆地等地有<a href="http://www.huadianedu.com" class="num">35°C</a></p>
<a href="http://www.huadianedu.com">前往现场</a>
<a href="http://www.huadianedu.com">查看原文</a>
</div>
</body>
4.兄弟选择器
(1)写法:E + F(选中最近的一个“弟弟”元素,但自己不选中)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.go-to + a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>中央气象台继续发布高温橙色预警 局部超40度</h1>
<div class="content">
<a class="go-to" href="http://www.huadianedu.com">前往现场</a>
<a href="http://www.huadianedu.com">查看原文</a>
<a href="http://www.huadianedu.com">查看原文1</a>
</div>
</body>
(2)写法:E ~ F(选中所有的“弟弟”元素,但自己不选中)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.go-to + a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>中央气象台继续发布高温橙色预警 局部超40度</h1>
<div class="content">
<a class="go-to" href="http://www.huadianedu.com">前往现场</a>
<a href="http://www.huadianedu.com">查看原文</a>
<a href="http://www.huadianedu.com">查看原文1</a>
</div>
</body>
5.伪类、伪元素选择器
伪类选择器:
条件一:根据元素不同的状态,自动选择不同的样式。
或条件二:直接添加一个class,对class设置特殊的样式
:first-child
a:hover:鼠标滑过的时候添加样式
a:active:被激活的时候添加样式,点击那一刻(按住鼠标左键不放)
a:link:链接地址未被访问时候添加的状态。必须设置href属性
a:visited:链接地址点击之后添加的样式,必须设置href属性
input:focus:拥有键盘输入获取焦点时候添加的样式
伪元素选择器:
(1)需要设置特殊效果的内容放到一个元素(标签)里面span
(2)在添加一个class,对class设置特殊的样式
:first-letter:在元素文本的第一个字(母)添加样式
:first-line:在元素文本的第一行添加样式
:before:在元素内容的最前面添加新内容
:after:在元素内容的最后面添加新内容
li:after{
content: "。";
color: #71b9fe;
}