首页 > 代码库 > CSS速成教程——2

CSS速成教程——2

2024-09-13 23:29:18   216人阅读

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


联系
我们