CSS选择器

最新推荐文章于 2024-08-13 21:57:16 发布

样光伊

最新推荐文章于 2024-08-13 21:57:16 发布

阅读量54

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_46091702/article/details/107333838

版权

选择器：浏览器通过选择器为满足条件的HTML元素添加CSS样式。

选择器分类：

1、标签选择器：浏览器为HTML文档中标签名与标签选择器名相同的标签元素天剑CSS样式。其语法如下：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <span>白日依山尽，黄河入海流。</span>
        <style>
            /*
             *标签选择器
             */
            span{
                color: red;
                font-family: 华文行楷;
            }
        </style>
	</body>
</html>

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

.类选择器名{
    declaration1;
    declaration2;
 ...
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		 <span class="poem">白日依山尽，黄河入海流。</span>
        <style>
            /*
             *类选择器
             */
            .poem{
                color: blue;
                font-family: 华文行楷;
            }
        </style>
	</body>
</html>

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

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

# id选择器名 {
	declaration1;
	declaration2;
 ...
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span id="poem">白日依山尽，黄河入海流。</span>
        <style>
            /*
             *id选择器
             */
            #poem{
                color: yellow;
                font-family: 华文行楷;
            }
        </style>
	</body>
</html>

注意：id标签属性的属性值不能以数字开头。

4、后代选择器：又称为包含选择器，用于为特定的HTML子元素添加CSS样式。语法如下：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span id="poem">白日依山尽，黄河入海流。</span>
        <style>
            /*
             *后代选择器
             */
            html body #poem{
                color: palevioletred;
                font-family: 华文行楷;
            }
        </style>
	</body>
</html>

5、分组选择器：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span id="poem">白日依山尽，黄河入海流。</span>
		<span class="poem">欲穷千里目，更上一层楼。</span>
        <style>
            /*
             *分组选择器
             */
            #poem,.poem{
                color: green;
                font-family: 华文行楷;
                display: block;
            }
        </style>
	</body>
</html>

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

*{
	declaration1;
	declaration2;
    	…
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span>白日依山尽，黄河入海流。</span>
		<span>欲穷千里目，更上一层楼。</span>
        <style>
            /*
             *通配符选择器
             */
            *{ /*取消默认的margin和padding值*/
                margin: 0px;
                padding: 0px;
            }
        </style>
	</body>
</html>

样光伊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

选择器：浏览器通过选择器为满足条件的HTML元素添加CSS样式。选择器分类：1、标签选择器：浏览器为HTML文档中标签名与标签选择器名相同的标签元素天剑CSS样式。其语法如下：标签选择器名{ declaration1; declaration2; ...}<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title&gt
复制链接

扫一扫