css基础2（css各个选择器、伪类、）

最新推荐文章于 2024-04-14 14:25:59 发布

「已注销」

最新推荐文章于 2024-04-14 14:25:59 发布

阅读量592

点赞数

分类专栏：前端基础入门 css/css3 文章标签： css

本文链接：https://blog.csdn.net/Allisa_yan/article/details/88635654

版权

前端基础入门同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

css/css3

15 篇文章 0 订阅

订阅专栏

css选择器

1、标签选择器

通过标签选择器设置样式，即所有使用该标签的都会引用该样式

2、类选择器

3、ID选择器

一个ID选择器只能对应一个标签

【注意】：css虽然不区分大小写，但是对于类选择器、ID选择器是区分大小写的；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css选择器</title>
	<style type="text/css">
       /*标签选择器*/
	   p{
	   	color:red;
	   }
       /*类选择器：所有的class为special的标签公用*/
	   .special{
	   	color:blue;
	   }
	   .one{
	   	text-decoration: underline;
	   }
       /*类选择器：添加p标签，表示p标签中class值为special的标签公用*/
	   p.special{
	   	font-size:50px;
	   }
        /*ID选择器：一个html文件中最好只能唯一*/
        #three{color:30px}
	</style>
	
</head>
<body>
	<h1 class="special">CSS是什么</h1>
	<p><em>CSS</em>层叠样式</p>

    <!--同一个元素可以设置不同的类，之间用空格隔开，表示这个标签可以同时使用special、one类选择器中的参数-->
	<p class="special one">用于定义HTML内容在浏览器中的显示样式</p>
	<p id="three"><em>CSS</em>样式由选择器和声明组成</p>	
</body>
</html>

4、群组选择器

但是，当多个标签都使用了同一个样式？？---使用群组选择器（用，分隔开）

5、全局选择器

6、后代选择器

伪类

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>css选择器</title>
	<style type="text/css">
         a:link{color:blue;}      /*未访问状态*/
         a:visited{color:green;}  /*已访问状态*/
         a:hover{color:red;}      /*鼠标悬浮状态*/
         a:active{color:gray;}    /*激活状态*/	
	</style>
</head>
<body>
	<a href="http://www.imooc.com" target="_blank">css使用方法</a>	
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>css选择器</title>
	<style type="text/css">
	     /*a:link{color:blue;} *//*未访问状态*/
	     /*a:visited{color:gray;} *//*已访问状态*/
	     /*a:hover{color:green;}*//*鼠标悬浮状态*/
	     /*a:active{color:orange;}*//*激活状态*/	
        /* p:hover{color:red;}
         p:active{font-size:20px;}*/
         /*a.one:link{color:blue;}
         a.one:visited{color:green;}
         a.one:hover{color:red;}
         a.one:active{color:gray;}
         a.two:link{color:green;}
         a.two:visited{color:blue;}
         a.two:hover{color:gray;}
         a.two:active{color:red;}*/
         p a:link{color:blue;}
         p a:visited{color:green;}
         p a:hover{color:red;}
         p a:active{color:gray;}
         div a:link{color:green;}
         div a:visited{color:blue;}
         div a:hover{color:gray;}
         div a:active{color:red;}
	</style>
	
</head>
<body>
	<p><a href="http://www.imooc.com" target="_blank">css使用方法</a></p>
	<br/>
	<div><a href="http://coding.imooc.com" target="_blank">css选择器</a></div>
	<p>慕课网</p>		
</body>
</html>

css 继承和层叠

//注意：不是父元素的所有属性都能继承

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS继承和层叠</title>
	<style type="text/css">
	    p{color:red;}   /*p标签下的span标签中的内容也会继承该样式*/

        /*只要是div标签中的所有内容都会继承，但是p标签则不会继承边框属性*/
		div{font-size:12px;
		    border:1px solid red;}   

		body,table,tr,td{font-size:12px;} /*ie6以下版本，table表格不会继承body样式*/
        /*修改了h1原本的默认值*/
		h1{color:red;}
		h1{font-size:12px;}
	</style>
</head>
<body>
	<div>
		<p>CSS<span>继承</span></p>
		<div>CSS层叠</div>
	</div>
	<p>CSS继承和层叠</p>

	<table border="1">
		<tr>
			<td>CSS继承</td>
			<td>CSS层叠</td>
		</tr>
	</table>

	<h1>CSS继承和层叠</h1>
</body>
</html>

//不冲突即不是同一类

ID选择器>class选择器>标签选择器（当多个class选择器、标签选择器出现冲突时，则按“就近原则”）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS选择器优先级</title>
	<style type="text/css">
		div{color:red;}
		#idgreen{color:green;}
		.classyellow{color:yellow;}	
		.classblue{color:blue;}
		div{color:gray;}
	</style>	
</head>
<body>	
    <p>单独使用：</p>
    <div>使用 标签选择器样式</div>
    <div id="idgreen">使用 ID样式</div>
    <div class="classblue">使用 class样式</div>  
    <!-- 优先级结果：id选择器>标签选择器;class选择器>标签选择器 -->

    <p>同一个元素引用标签、id、class三种方式定义样式：</p>
    <div id="idgreen" class="classblue">同时引用标签、id、class定义的样式</div>
    <div class="classblue" id="idgreen">CSS优先级，同时引用标签、id、class定义的样式</div>
    <!-- 优先级结果：id选择器>class选择器>标签选择器 -->

    <p>同一个元素引用多个class定义的样式：</p>
    <div class="classblue classyellow">蓝色在前，黄色在后</div> 
    <div class="classyellow classblue">黄色在前，蓝色在后</div> 
    <!-- 优先级结果：与class标签书写位置无关，与style样式表中样式的先后顺序有关（就近原则） -->

    <P>同一个元素引用多个标签样式：</P>   
	<div>CSS优先级</div>
	<!-- 优先级结果： 同类样式多次引用，样式表中后定义的优先级高（就近原则）-->	
</body>
</html>

css权值

以上只是判断了标签选择器、id选择器、类选择器，但是如果是后代选择器呢？？如何判断优先级？？ ---css优先级规则

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS选择器优先级</title>
	<style type="text/css">
		*{color:black;}	/*通配符权值：0*/	
		b{color:purple;} /*权值：1*/
		p b{color:yellow;}	/*权值：2*/
		.classblue{color:blue;} /*权值：10*/
		div #test2 b{color:gray;}/*权值：102*/
		#test1 p b{color:orange;} /*权值：102，权值相同，取就近原则*/
		div p .calssbule{color:red;}/*权值：12*/

	</style>	
</head>
<body>	
	<p>派生选择器优先级：</p>
        <div id="test1">
		<h1>CSS样式优先级</h1>
		<p id="test2">所谓<b class="classblue" style="color:pink;">CSS优先级</b>,指CSS样式在浏览器中被解析的先后顺序</p>
		<div><b>权值相同</b>，就近原则;<b>权值不同</b>，哪个权值高，使用哪个。</div>
	</div>
</body>
</html>

* ! important 规则*

* css样式命名 *

【注意】：

id不能滥用，谨慎使用（后期js是需要使用id进行操作）
适当使用class

「已注销」

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css基础2（css各个选择器、伪类、）

目录css选择器伪类 css 继承和层叠 css权值 ! important 规则 css样式命名***css选择器*** 1、标签选择器通过标签选择器设置样式，即所有使用该标签的都会引用该样式2、类选择器3、ID选择器一个ID选择器只能对应一个标签【注意】：css虽然不区分大小写，但是对于类选择器、...
复制链接

扫一扫