<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="utf-8"/>
<title>CSS学习笔记</title>
<style type="text/css">
p {
color: red;
}
.bgc {
background-color: yellow;
}
</style>
</head>
<body>
<p class="bgc">CSS学习笔记</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<p>测试字段</p>
<span>你好</span>
<strong>好嗨哟</strong>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
p {
color: red;
}
p.one {
color: blue;
}
p#two {
color: yellow;
}
</style>
</head>
<body>
<p>测试</p>
<p class="one">测试</p>
<p id="two">测试</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.one #two p {
color: red;
}
</style>
</head>
<body>
<div class="one">
<div id="two">
<p>测试</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
p > strong {
color: red;
}
</style>
</head>
<body>
<p>
<strong>测试</strong>
<strong>测试</strong>
</p>
<p>
<em>
<strong>测试</strong>
<strong>测试</strong>
</em>
</p>
</body>
</html>
注:从上述两个例子中我们可以看出,子代选择器只选择指定标签的第一代子元素或者理解为它的直接后代(只指定儿子,而不管孙子),后代选择器是作用于所有子后代元素(不只儿子,还可以选择到孙子,重孙子等等)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
p,
#one,
.two {
color: red;
}
</style>
</head>
<body>
<p>我是中国人</p>
<span id="one">我爱中国</span>
<strong class="two">我们是中国人</strong>
</body>
</html>
![](https://img-blog.csdnimg.cn/img_convert/ef30ca1563d6d92d8d7ae5f254e68619.png#clientId=u4dd2cbcd-3e56-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u77aa3a66&margin=[object Object]&originHeight=583&originWidth=691&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u5c4837f2-031a-4d2a-9885-b5d7cac2e41&title=)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
p {
color: blue;
}
p[title='one'] {
color: red;
}
p[title~='two'] {
color: green;
}
p[title|='three'] {
color: pink;
}
</style>
</head>
<body>
<p title="five">我爱学习</p>
<p title="one">我爱运动</p>
<p title="one two">我爱吃饭</p>
<p title="three-four">我爱睡觉</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/*a:link{
color: red;
}*/
/*链接默认状态*/
a {
color: red;
text-decoration: none;
}
/*链接访问之后的状态*/
a:visited {
color: yellow;
}
/*鼠标放到链接上显示的状态*/
a:hover {
color: blue;
text-decoration: line-through;
}
/*链接激活的状态*/
a:active {
color: pink;
}
</style>
</head>
<body>
<a href="">测试</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#syl {
color: yellow;
font-size: 10px;
}
.box {
color: green;
font-size: 60px;
}
div {
color: red !important;
font-size: 60px !important;
}
</style>
</head>
<body>
<div class="box" id="syl" style="font-size:12px; color:yellow;">测试</div>
</body>
</html>
注:这里的先后次序不是说 class 里面类名的先后次序,而是说定义样式的先后顺序。上述例子中先定义的 box2 类样式,再定义的 box 类样式,最后显示的是 box 类中的样式。
注:权重相同时,CSS 遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。所有都相同时,声明靠后的优先级大。
E 和 F 属于同一父元素之内,并且 F 在 E 之后,通用兄弟选择器会选择符合这样排列的所有的 F 元素。
<!DOCTYPE html>
<html>
<head>
<title>shiyanlou</title>
<style type="text/css">
.test ~ p {
background: red;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p class="test">2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>
<p>8 out of div</p>
</body>
</html>