您的位置：首页 > Web前端 > CSS

Html学习笔记-样式的几种选择符

2018-01-24 13:36 316 查看

上下文选择符

CSS规范里又称后代组合选择器(descendant combinatory selector)

格式

标签1 标签2{属性:属性值; }

标签1与标签2之间用空格隔开

标签1是祖先元素，不一定是父元素

标签2是选中的目标

示例



article标签下的p标签被选中

源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
article p{
color: red;
}
</style>
</head>
<body>
<article>
<h1>我是h1标题</h1>
<p>我是p段落</p>
</article>
</body>
</html>


特殊的上下文选择器 子选择器 >

格式

标签1 > 标签2{属性:属性值; }

标签2必须是标签1的子元素，也就是说标签1必须是标签2的父元素

示例


示例" title="">

源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
article > p{
color: red;
}
</style>
</head>
<body>
<article>
<h1>我是h1标题</h1>
<p>我是p段落</p>
</article>
</body>
</html>


特殊的上下文选择器 紧邻同胞选择器 +

格式

标签1 + 标签2{属性:属性值; }

标签2必须紧跟在标签1的后边

示例



源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h1 + p{
color: red;
}
</style>
</head>
<body>
<article>
<h1>我是h1标题</h1>
<p>我是p段落</p>
</article>
</body>
</html>


特殊的上下文选择器 一般同胞选择器 ~

4000

格式

标签1 ~ 标签2{属性:属性值; }

标签2必须不一定紧跟在标签1的后边

示例



源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h1 ~ p{
color: red;
}
</style>
</head>
<body>
<article>
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<p>我是p段落</p>
</article>
</body>
</html>


特殊的上下文选择器 通用选择器 *

格式

*{属性:属性值; }

标签1 *{属性:属性值; }

示例



源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
color: red;
}
article *{
font-size: 20px;
}
</style>
</head>
<body>
<article>
<h1>我是h1标题</h1>
<p>我是p段落</p>
</article>
</body>
</html>


类选择符 .

类属性就是html中的class属性，body中所有标签都可以添加class属性。

格式

.类名{属性:属性值; }

示例



源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.class1{
color: red;
}
</style>
</head>
<body>
<article>
<h1>我是h1标题</h1>
<p class="class1">我是第一个p段落</p>
<p class="class1">我是第二个p段落</p>
</article>
</body>
</html>


ID选择符 #

id具有唯一性

格式

#id名{属性:属性值; }

示例



源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{
color: red;
}
</style>
</head>
<body>
<article>
<h1>我是h1标题</h1>
<p id="p1">我是一个p段落</p>
</article>
</body>
</html>


补充 class

比如我想给所有的男孩子名字设置成红色，女孩子名字设置成蓝色，就可以采用class属性。

示例



源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.girl{
color: blue;
}
.boy{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="boy">小明</li>
<li class="girl">小红</li>
<li class="boy">小李</li>
<li class="girl">小梅</li>
</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html css 选择符
相关文章推荐
新的分享
章节导航