css的选择器的理解，如何使用以及css的规则

最新推荐文章于 2024-10-18 17:10:53 发布

原创最新推荐文章于 2024-10-18 17:10:53 发布 · 306 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析CSS中的各类选择器，包括子元素、后代元素、兄弟元素选择器及属性选择器的用法，同时介绍伪类和伪元素选择器，并概述了CSS规则中的常见关键字、颜色设置、长度单位及文本和字体样式的详细配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

层次选择器
1）子元素选择器
使用“>”隔开

 		</div>
 		<div class="content">
 			<a href=""></a>	
 		.header > a

选中class为header的元素的直接孩子元素a标签

			<div class="header">
				<a href=""></a>
				<ul>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
				</ul>=""></a>
			</div>

2）后代元素选择器
使用“ ”
.header a
选中class为header的元素的后代元素a标签
3）下一个兄弟
使用“+”
例如one+*表示class为one元素的下一个兄弟

	 		ul>li.two + li
			=>
			.two + *

			<ul>
				<li>zero</li>
				<li>one</li>
				<li class="two">two</li>
				<li>three</li>
				<li>four</li>
				<li>five</li>
			</ul>

4）之后所有兄弟
使用“~”
例如one~*表示class为one元素的所有兄弟

			ul>li.two ~ li
			=>
			.two ~ *

属性选择器【过滤器】
在已有选择器的基础上进行筛选
selector[]
input[type] 选择具有type属性的
input[type=text] 选择type的属性值为text的
input[type^=s] 选择type的属性值以s开头的
input[type$=t] 选择type的属性值以t结尾的
input[type*=t] 选择type的属性中包含t的

伪类选择器【过滤器】
表示结构的

 		:first-child
 		:last-child
 		:nth-child()
 			number/2n+1/even、odd

表示同一类型的

			：first-of-type
			：last-of-type
			：nth-of-type()
				number/2n+1/even、odd
			：nth-last-of-type()
				number/2n+1/even、odd

表示状态的

			:link
			:hover    悬浮  
			:active   激活
			:visited   访问过的
			:focus     聚焦（用于表单元素）
			：checked   默认选中 (radio，checkbox)

伪元素选择器【添加元素】
selector::after
将一个伪元素添加到selector选择到的元素里面的最后面

 		ul.nav::after {
 			content:"four";
 			display:block;
 			...
 		}

 		<ul class="nav">
 			<li>one</li>
 			<li>two</li>
 			<li>three</li>
 			::after
 		</ul>
 	selector::befor
 	selector::first-letter  作用在第一个
 	selector::first-line 	作用在第一行	
 	selector::selection    选中时有变化

css -> css语法 -> 选择器 {规则}
-> 选择器 -> 规则

规则取值：
关键字：
位置 left right center top bottom medium
取消 none
…
颜色：
十六进制 #ffffff #ededed,简写为#fff
rgb函数 rgb(0,0,0)
关键字
渐变色 linear-gradient
长度：
绝对单位 px
相对单位
em 当前元素上的字体大小

					font-size:12px 
					1em = 12px
					2em = 24px

rem 当前html元素中设定的字体大小

					html {
						font-size:10px;
					}

					ul {
						font-size:20px;
					}
					li {
						height:2rem; 	//20px
					}
				% 百分比
					border-radius:50%

文本样式 (可以被继承)

	line-height
		text-align
		text-decoration

字体样式 (可以被继承)

		color
		    1）十六进制    如#ffffff
		    2）rgb函数(取值为 0~255)
		     	0为黑色   255为白色
			3）关键字
			    渐变色   linear-gradient
		font-family 	族
			'微软雅黑' ,'Microsoft YaHei','宋体'
			字体栈

			font-family:"微软雅黑","Microsoft YaHei",serif;

		font-size 		大小
			网页默认字体为16px
			12px 10px
		font-weight 	粗细
			bold
			thin
			bolder
			100~900 
		font-style 	是否打开斜体
		    normal  正常
		    italic   斜体
		line-height 
		font:
		速写，简写
		font: font-style font-weight font-size/line-height font-family
		font:normal bold 14px/1.5em "微软雅黑","Microsoft YaHei"