|
|
相关文章推荐
|
傻傻的大蒜 · Asp.Net ...· 1 年前 · |
|
|
风流的冲锋衣 · 最高检：严惩校园贷和套路贷严治金融内幕交易_ ...· 1 年前 · |
|
|
坏坏的甜瓜 · 菜单箭头旋转180度_走到天涯海角的博客-C ...· 1 年前 · |
|
|
刚毅的灭火器 · bool类型转int, ...· 1 年前 · |
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center
{
text-align:
center
;
}
尝试一下 »
你也可以指定特定的 HTML 元素使用 class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
p
.center
{
text-align:
center
;
}
尝试一下 »
多个 class 选择器可以使用空格分开：
.center
{
text-align:
center
;
}
.color
{
color:
#ff0000
;
}
尝试一下 »
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
LPW5806
289***1083@qq.com
Lambert
167***3216@qq.com
除了教程中的id选择器和class选择器，另还有元素选择器、属性选择器、包含选择器、子选择器和CSS3中新增的兄弟选择器，以下带上ID选择器和类选择器一起举例。
1.ID 选择器（ID selector，IS）：使用 # 标识selector，语法格式： #S{...} （S为选择器名）。例：id为name的标签会匹配下面的样式
<style>
#name{
color:red;
</style>
<!--下面文字是红色的-->
<p id="name">red text</p>
2.类选择器（class selector，CS）：使用 . 标识selector，语法格式： .S{...} （S为选择器名）。例：class属性值为value的标签会匹配下面的样式
<style>
.value{
text-align:center;
</style>
<!--下面的文字是居中对齐的-->
<p class="value">center text</p>
3.元素选择器（element selector，ES）：又叫标签选择器，使用标签名作为selector名，语法格式： S{...} （S为选择器名）。例：所有的p标签都会匹配以下的样式
<style> font-style:italic; </style> <!--下面的文字是斜体的--> <p style="font-style:italic">italic text</p>
4.属性选择器（attribute selector，AS）：ES其实是AS的一个特例，在AS基础上还能对selector描述得更具体，语法格式为 E[attr[~=][|=][^=][$=][*=]VALUE]{...} ，是并没有得到所有浏览器支持的选择器，因此不举例
5.包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式： A B{...} （A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式
<style> color:red; div p{ color:yellow; </style> <p>red text</p><!--文字是红色的--> <p>yellow text</p><!--文字是黄色的-->6.子选择器（sub-selector，SS）：类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签，语法格式：A>B{...}（A、B为HTML元素/标签）。例：以下div内的p标签匹配样式，div内的table内的p不匹配
<style> div>p{ color:red; </style> <p>red text</p><!--文字是红色的--> <table> <p>no red text;</p><!--文字是非红色的--> </table>7.兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）
<style> div~p{ color:red; </style> <p>no red text</p><!--文字是非红色的--> <div>no red text</div> <p>red text</p><!--文字是红色的--> </div>
Elvirangel
zha***r601@163.com
seven丶7
528***307@qq.com
语法形式为：
<!--相邻选择器选择每个div紧邻后的一个元素p-->
<style>
div+p{
color: red;
</style>
<p>not red text</p>
<p>not red text</p>
<p>red text</p>
<p>not red text</p>
seven丶7
5年前 (2018-07-31)
seven丶7
528***307@qq.com
tan
241***9764@qq.com
youyv
623***676@qq.com
推荐文章
|
|
坏坏的甜瓜 · 菜单箭头旋转180度_走到天涯海角的博客-CSDN博客 1 年前 |