css层叠样式表与选择器

最新推荐文章于 2022-04-20 22:22:41 发布

Huathy-雨落江南，浮生若梦

最新推荐文章于 2022-04-20 22:22:41 发布

阅读量516

点赞数

分类专栏：前端html、css、js 文章标签： css 级联风格表层叠样式表

本文为博主Huathy原创文章，遵循 CC 4.0 BY-NC-SA 版权协议。
未经许可不得转载！否则将依法追究相关责任。

本文链接：https://blog.csdn.net/qq_40366738/article/details/100914053

版权

前端html、css、js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

css语法

引入css样式

行内css样式

<font style="color: red">css</font>

外部css样式
需要在html文件外写一个style.css文件然后通过< link >标签引入

<link href="style.css" rel="stylesheet" type="text/css">
<!--  href:文件位置     rel:连接类型      type：定义连接样式表语言 -->

内部css样式：本文的下面的css语法介绍部分的写法，就是内部css样式的写法
优先级：行内样式 > 内部样式 > 外部样式

其他语法:

选择器+声明(属性:属性值;)
css注释使用 /**/

选择器

选择器	符号
id选择器	#
类选择器	.
标签选择器	标签名

<head>
	<style>
		/*标签选择器*/
		p{
			color : red;
		}
		/* 类选择器 */
		.p{
			color : navy;
		}
		/* id选择器 */
		#pp{
			color : purple;
		}
		/*空格表示后代选择器,指代所有下级内容*/
		div a{
			color : pink;
		}
		/*子代选择器 只会选择它的下一级*/
		div>a{
			color : lime;
		}
		/*伪类选择器*/
		p:hover{
			color : yellow;
		}
	</style>
</head>
<body>
		<p style="color:green">css效果测试</p>
		<p>1</p>
		<p id="pp">2</p>
		<p class="p" >3</p>
		<p>4</p>
		<a href="">连接1</a>
		<a href="">连接2</a>
		<a href="">连接3</a>
		<div>
			<a href="">连接4</a>
			<p>
				<a href="">连接5</a>
				<a href="">连接6</a>
			</p>
		</div>
	</body>

css选择器优先级

选择器优先级:
行内样式 > id选择器 > class选择器 > 后代选择器=子代选择器 >标签选择器

优先级算法:
权值 = 第一等级选择器个数，第二等级选择器个数，第三等级选择器个数，第四等级选择器个数；

选择器	权重值
id选择器	1000
class选择器	100
标签选择器	1

选择器的优先级值是可以累加的
当值相当的情况下，后面的会覆盖前面的，但是不能越级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
    <style>
        .p1{
            color: green;
        }
        #p1{
            color: red;
        }
        <!-- id选择器的优先级更高 -->
    </style>
    <!-- 引入样式:这里后面的会覆盖前面的.(就近原则) -->
    <!-- <link href="css/test1.css" rel="stylesheet"> -->
    <!-- 这里一定注意要加上stylesheet,否则外部样式可能没有作用 -->
</head>
<body>
    <p style="font-size: 100px" id="p1" class="p1">test1</p>
</body>
</html>

外部的css部分:

.p1{
    color: blue;
}

例外的：css属性后面加 !important 时，无条件绝对优先；

p{
	color : red !important;
}

层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        * {
            font-size: 20px;
        }

        p, ul {
            border: 3px solid black;
        }

        body p {
            background: red;
            /*后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入*/
        }

        body > p {
            background: pink;
            /*子代选择器:选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素*/
        }

        .active + p {
            background: green;
            /*相邻兄弟选择器:第二个p标签会变为绿色。注意：这里只有当标签名相同时才起作用*/
            /* 若这么写就没有用，因为div与p标签并不是兄弟
                <p class="active">1</p>
                <div>div标签</div>
                <p>2</p>
            */
        }

        .active ~ p {
            background: yellow;
            /*通用兄弟选择器: .active后的p标签全部变为黄色*/
        }
    </style>
</head>
<body>
<p class="active">1</p><!-- 为了说明相邻兄弟选择器，在此处添加一个类名active -->
<!-- <div>div标签</div> -->
<p>2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<p>7</p>
</body>
</html>