首页 > 代码库 > CSS速成教程——2
CSS速成教程——2
CSS 基础选择器
一、派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,可以使标记更加简洁。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。 比方说,你希望列表中的 strong 元素变为红色,而不是通常的黑色,可以这样定义一个派生选择器:
li strong{ color: red; }
请注意在 HTML 中标记为
- 的代码的上下文关系
<p><strong>我是黑色,因为我不在列表当中,所以这个规则对我不起作用</strong></p>
<u1>
<li><strong>我是红色。这是因为 strong 元素位于 li 元素内。</li>
</u1>
在 css 中定义的 li strong 的样式,只会影响上面 html 文件中的<li><strong>
,而不会影响<p><strong>
中的内容
二、id 选择器
1.id 选择器: id 选择器可以为标有 id 的 HTML 元素指定特定的样式 id 选择器以“#”来定义
2.id 选择器和派生选择器: 目前比较常用的方式是 id 选择器常常用于建立派生选择器
三、类选择器
(1)在 CSS 中,类选择器以一个点号显示:
.divclass { color: red; }
在下面的 html 代码中,div 元素含有 divclass 类,意味着它要遵守.divclass
的规则。
<div class="divclass"> hello div </div>
注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
(2)和 id 一样,class 也可被用作派生选择器:
.pclass a{ color: green; }
四、属性选择器
对带有指定属性的 HTML 元素设置样式。
(1)下面的例子为带有 title 属性的所有元素设置样式:
<style> [title] {color:red;} </style>
(2)属性和值选择器
下面的例子为 title="te" 的所有元素设置样式:
<style> [title=te]{ color: red; } </style>
CSS速成教程——2
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。