CSS选择器

最新推荐文章于 2024-10-19 15:55:42 发布

大华1号

最新推荐文章于 2024-10-19 15:55:42 发布

阅读量265

点赞数

分类专栏： web基础文章标签： css

web基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>