CSS选择器的深入了解
一、属性选择器
前提:"E"表示各个标签,"att "指各个属性
1、E[att]
举个例子:如下所示,属性选择器h1[class]对前两行起作用,字体为斜体,颜色为红色,对第三行没有作用。
①代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
h1[class]{
color: red;
font-style: italic;
}
</style>
<body>
<h1 class="">西安邮电大学</h1>
<h1 class="">西安邮电大学</h1>
<h2 class="">西安邮电大学</h2>
</body>
</html>
②页面展示:
2、E[att=“val”]
举个例子:如下所示,属性选择器a[class=‘ex1’]只对第二行起作用,而a[class=‘ex3’]只对第三行起作用,二三行都是超链接的默认样式。
①代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<style>
a[class='ex1']{
color: red;
}
a[class='ex3']{
font-size: 25px;
color: aquamarine;
}
</style>
<body>
<ul>
<li ><a href="#" class="ex1">外部链接</a></li>
<li ><a href="#">内部链接</a></li>
<li ><a href="#" class="ex3">外部链接</a></li>
<li ><a href="#">内部链接</a></li>
</ul>
</body>
</html>
②页面展示:
3、E[att~=“val”]
**举个例子:如下所示,属性选择器 li[class~=‘zh’] 是用空格隔开的单词,其中一个单词等于zh,如页面展示中, 对一三行的样式起作用,字体颜色、字体大小、字体类型样式都已改变,而三四行就是默认值,无任何改变。
①代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
li[class~='zh']{
font-size: 30px;
color: aqua;
font-family: '宋体';
}
</style>
<body>
<ul>
<li class="zh xiyou">红楼梦</li>
<li>西游记</li>
<li class="zh why">水浒传</li>
<li>三国演义</li>
</ul>
</body>
</html>
②页面展示:
4、E[att^=“val”]
**举个例子:如下所示,属性选择器 input[name^=‘user’] 是将name属性值是以user开头的字符串的input标签的样式进行修改。
正如页面展示所示,一三行的输入框内容样式改变,颜色为红色,而第二行为默认样式,没有任何样式改变。
①代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 选择具有name属性,并且name属性值是以user开头的input标签 */
input[name^='user']{
color: red;
}
</style>
<body>
密码: <input type="password" name="userpwd">
<br/><br/>
地址: <input type="text" name="address">
<br/><br/>
年龄:<input type="text" name="userage">
</body>
</html>
②页面展示:
5、E[att$=“val”]
**举个例子:如下所示,属性选择器 input[name$=‘age’]是将name属性值是以age结尾的字符串的input标签的样式进行修改。
正如页面展示所示,输入框内容样式改变,颜色为紫色。
①代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 选择具有name属性,并且name属性值是以age结尾的input标签 */
input[name$='age']{
color: blueviolet;
}
</style>
<body>
年龄:<input type="text" name="userage">
</body>
</html>
②页面展示:
6、E[att*=“val”]
*举个例子:如下所示,属性选择器 input[name=‘add’]是将name属性值中包含’add’的input标签的样式进行修改。
正如页面展示所示,输入框内容样式改变,颜色为青色。
①代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 选择具有name属性,并且name属性值中包含'add'的input标签 */
input[name*='add']{
color: chartreuse;
}
</style>
<body>
地址: <input type="text" name="address">
</body>
</html>
②页面展示:
7、E[att|=“val”]
**举个例子:如下所示,属性选择器input[name|=‘user’]是将name属性值中是以user开头,以’-'分隔的字符串的input标签的样式进行修改。
正如页面展示所示,输入框内容样式改变,颜色为橘色。
①代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 选择具有name属性,并且name属性值是以user开头,以'-'分隔的字符串的input标签 */
input[name|='user']{
color: orange;
}
</style>
<body>
爱好:<input type="text" name="user-hobby">
</body>
</html>
②页面展示:
二、关系选择器
穿插个小知识点:html中的父元素、子元素、兄弟元素是什么?
html元素指的是从开始标签到结束标签的所有代码,不同的标签之间有包含关系,也有同级关系,举例如下:
<html>
<body>
<p>我是一段文字</p>
<p>我也是一段文字</p>
</body>
</html>
1、包含选择器(E F)
**举个例子:如下所示,包含选择器 (ol li)是选择所有被ol包含的li元素样式进行修改。
正如页面展示所示,li标签样式被改变,字体颜色为红棕色,字体大小也被改变为20px,默认字体为16px。
①代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 选择所有被ol包含的li元素 */
ol li{
font-size: 20px;
color: brown;
}
</style>
<body>
<ol>
<li>茅台</li>
<li>五粮液</li>
<li>泸州老窖</li>
<li>西凤酒</li>
</ol>
</body>
</html>
②页面展示:
2、子元素选择器(E>F)
**举个例子:如下所示,子元素选择器 (nav>p)是选择nav所包含的所有为p子元素标签进行修改。
正如页面展示所示,p标签样式被改变,字体颜色改为黄绿色。span标签就为默认样式,没有被改变。
①代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 选择nav所包含的所有为p子元素标签 */
nav>p{
color: yellowgreen;
}
</style>
<body>
<nav>
<p>公司管理</p>
<p>采购管理</p>
<p>后勤管理</p>
<p>采购管理</p>
<span>AAAAA</span>
</nav>
</body>
</html>
②页面展示:
3、相邻元素选择器(E+F)
**举个例子:如下所示,相邻元素选择器 (nav+p)是指选择紧贴在nav标签之后的p标签样式进行修改。
正如页面展示所示,紧贴nav标签的p标签样式被改变,字体颜色为红色。相隔的p标签就不行,字体颜色没有被改变。
①代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 选择紧贴在nav标签之后的p标签 */
nav+p{
color: red;
}
</style>
<body>
<nav>
<p>公司管理</p>
<p>采购管理</p>
<p>后勤管理</p>
<p>采购管理</p>
<span>AAAAA</span>
</nav>
<p>西安邮电大学</p>
<p>西安交通大学</p>
</body>
</html>
②页面展示:
4、兄弟选择器(E~F)
**举个例子:如下所示,兄弟选择器 (ol~p)是指选择ol之后的所有兄弟标签样式进行修改。
正如页面展示所示,p样式被改变,字体颜色为深黄色,字体大小也被改变为45px。
①代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 选择ol之后的所有兄弟标签 */
ol~p{
color: gold;
font-size: 45px;
}
</style>
<body>
<ol>
<li>茅台</li>
<li>五粮液</li>
<li>泸州老窖</li>
<li>西凤酒</li>
</ol>
<nav>
<p>公司管理</p>
<p>采购管理</p>
<p>后勤管理</p>
<p>采购管理</p>
<span>AAAAA</span>
</nav>
<p>西安邮电大学</p>
<aside>
<p>西北政法大学</p>
</aside>
<p>西安交通大学</p>
</body>
</html>
②页面展示: