CSS基础选择器

本文根据实验楼文档而记录的学习笔记,以便复习。

基础选择器


一、派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,可以使标记更加简洁。

li strong{ 
     color: red; 
     }
<p><strong>我是黑色,因为我不在列表当中,所以这个规则对我不起作用</strong></p>
<u1>
    <li><strong>我是红色。这是因为 strong 元素位于 li 元素内。</li>
</u1>

二、id选择器
1.id 选择器: id 选择器可以为标有 id 的 HTML 元素指定特定的样式 id 选择器以“#”来定义
2.id 选择器和派生选择器: 目前比较常用的方式是 id 选择器常常用于建立派生选择器

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link  href="MyCss.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <p id="pid">hello css<a href="www.shiyanlou.com">shiyanlou</a></p>
        <div id="divid">this is a div</div>

    </body>
</html>

MyCss.css #divid{}就是一个独立的 id 选择器,而#pid a{}就是我们前文提到的 id 选择器用于建立派生选择器,相当于是一个嵌套。

#pid a{
    color:#00755f;
}
#divid {
    color: red;
    }

三、类选择器
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 属性的所有元素设置样式:

[title]
{
    color:red;
}

2)属性和值选择器
下面的例子为 title=”te” 的所有元素设置样式:

[title=te]
{
    color: red;
}

代码举例:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            [title]{
                color: #00ff14;
            }
            [title=te]{
                color: red;
            }

        </style>    
    </head>
    <body>
       <p title=>属性选择器</p>
        <p title="te">属性和值选择器</p>
    </body>
</html>

运行效果
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值