HTML5 CSS选择器

何为选择器?

选择器{
样式;
}
这个就是选择器,选择器用来指定样式用作的对象,也就是说用于明确样式是用来修改哪里的

  • 标签选择器:作用于html标签,如:
body{font-size:12px;line-height:1.6em;}

这个就是作用于< body>标签

  • 类选择器,如:
<style type="text/css">
.main{/*注意以英文.开始*/
    color:red;
}
</style>

然后使用class=”“为标签设置样式,如:

<p class="main">类选择器</p>
  • ID选择器,与类选择器类似,如:
<style type="text/css">
#main{/*注意这里使用#开始*/
    color:red;
}
</style>

使用:

<p id="main">ID选择器</p>
  • 子选择器,先看代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择器</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/

</style>
</head>
<body>
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li></li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>
</body>
</html>

上面代码中,.foot>li{} 会对class=”foot”的子标签< li>起作用,也就是对水果,蔬菜起作用

  • 包含(后代)选择器,语法格式:
    .foot li{color:red;}
    子选择器使用”>”连接,只作用于下一级
    包含选择器使用空格符连接,作用于所有子标签
    在上面代码中如果使用包含选择器,那么不仅仅是水果,蔬菜,连同他们的子类都将发生变化。

  • 通用选择器,语法:
    *{color:red;}
    通用选择器作用范围最大,会对所有html标签起作用

  • 伪类选择符
    a:hover{color:red;}
    这样的效果是鼠标在移动到< a>标签上,字体颜色会变为红色,伪类选择符还有很多种状态,尤其css3中更多,不过hover是兼容最好的,使用最多的。

  • 分组选择符
    h1,span{color:red;}
    相当于下面两行代码
    h1{color:red;}
    span{color:red;}
    这样写< h1>标签和< span>标签都将发生变化


类和ID选择器的区别

相同点:可以应用于任何元素
不同点:
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的
如下 类选择器可以这么写:

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<span class="stress bigsize">类选择器可以同时设置两种css,而id选择器不可以</span>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值