您的位置：首页 > Web前端 > CSS

CSS选择器

2015-09-15 14:24 531 查看

1.标签选择器

（标签）选择器{
样式;
}

2.类选择器

.类选择器名称{css样式代码;}

如：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
.stress{
color:red;
}
</style>
</head>
<body>
<p>哈哈哈<span class="stress">你好，骚年！</span>啊哈哈</p>
</body>
</html>

3.id选择器

#id选择器名称{css样式代码;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
#stress{
color:red;
}
</style>
</head>
<body>
<p>哈哈哈<span id="stress">你好，骚年！</span>啊哈哈</p>
</body>
</html>

4.类和id选择器的区别

相同点：可以应用于任何元素

不同点：

（1）ID选择器只能在文档中使用一次，而类选择器可使用多次

<p>哈哈哈<span id="stress">你好，骚年！</span>啊哈<span id="stress">你好，骚年！</span>哈</p>-------错误

<p>哈哈哈<span class="stress">你好，骚年！</span>啊哈<span class="stress">你好，骚年！</span>哈</p>-------正确

（2）可以使用类选择器词列表方法为一个元素同时设置多个样式，而ID选择器只能设置一个样式

<p>哈哈哈<span id="id1 id2">你好，骚年！</span>啊哈哈</p>---错误

<p>哈哈哈<span class="id1 id2">你好，骚年！</span>啊哈哈</p>---正确

.id1{
color:red;
}
.id2{
font-size:20px;
}

5.子选择器

对直接后代起作用

如：

<style type="text/css">
.first>span{border:1px solid red;}/*为相应的内容加上边框*/
</style>

6.包含选择器

对所有后代元素起作用

7.通用选择器

匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

7.伪类选择符

如：鼠标滑过字体颜色变为红色

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>伪类选择符</title>
<style type="text/css">
a:hover{
color:red;
}
</style>
</head>
<body>
<p>哈哈哈<a href="http://www.baidu.com">你好，骚年！</a>啊哈哈</p>
</body>
</html>

8.分组选择符

h1,span{color:red;}

等同于

h1{color:red;}
span{color:red;}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航