CSS学习笔记（二）

最新推荐文章于 2023-06-22 21:35:09 发布

水声千里

最新推荐文章于 2023-06-22 21:35:09 发布

阅读量161

点赞数

分类专栏： CSS学习笔记文章标签： CSS 前端开发

本文链接：https://blog.csdn.net/weixin_41219773/article/details/97171887

版权

CSS学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

选择器（一）

1.标签选择器
p div h1 span em i 这是标签作为选择器，使用时直接写标签名即可以“标签{}形式”。

 p {
 		color: pink;
        }
 div {
        color: purple;
        }
        </style>
    </head>
    <body>
    	<p>白展堂</p>
    	<p>吕秀才</p>
    	<p>李大嘴</p>
    	<div>鸣人</div>
    	<div>佐助</div>
    	<div>卡卡西</div>
    	</body>

2.类选择器
类选择器在标签后跟着class属性并且命名，使用时采用".类名{}"的形式。

 <style>
        .mingren {     /* 声明类样式 */
        	color: orange;
        }
        .zuozhu {
        	color: blue;
        } 
        </style>
    </head>
    <body>
    	<div class="mingren">鸣人</div>   <!-- 引用类样式  class 单词 类 的意思 -->
    	<div class="zuozhu">佐助</div>
    	<div>卡卡西</div>
    </body>

3.多类名选择器
多类名选择器就是可以在class中定义多个类名，在样式中可以分别实现该属性。

<style>
        .font20 {
        	font-size: 20px;
        }
        .font14 {
        	font-size: 14px;
        }
        .pink {
        	color: pink;
        }
        .fontWeight {
        	font-weight: bold;
        }
        </style>
    </head>
    <body>
    	<div class="pink fontWeight font20">亚瑟</div>
    	<div class="font20">刘备</div>
    	<div class="font14 pink">安其拉</div>
    	<div class="font14">貂蝉</div>
    </body>

4.ID选择器
id选择器就是在标签后定义id属性，与类选择器相似，使用时采用“#id名{}”的形式。

        <style>
        .tou {
        	color: red;
        }
        #big {   /* id选择器 和 类选择器 结合记忆更好 */
        	color: pink;
        }
        </style>
    </head>
    <body>
    	<div id="big">熊大</div>
    	<div>熊二</div>
    	<div class="tou">光头强</div>
    </body>

注意：
类选择器是可以重复多次使用的，类似于人名。id 选择器类似身份证号是唯一的，只允许使用一次。
5.通配符选择器
所有标签都为一种样式,使用时以“*{}”的形式。

        <style>
        * {    /* * 代表所有选择器 */
        	color: pink;
        }
        </style>
    </head>
    <body>
    	<p>我是段落</p>
    	<div>我是段落</div>
    	<span>我是段落</span>
    	<em>我是段落</em>
    	<strong>我是段落</strong>
    	<h1>我是段落</h1>
    </body>

6.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。
(1)链接伪类选择器
:link /* 未访问的链接 /
:visited / 已访问的链接 /
:hover / 鼠标移动到链接上 /
:active / 选定的链接 */

<style>
        a:link {    /* 未访问的链接 */
        	font-size: 16px;
        	color: gray;
        	font-weight: 700;
        }

        a:visited {  /* 已访问的链接 我们已经点击过一次的状态*/
        	font-size: 16px;
        	color: orange;
        	font-weight: 700;
        }

        a:hover {  /* 鼠标移动到链接上 */
        	font-size: 16px;
        	color: red;
        	font-weight: 700;
        }

        a:active {  /* 选定的链接 当我们点击别松开鼠标 显示的状态*/
			font-size: 16px;
        	color: green;
        	font-weight: 700;
        }
        </style>

    </head>
    <body>
      伪类选择器其中的 链接伪类选择器  主要针对于 a   
      <div>  
	      <a href="#" >秒杀 </a>   
	      <a href="#" >闪购 </a>   
      </div>
    </body>

链接伪类选择器的简写方式：

   <style>
		a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
		}
		a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
		}
        </style>
    </head>
    <body>
    	<a href="#"> 秒杀 </a>
    </body>

(2)结构伪类选择器
:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式
代码块1：

 <style>
        	li:first-child { /*  选择第一个孩子 */
        		color: pink; 
        	}
        	li:last-child {   /* 最后一个孩子 */
        		color: purple;
        	}
        	li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
				color: skyblue;
        	}
        	
        </style>
    </head>
    <body>
    	<ul>
    		<li>第一个孩子</li>
    		<li>第二个孩子</li>
    		<li>第三个孩子</li>
    		<li>第四个孩子</li>
    		<li>第五个孩子</li>
    		<li>第六个孩子</li>
    		<li>第七个孩子</li>
    	</ul>
    </body>

代码块2：

<style>
        	/* li:nth-child(odd) {  可以选择所有的 odd奇数 的孩子标签 
				color: pink;
        	}

        	li:nth-child(even) {    可以选择所有的 even 偶数 的孩子标签 
				color: deeppink;
        	} */

			li:nth-child(3n) {   /* n 0   2n    2n是 选择 0 2.4.6.8..的孩子  3n 0.3.6.9的孩子元素 */
				color: pink;
            
        	}
        </style>
    </head>
    <body>
    	<ul>
    		<li>第一个孩子</li>
    		<li>第二个孩子</li>
    		<li>第三个孩子</li>
    		<li>第四个孩子</li>
    		<li>第五个孩子</li>
    		<li>第六个孩子</li>
    		<li>第七个孩子</li>
    	</ul>
    </body>

代码块3：

<style>
        	/* li:nth-child(even) {  从第一个孩子开始数的
                color: pink;
            } */
            li:nth-last-child(even) {  /*  nth-last-child 从最后一个孩子开始数  倒数 */
                color: skyblue;
            }
        </style>
    </head>
    <body>
    	<ul>
    		<li>第一个孩子</li>
    		<li>第二个孩子</li>
    		<li>第三个孩子</li>
    		<li>第四个孩子</li>
    		<li>第五个孩子</li>
    		<li>第六个孩子</li>
    		<li>第七个孩子</li>
    		<li>第八个孩子</li>
    	</ul>
    </body>

（3）目标伪类选择器
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

<style>
	:target {
		color: red;
		font-size: 30px;
	}
	</style>
</head>
<body>
<h2>目录</h2>
<hr />
1 早年经历<br />
	<a href="#movie">2 演艺经历</a><br />
	<a href="#live">3 个人生活</a><br />
4 主要作品<br />
5 社会活动<br />
6 获奖记录<br />
7 人物评价<br />
<h3>早年经历</h3>
<hr />
刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意[17]  。1973年，刘德华随家人搬入香港蓝田邨第15座14楼[18]  。刘德华从黄大仙天主教小学毕业后升读可立中学[19]  。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路[20]  。
<h3 id="movie">演艺经历</h3>
<hr />
1981年，刘德华考进第10期无线电视艺员训练班[21]  ；同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙[22]  ；该剧获得美国电视节电视剧特别奖[23]  。
1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB[24]  ；同年在
</body>

水声千里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记（二）

选择器（一）1.标签选择器p div h1 span em i 这是标签作为选择器，使用时直接写标签名即可以“标签{}形式”。 p { color: pink; } div { color: purple; } </style> </head> <body>...
复制链接

扫一扫

专栏目录