首页 > 代码库 > CSS1，CSS2选择器详解
CSS1，CSS2选择器详解
第一、CSS1选择器：
1、元素选择器（也叫标签选择器，是最基本的选择器）
<style> html{background-color: red;} div{background-color: yellow;} </style>
2、ID选择器（id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 "#" 来定义）
<style> #boxl{color:blue;} </style>
2.1、结合元素的ID选择器：
<style>
/*ID是box的div标签*/ div#box{ width: 100px; height: 100px; background: red; border: 3px solid black; } </style> <body> <div id="box"></div> </body>
注意：在实际开发中，浏览器并不会检测ID的唯一性，可以为相同元素的ID添加同一个样式。如下图:
3、类选择器（类选择器可以为class相同的 HTML 元素们指定特定的样式。类选择器以 "." 来定义）
<style> .head{ width: 100px; height: 100px; background: red; } </style
3.1、结合元素的ID选择器：
<style> /*class是head的div标签*/ div.head{ width: 100px; height: 100px; background: red; } </style> <body> <div class="head"></div> </body>
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
4、包含选择器（E F{}:选择所有被E元素包含的F元素）
<style> /*三种选择器可以打乱顺序任意组合*/ body div{ border: 3px solid #000000; } #outer #inner{ width: 100px; height: 100px; background: yellowgreen; } .body .head{ width: 100px; height: 100px; background: deeppink; } </style> <body class="body" id="outer"> <div id="inner"></div> <div class="head"></div> </body>
代码执行如下图：
5、分组选择器（E,F,G{}:选择所有被E元素和F元素以及G元素）
<style>
/*将要分组的选择器放在规则左边，并用逗号隔开。分组个数需要两个及以上*/
div,p{ border: 3px solid #000000; } #box,#font{ width: 100px; height: 100px; background: #66FFFF; } .div,.p{ width: 100px; height: 100px; } </style> <body> <div id="box" class="div"></div> <p id="font" class="p"></p> </body>
代码运行效果如下图：
第二、CSS2选择器：
1、通配选择器（*{}:匹配所有元素）
<style> *{color: red;} </style>
运行效果如图:
2、通配选择器（*{}:匹配所有元素）
CSS1，CSS2选择器详解
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。