css3中选择器的基本概念_csstransform属性

(5) 2024-07-24 09:12

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
css3中选择器的基本概念_csstransform属性,希望能够帮助你!!!。

三大特性

继承性:子标签继承父标签样式,默认优先级最低。
有继承性:文本相关字体样式、粗细、大小、颜色、类型等
无继承性:盒子模型相关边框、背景等
层叠性:相同标签继承和定义的样式累加到一起互不冲突。
优先级:离标签越近的选择器优先级越高,所以相同权重的样式后者才生效;内联样式表>头部样式表>导入样式表。

权重

权重为0000:
通用选择器* {}

组选择器h1, h2, p, em, img {}

后代选择器h1 em{}

子代选择器table>tbody>tr{}

分类选择器div.top,header.main{}

+相邻兄弟选择器: div.s+p{} 只能选择后面的

~通用兄弟选择器: div.s~p{} 只能选择后面的

权重为0001:

标签选择器h3 em {}

:first-letter每段首字符(css2不兼容,css3兼容)

:first-line每行首字符

当:first-letter和:first-line矛盾时优先:first-letter

:before

:after

:content

::selection用户在页面中选中部分(只能改颜色和背景颜色)

权重0010:

类(class)选择器 .special {}

伪类选择器:  :link   :visited   :hover   :active   :focus

元素状态伪类:   :enabled   :disabled   :checked   :focus

属性选择器:[属性]   元素[属性][属性]   元素[属性=“value”]

p=[class^=”value”] p=[class*=”value”] p=[class$=”value”]

元素[class~=”value”]匹配class=”c1 c2 c3 c4”众多值中某一个

目标伪类:img:target{}匹配id或name的value,写在跳转目标的标签后

:target{} <a href=”#hehe”>点此<a>    <a name=”hehe”>跳此</a>   <img id=”hehe”>跳此</img>

结构伪类:(父元素下的子元素中,必须先选中父元素)

:first-child    :last-child    :nth-child(n)

:nth-child(even|2n)选择偶数子元素 :nth-child(odd|2n-1)//奇数

:empty 空格换行不算空,匹配同级元素中一个子元素都没有的元素

:only-child匹配同级元素中只有一个子元素的元素

否定伪类::not()

权重0100:

ID选择器 #banner

权重1000:

!important p{color:blue !important;}

综合实例

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
	#blogs.blogs>#blog.blog>p{color:yellow;}/*权重:100+10+100+10+1*/
	span{color:blue !important;}/*权重:1+1000*/
	#blogs span{color:green;}/*权重:100+1*/
	.blogs h1{background-color:blue;}/*权重:10+1*/
	.blogs .blog h1{background-color:yellow;}/*权重:10+10+1*/
	h1{background-color:gray;}/*权重:1*/
</style>
</head>
<body>
	<div id="blogs" class="blogs">
		<div id="blog" class="blog">
			<!-- 权重:内联最高 -->
			<h1 style="background-color:gray;">第一篇博客</h1>
			<p><span>this</span> is my first blog.</p>
		</div>
	</div>
</body>
</html>


今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

上一篇

已是最后文章

下一篇

已是最新文章

发表回复