当前位置： 移动技术网 > IT编程>网页制作>HTML > CSS3 | 样式和优先级

CSS3 | 样式和优先级

2020年07月24日  | 移动技术网IT编程  | 我要评论

css3一般介绍：

CSS注释：/*CSS*/

CSS长度单位：

1.px（像素）

2.em（倍数，一般用于文字）

一、HTML嵌套CSS3样式：

1.外部（推荐）

例如HTML文件为

将样式放入另一文件中，index.css

以上两个文件放入同一文件夹下

2.内部

3.内联（不推荐）

二、CSS3优先级

1.内联style

2.id选择器

3.class选择器

4.标签

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		#imgid{
			background:#0ff;
			border-radius:256px;
		}

		.imgcls{
			background:#f0f;
			border-radius:256px;
		}

		img{
			background:#ccc;
			border-radius:256px;
		}

	</style>
</head>
<body>
	<img src="xs.png" id='imgid' class='imgcls' style="background:#ff0">	
</body>
</html>

以上代码中，优先级为：内联style>#imgid>.imgid>img

三、CSS3选择器

1.常用选择器

    1）标签

...
<style >
        span{
            font-size:10em
        }
</style>
<span>linux</span>
...


*{} //给页面上所有的标签设置模式 
h1{} //给页面上所有的h1标签设置样式

    2）id

...
<style>
        #imgid{
            font-size:10em
        }
</style>
<body>
    <img src="xs.png"  id='imgid' class='imgcls'  style="background:#ff0">
</body>
...

#h3{} //给id是h3的标签设置样式

    3）类

...
<style>
        .imgid{
            font-size:10em
        }
</style>
<body>
    <img src="xs.png"  id='imgid' class='imgcls'  style="background:#ff0">
</body>
...

.hcls{} //给class是hcls的一类标签设置模式

    4）关联

...
	<style>
		.div2 .imgcls{  /*表示div2里面的imglcs*/
			background:#ccc;
			border-radius:256px;
		}

	</style>
...
<body>
	<div class="div1">
		<img src="xs.png" id='imgid' class='imgcls'>	
	</div>
	<div class="div2">
		<img src="xs.png" id='imgid' class='imgcls'>	
	</div>
</body>
...

#div1 h1 
#div1 h1.ljhcls

    5）组合

...
	<style>
		.div1 .imgcls,.div2 .imgcls{
			background:#ccc;
			border-radius:256px;
		}

	</style>
...
<body>
	<div class="div1">
		<img src="xs.png" class='imgcls'>	
	</div>

	<div class="div2">
		<img src="xs.png" class='imgcls'>	
	</div>

	<div class="div3">
		<img src="xs.png" class='imgcls'>	
	</div>
</body>
...

div,h1,p,span,button{}

2.基本选择器

    1）:first-child

    2）:first-letter

        对一段文字中的第一个字符进行操作

    3）:first-line

        对一段文字中的第一个行进行操作

    4）:last-child

    5）:nth-child(num)

      可以自由选择对第几个进行样式操作（用法参考1）4））

3.层级选择器

    1）a,b（组合）

    2）a b（a里面的b）

    3）a>b（a的“子集”b）

如图，以上代码只对<div1里面的<h1>bbbbbbbbb进行操作

    4）a+b

如图，以上代码只对<div1>后面的<h1>ccccccccccccccc进行操作

4.伪类选择器

    1）:hover

鼠标在选择内容上则操作，鼠标移开则不进行操作，如下例：

    2）:focus

鼠标点击后，表单元素获得焦点，右下图为改变表单轮廓的实例

    3）::selection

内容被选择后，内容的背景色发生变化

5.属性选择器（用的不多，不做赘述）

附上一段详细讲解的链接=>CSS选择器参考手册

    1）[id]

    2）[id=use1]

    3）[name*=us]

名字中包含有us的

    4）[name|=en]

 

本文地址：https://blog.csdn.net/weixin_47982238/article/details/107531919

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网