高级选择器
1.层次选择器
(1)后代选择器
div p 代码意为在div中的p生效,背景色变为黄色,而不在div中的p则还是原来的红色效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">
div{
border: 1px solid black;
}
div p
{
background-color:yellow;
}
p{
background-color:red;
}
</style>
</head>
<body>
<div>
<p>1 在 div 中</p>
<p>2 在 div 中</p>
</div>
<p>3 不在 div 中</p>
<p>4 不在 div 中</p>
</body>
</html>
效果图:
(2)子选择器
div>p 只影响一代,div中的p生效,而在div里面h1中的p则没有效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子选择器</title>
<style type="text/css">
div{
border: 1px solid black;
}
div>p
{
background-color:yellow;
}
p{
background-color:red;
}
</style>
</head>
<body>
<div>
<p>1 在 div 中</p>
<p>2 在 div 中</p>
<h1>1.2<p>55555</p></h1>
</div>
<p>3 不在 div 中</p>
<p>4 不在 div 中</p>
</body>
</html>
效果图:
(3)相邻兄弟选择器
定义:选择所有紧接着<div>元素之后的第一个<p>元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div+p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>div上方 第一个段落</p>
<div>
<h2>副标题</h2>
<p>div内 第一个段落</p>
</div>
<p>div外 第一个段落</p>
<p>div外 第二个段落</p>
</body>
</html>
效果图:
(4)通用兄弟选择器
定义:选择所有紧接着<div>元素之后的所有<p>元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>div上方 第一个段落</p>
<div>
<h2>副标题</h2>
<p>div内 第一个段落</p>
</div>
<p>div外 第一个段落</p>
<p>div外 第二个段落</p>
<p>div外 第三个段落</p>
<p>div外 第四个段落</p>
</body>
</html>
效果图:
2.结构伪类选择器
特点1:常用的结构伪类选择器的种类: :first-child :last-child
特点2:匹配某元素的父元素的第一个或是最后一个某元素
特点3:利用特殊字符冒号:模拟类选择器的作用实现第一个或是最后一个元素标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:first-child
{
background-color:red;
}
</style>
</head>
<body>
<p>body里第一个p</p>
<p>body里第二个p</p>
<div>
<p>在div里第一个p</p>
<p>在div里第二个p</p>
</div>
</body>
</html>
效果图:
3.属性选择器
1.E[attr]
定义:选择匹配具有属性attr的E元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a[target]{
background: red;
}
</style>
</head>
<body>
<a href="" target="_blank" class="ab">1</a>
<a href="" class="abcf">2</a>
<a href="" class="acb">3</a>
<a href="" class="bac">4</a>
<a href="" target="_self" class="bca">5</a>
<a href="" class="f">6</a>
</body>
</html>
效果图:
2.E[attr=val](attribute:属性 target:目标 value:值)
定义:选择匹配具有属性attr的E元素,并且属性值为val
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a[target=_blank]{
background:green ;
}
</style>
</head>
<body>
<a href="" target="_blank" class="ab">1</a>
<a href="" class="abcf">2</a>
<a href="" class="acb">3</a>
<a href="" class="bac">4</a>
<a href="" target="_self" class="bca">5</a>
<a href="" class="f">6</a>
</body>
</html>
效果图:
3.E[attr^=val]
定义:选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a[class^="a"]{
background: red;
}
a[class^="b"]{
background: yellow;
}
</style>
</head>
<body>
<a href="" target="_blank" class="ab">1</a>
<a href="" class="abcf">2</a>
<a href="" class="acb">3</a>
<a href="" class="bac">4</a>
<a href="" target="_self" class="bca">5</a>
<a href="" class="f">6</a>
</body>
</html>
效果图:
4.E[attr$=val]
定义:选择匹配元素E,且E元素定义了属性attr,其属性值以val结尾的任意字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a[class$="c"]{
background: pink;
}
</style>
</head>
<body>
<a href="" target="_blank" class="ab">1</a>
<a href="" class="abcf">2</a>
<a href="" class="acb">3</a>
<a href="" class="bac">4</a>
<a href="" target="_self" class="bca">5</a>
<a href="" class="f">6</a>
</body>
</html>
效果图:
5.E[attr*=val]
定义:选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a[class*="f"]{
background: blue;
}
</style>
</head>
<body>
<a href="" target="_blank" class="ab">1</a>
<a href="" class="abcf">2</a>
<a href="" class="acb">3</a>
<a href="" class="bac">4</a>
<a href="" target="_self" class="bca">5</a>
<a href="" class="f">6</a>
</body>
</html>
效果图:
下期预告:下一篇文章将介绍CSS字体样式、文本样式等相关知识
本人才疏学浅,文中如有出现错误请多多谅解