test

HTML选择器

HTML选择器

HTML选择器
1、标签选择器
直接将HTML元素中的标签作为选择器，可以是p、h1、d1、strong等HTML标签，在CSS中直接展现。
2、ID选择器
通常在编写页面的时候设定某些标签元素的ID,同一个HTML中ID不允许重复，例如，<div id="wrapper">,后来使用的时候就用#wrapper，这里的”#wrapper“就是ID选择器，在CSS中以”#“开头。
3、类选择器
CSS里面用”.“开头的表示类选择器，如有如下的CSS代码

.error{
color:red;
font-size:14px;
}

在页面HTML的代码中，使用class="类别名"进行调用

<span class="error">错误信息以红色显示</span>

注意：类选择器和ID选择器比较类似，都是通过HTML元素添加属性而生效的，可应用在<body>内的任何元素上，不过和ID选择器不同的是，类选择器是可以重复的。例如可以像下面的代码这样设定：

<div class="error">用户名不存在！</div>
<p class="error">邮箱格式不正确！</p>

也可以针对不同类型的元素对同一个名称的类选择器设定不同的样式规则，即使是相同名称的类选择器，也可以有不同的表现。例如，对于上面的HTML代码，可以修改CSS规则如下：

复制代码
div.error{
color:red;
font-size:14px;
}

p.error{
color:green;
font-size:14px;
}
复制代码

4、后代选择器

复制代码
<h3>外部</h3>
    <div id="sider">
        <h3>内部</h3>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
    </div>
复制代码

在这里，可以定义如下的CSS样式，就可以实现分层调用

h3 {color:green;}
#sider h3 {color:red;}
#sider ul {color:red;}
#sider ul li{color:red;}

5、子元素选择器

CSS样式设定如下：

div > em {color:red;}

HTML代码如下：

<div>
<em>这个em是div中的元素</em>
<p>p中的<em>是p的子元素</p>
</div>

显示效果为第一个<em>标签显示红色，而第二个<em>标签的子元素将不会应用此样式。

6、相邻兄弟选择器
表示样式应用于与该元素相邻的下一个元素

div +p{color:red;}

HTML代码如下：

<p>与div相邻的上一个p</p>
<div>
<p>div中的p</p>
</div>
<p>与div相邻的下一个p</p>
<p>不与div相邻的p</p>

只有与div相邻的下一个p才会应用此样式

 

posted @ 2014-11-01 21:45  Lechance  阅读(8766)  评论(0)  编辑  收藏  举报