css选择器

最新推荐文章于 2025-03-06 12:11:45 发布

最新推荐文章于 2025-03-06 12:11:45 发布 · 94 阅读

文章标签：

#CSS #HTML

css 专栏收录该内容

1 篇文章

订阅专栏

一.基本css选择器：
1.标记选择器
以文档语言对象(Element)类型(标记)作为选择符。
语法：E { sRules }
示例：
<html>
<head>
<style type="text/css">
p { font-size:14px; }
</style>
</head>
<body>
<p>xxx</p>
<h1>xxx</h1>
</body>
</html>
2.类别选择器
对特殊标记进行控制，就需要用到类别选择器。
语法：.class {sRules}
示例：
<html>
<head>
<style type="text/css">
.className {font-size:14px;}
</style>
</head>
<body>
<p class="className">xxx</p>
<h1 class="className">xxx</h1>
</body>
</html>
3.id选择器
以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。
语法：
#ID { sRules }
示例：
<html>
<head>
<style type="text/css">
#note { font-size:14px;}
</style>
</head>
<body>
<p id="note">xxx</p>
</body>
</html>
二.复合选择器：
1.属性选择器
语法：E.class {sRules}
示例：
<html>
<head>
<style type="text/css">
p.className {font-size:14px;}
</style>
</head>
<body>
<p class="className">xxx</p>
<p>xxx</p>
<h1 class="className">xxx</h1>
</body>
</html>
这里的p.className只选择了页面上所有p标记中class属性名字为className的p标记。
2.包含选择器
文档目录树(DOM)中根节点与叶节点的关系。E1为根节点,E2为E1的所有叶节点。
语法：
E1 E2 { sRules }
示例：
table td { font-size:14px; }
div.sub a { font-size:14px; }
3.子选择器
选择所有作为 E1 子对象的 E2 。文档目录树(DOM)中的父子关系。
语法：
E1 > E2 { sRules }
示例：
body > p { font-size:14px; }
/* 所有作为body的子对象的p对象字体尺寸为14px */
4.相邻选择器
选择紧贴在 E1 之后的所有 E2 。 E1 和 E2在文档目录结构树(DOM)中有共同的父对象。
E1 + E2 { sRules }
示例：
div + p { font-size:14px; }
/* 所有紧贴在div对象之后的p对象的字体尺寸为14px */
div.fly + p { font-size:14px; }

5.集体声明
就是将很多选择器使用相同css样式，在css代码中集体声明。可以将选择符以逗号分隔。
语法：
E1 , E2 , E3 {sRules}
示例：
td,div,a {font-size:14px;}
三.css的继承特性：
当使用css对某个元素样式进行设置以后，该样式会对这个元素及这个元素的后代元素产生作用。除非后代元素进行重新设置覆盖该样式。后代元素是通过html文档结构模型dom划分的。
四.css的层叠特性：
解决样式冲突问题。因为css的继承特性，以及多种css选择器类型，因此会出现多个选择器对一个页面元素设置相同的规则（不同规则继承特性，继承多个选择器规则），那么以谁为准呢？各种选择器优先级如下：行内样式>ID样式>类别样式>标记样式