css选择器

最新推荐文章于 2025-05-01 20:06:47 发布

love_wting

最新推荐文章于 2025-05-01 20:06:47 发布

阅读量418

点赞数

分类专栏： Java-思索文章标签： java css 语言

本文链接：https://blog.youkuaiyun.com/love_wting/article/details/41012429

版权

1 篇文章

订阅专栏

css是级联样式表（Cascading Style Sheets ）

css是用来定义HTML、XML、JSP等文件的样式（是标记语言的一种）

对Css来说最为重要，使用最多的就是css选择器

css样式表的四种引用方式：

在style属性中设置css样式，如

<td style = "color:#cccccc">设置该表格单元内文章颜色为灰色

(不推荐使用，没有体会css的优势)

嵌入式就是将css样式集中写在网页的<head></head>标签中，如

<head>

css样式

</style>

</head>

（多网页时，修改样式麻烦）

导入外部样式表，即将独立的.css文件引入到HTML文件中，如：

<head>

@import "css样式文件的路径"; //要注意该css文件的路径

</style>

</head>

(页面的加载顺序：先加载页面，再装载css文件，当HTML文件较大时，页面显示后css文件可能还没装载完，会闪烁一下后再出现页面的样式)

将css文件引入到HTML文件中，使用<link>标签来引用，如

<link rel="stylesheet" type="text/css" href="mystyle.css"> 要注意css文件的路径

选择器种类	子元素选择器	群组选择器	相邻兄弟选择器	伪类选择器
选择器种类	A>B,A元素的子元素的所有B元素	当几个元素样式属性一样时，可同调用一个声明，元素间用逗号分隔	可选择紧接在另一元素后的元素，且二者有相同父元素。	向某些选择器添加特殊的效果
符号	>	,	+	:
例子	p > i {color:red;}	b,p{color:red;}	h4 + p {color：red;}	a:link {color: #FF0000}
例子	<p>aa <i>bb</i> <i>cc</i>dd</p> <p>aa <i>bb</i> ee<i>cc</i>dd</p> <p>a <i>b</i><b>e</b> <i>c</i>d</p> <p>aa <em>bb <i>cc</i></em> dd</p>	<b>aa</b> <p>aa</p> <i>aa</p>	<h4>ccc</h4> <p>aaa</p> <p>ddd</p>	<a href="/a.jsp" target="_blank">aa</a>
结果

选择器种类	元素（标签）	类选择器	ID选择器	属性选择器	后代选择器
符号		.	#	[ ]
例子	html{color:blue;} h2{color:silver;}	.cName{ color:red; }	#demoDiv{ color:#FF0000; }	[title]{ color:red; }	h1 em { Color:red; }
例子	<h3>这是 heading 1</h3> <h2>这是 heading 2</h2> <p>这是一段普过放电。</p>	<h3 class="cName">a</h3> <h2 class="cName">b</h2> <i>kdkdk</i>	<div id="demoDiv"> aa</div>	<h3>可以应用样式：</h3> <h3 title="Hello">Hello</h3> <i title="W3Sl">W3Sl</i>	<h3>哈<em>嘻</em>啦</h3> <p>哈<em>嘻</em>啦</p> <h3>哈<i>嘻</i>啦</h3
结果