css层叠样式表与选择器

CSS级联样式表

css语法

引入css样式

  1. 行内css样式
<font style="color: red">css</font>
  1. 外部css样式
    需要在html文件外写一个style.css文件然后通过< link >标签引入
<link href="style.css" rel="stylesheet" type="text/css">
<!--  href:文件位置     rel:连接类型      type：定义连接样式表语言 -->
  1. 内部css样式：本文的下面的css语法介绍部分的写法，就是内部css样式的写法
    优先级：行内样式 > 内部样式 > 外部样式

其他语法:

  1. 选择器+声明(属性:属性值;)
  2. 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>

层次选择器

在这里插入图片描述

结构伪类选择器

在这里插入图片描述

属性选择器

在这里插入图片描述

css逻辑图

在这里插入图片描述

posted @ 2022-05-21 18:34  Huathy  阅读(29)  评论(0)    收藏  举报  来源