css样式-未完待续

最新推荐文章于 2023-03-06 17:06:23 发布

欧阳-赤子之心

最新推荐文章于 2023-03-06 17:06:23 发布

阅读量269

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/ouyangfang19920313/article/details/78508507

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1子选择器： h1>strong{color:red;}

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

【只有第一行h1中的very very字体会变红，注意第二行中的very是不会的，类似于，直接后代与不是直接后代这样的关系】

2：后代选择器

h1 em {color:red}

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>

【第二行h1中的em包含的元素realy和strong包含的元素very都会有红色字体，注意与之选择器的异同，即无论是多少嵌套，被被包含的后代都会受影响】

3：id选择器

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

4:类选择器
<style type="text/css">
.important {color:red;}
</style>
</head>

<p class="important">This paragraph is very important.</p>

<p>This is a paragraph.</p>

5：元素选择器
<head>
<style type="text/css">
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
</head>

<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落。</p>

【暂时就先记录这几个常用的】

欧阳-赤子之心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式-未完待续

1子选择器： h1>strong{color:red;} This is very very important. This is really very important.【只有第一行h1中的very very字体会变红，注意第二行中的very是不会的，类似于，直接后代与不是直接后代这样的关系】2：后代选择器 h1 em {color:red}
复制链接

扫一扫