CSS-扩展选择器

最新推荐文章于 2022-07-16 08:14:08 发布

Tommy5553

最新推荐文章于 2022-07-16 08:14:08 发布

阅读量171

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/Tommy5553/article/details/80791729

版权

HTML 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

扩展选择器

1、关联选择器

<div><p>aaaaaaa</p></div>

设置div标签里面的p标签的样式，嵌套标签里面的样式

div p
{
background-color:red;

}

<!doctype html>
<html>
 <head>
  <title>Document</title>
  <style type = "text/css">
  	div p
	{
	background-color:red;
	}
  </style>
 </head>
 <body>
	<div><p>中国社会主义牛逼</p></div>
	<p>wwwwwwwwww</p>
 </body>
</html>

2、组合选择器

把div和p标签设置成相同的样式

div,p
{
background-color:red;

}

<!doctype html>
<html>
 <head>
  <title>Document</title>
  <style type = "text/css">
  	div,p
	{
		background-color:red;
	}
  </style>
 </head>
 <body>
	<div>11111111</div>
	<p>222222222</p>
 </body>
</html>

3、伪元素选择器

css里面提供了一些定义好的样式，可以直接使用

比如使用超链接

超链接的状态：

原始状态，鼠标放上去的状态，点击时的状态，点击后的状态

:link :hover :active :visited

<!doctype html>
<html>
 <head>
  <title>Document</title>
  <style type = "text/css">
  /* 原始状态 */
  	a:link
	{
		background-color:red;
	}
	/* 悬停状态*/
	a:hover
	{
		background-color:green;
	}
	/*点击时状态*/
	a:active
	{
		background-color:blue;
	}
	/*点击后的状态*/
	a:visited
	{
		background-color:gray;
	}
  </style>
 </head>
 <body>
  <a href = "http://www.baidu.com.cn" target = "_blank">超链接测试111</a>
  
 </body>
</html>

Tommy5553

关注

0
点赞
踩
0

收藏

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

扩展选择器 1、关联选择器 &lt;div&gt;&lt;p&gt;aaaaaaa&lt;/p&gt;&lt;/div&gt; 设置div标签里面的p标签的样式，嵌套标签里面的样式 div p{background-color:red;}&lt;!doctype html&gt;&lt;html&gt; &lt;h...
复制链接

扫一扫