一、基本用法

标签选择器也叫元素选择器、类型选择器,是css样式中的一个基础选择器,用于给指定标签设置相应的样式。

其语法规则为:

标签 {
    属性: 值;
}

例如给页面中所有p标签的文字颜色设置为红色:

p { color: red; }

二、示例代码

节选白居易《忆江南》:

<head>
    <style type="text/css">
        h1 { text-aligin: center; } /*所有h1标题居中*/
        h2 { text-aligin: center; } /*所有h2标题居中*/
        p {
            text-indent: 2em;
            margin-left: 20px;
            margin-right: 20px;
            color: rgba(100, 100, 100, 100);
        }
    </style>
</head>
<body>
    <h1>忆江南</h1>
    <h2>唐·白居易</h2>
    <p> 江南好,风景旧曾谙。(2)日出江花红胜火,春来江水绿如蓝,(3)能不忆江南。 </p>
    <h2>作者介绍</h2>
    <p> 白居易。。。 </p>
    <h2>全文赏析</h2>
    <p> 《忆江南三首》是唐代诗人白居易的组词作品。第一首词总写对江南的回忆,选择了江花和春水,衬以日出和春天的背景,显得十分鲜艳奇丽,生动地描 绘出江南春意盎然的大好景象;第二首词描绘杭州之美,通过山寺寻桂和钱塘观潮的画面来验证“江南好”,表达了作者对杭州的忆念之情;第三首词描绘</p>
    <p>苏州之美,诗人以美妙的诗笔,简洁地勾勒出苏州的旖旎风情,表达了作者对苏州的忆念与向往。这三首词各自独立而又互为补充,分别描绘江南的景色 美、风物美以及女性之美,艺术概括力强,意境奇妙。</p>
</body>

页面为:

三、选择器分组

对于多个具有同一属性的标签(例如上例中的h1h2标签),可以统一分组写到一个选择器中。语法格式为:

标签1, 标签2 {
    值: 属性;
}

两个标签之间用一个逗号隔开,逗号紧跟上一个标签之后,后面可以跟一个空格。

所以上例的样式也可以写成:

h1, h2 { text-aligin: center; }
p {
    text-indent: 2em;
    margin-left: 20px;
    margin-right: 20px;
    color: rgba(100, 100, 100, 100);
}

四、属性继承

根据CSS规则,子元素总是继承父元素。例如以下规则:

body {
     font-family: Verdana, sans-serif;
}

给body设置字体类型为Verdana,通过CSS继承,body中的元素(如p,ul,li,div等)也都会拥有这一属性——即默认的字体是Verdana。

如果子元素内不想使用继承的属性,那么需要对它单独设定规则:

body {
    font-family: Verdana, sans-serif;
}
p {
    /* 在p标签中单独设置字体 */
    font-family: 微软雅黑;
}

在早期的版本,某些浏览器是不支持继承的。比方说,Netscape 4就不支持继承,它不仅忽略继承,而且也忽略应用于body元素的规则。IE/Windows直到IE6还存在相关的问题,在表格内的字体样式会被忽略。

对于这种情况,我们可以通过被称为"Be Kind to Netscape 4"的冗余法则来处理旧式浏览器无法理解继承的问题。

body {
    font-family: Verdana, sans-serif;
}

p, td, ul, ol, li, dl, dt, dd {
    font-family: Verdana, sans-serif;
}
最后修改:2018 年 12 月 16 日
如果觉得我的文章对你有用,请随意赞赏