详述CSS选择器

最新推荐文章于 2021-08-03 08:04:40 发布

肥胖的企鹅

最新推荐文章于 2021-08-03 08:04:40 发布

阅读量90

点赞数

分类专栏： HTML 文章标签： HTML CSS 选择器

本文链接：https://blog.csdn.net/weixin_43457668/article/details/101310463

版权

HTML 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

什么是选择器

我们在设计网页时常常需要设计某一标签的属性，为了让代码看着整洁有序，就需要将其属性写在<head>标签内的<style>标签中，此时就需要选择器来判断编写的属性代码到底是应用在哪一个标签上。总的来讲：浏览器通过选择器为满足条件的HTML元素添加CSS样式。

选择器有哪些

1、标签选择器

浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式，语法格式如下：

标签选择器名 {
    declaration1;
    declaration2;
    …
}

实例：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	    span{/*这是一个标签选择器*/
		color: blue;
	    }
	</style>
    </head>
    <body>
	<span>这是一个span标签</span>
    </body>
</html>

2、id选择器

浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式，其语法如下：

# id选择器名 {/*注意一定要用#号*/
    declaration1;
    declaration2;
    …
}

实例：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	    #first{/*这是一个id选择器*/
		color: blue;
	    }
	</style>
    </head>
    <body>
	<span id="first">这是一个span标签</span>
    </body>
</html>

3、类选择器

浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式，其语法如下：

. 类选择器名 {/*一定要用.来引用类名*/
    declaration1;
    declaration2;
    …
}

注意：

class标签属性的属性值不能以数字开头
class标签属性的属性值可以有多个，每个值之间用空格间隔

实例：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	    .first{/*这是一个类选择器*/
		color: blue;
	    }
	</style>
    </head>
    <body>
	<span class="first">这是一个span标签</span>
        <p class="first">这是一个p标签</p>
    </body>
</html>

4、分组选择器

如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码，该选择器的选择器名由多个选择器组成，使用逗号分隔，其语法如下：

选择器1,选择器2,选择器3…{
    declaration1;
    declaration2;
    …
}

实例：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	    .first,#second{
		color: blue;
	    }
	</style>
    </head>
    <body>
	<span class="first">这是一个span标签</span>
        <p id="second">这是一个p标签</p>
    </body>
</html>

5、后代选择器

后代选择器（descendant selector）又称为包含选择器，选择器之间用空格隔开，用于为特定的HTML子元素添加CSS样式，语法如下：

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
    declaration1;
    declaration2;
    …
}

实例：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8" />
	<title>后代选择器</title>
	<style type="text/css">
	    /*只为ol标签元素内class="font_color"的子元素添加CSS样式*/
	    ol .font_color {
	        color: red;
	    }
	</style>
    </head>
    <body>
	<ol>
	    <li>第一项</li>
	    <li class="font_color">第二项</li>
	</ol>
	<ul>
	    <li>第一项</li>
	    <li class="font_color">第二项</li>
	</ul>
    </body>
</html>

6、通配符选择器

通配符选择器匹配HTML文档中的任何HTML元素，其语法如下：

*{
    declaration1;
    declaration2;
    …
}

通配符选择器常常被用来消除默认空格和换行：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title>通配符选择器</title>
	<style>
	    /*取消标签默认margin与padding值*/
	    *{
		margin:0px;
		padding:0px;
	    }
	</style>
    </head>
    <body>
	<p style="border:1px solid red;">海上生明月，天涯共此时。</p>
    </body>
</html>