WEB前端代码：css优先级、基本选择器、层级选择器、伪类选择器、属性选择器

最新推荐文章于 2021-12-21 22:45:41 发布

hahahafree

最新推荐文章于 2021-12-21 22:45:41 发布

阅读量381

点赞数 1

分类专栏： Web 文章标签： WEB

本文链接：https://blog.csdn.net/weixin_43731793/article/details/95603571

版权

Web 专栏收录该内容

80 篇文章 0 订阅

订阅专栏

1、css优先级

1)id选择器
2)class选择器
3)标签选择器

<style type="text/css">
		
		#p-id{
			color: #f00;
		}
		.p-class{
			color: 0f0;
		}
		p{
			color: 00f;
		}
	</style>
	
	
</head>
<body>
	<p class="p-class" id="p-id">下雨了</p>
	
</body>

2、基本选择器

• :first-child第一个
• :first-letter首字母
• :first-line根据浏览器窗口大小的选择第一行
• :last-child最后一个
• :nth-child(2)第几个

p:first-child{
			color: #f00;
		}

3、层级选择器

• a,b祖先
• a b
• a>b 父子关系
• a+b 兄弟关系

	.div1+h1{
			color:#00f;
		}

4、伪类选择器

• :hover
• :focus
• ::selection

h1{
			cursor: pointer;
		}
		h1:hover{
			background: #ccc;
		}
	</style>
	
	
</head>
<body>
	<h1>好的</h1>
	<h1>好的</h1>
	<h1>好的</h1>
	<h1>好的</h1>
	<h1>好的</h1>

<style type="text/css">
		
		
		input:focus{
			outline-color:blue;
		}	
	</style>
	
	
</head>
<body>
	<form action="">
		<p>用户名:</p>
		<p><input type="text"></p>

		<p>密码:</p>
		<p><input type="text"></p>

		<p>
			<input type="submit" value="Ok">
		</p>
	</form>	
	
</body>

	p::selection{
			background:#f0f;
		}	
	</style>
</head>
<body>
	<h1>linux技术</h1>	
	<p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
</body>

5、属性选择器

• [id]
• [id=use1]
• [name^=en]以什么开头
• [name~=linux]等于某个值
• [name$=en]以什么结尾
• [name*=en]属性含有部分内容

	<style type="text/css">
		h1[id][class]{
			background: #ccc;
		}
	</style>
</head>
</body>
	<h1 id="faaa">PHP</h1>
	<h1 id="faaaa" class="asdas">PHP</h1>
	<h1 id="adasdf">PHP</h1>
</body>

h1[id~=faaa]{
			background: #ccc;
		}

h1[id|=faaa]{
			background: #ccf;
		}

h1[id^=faaa]{
			background: #ccf;
		}
		以什么开头的

1、

hahahafree

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端代码：css优先级、基本选择器、层级选择器、伪类选择器、属性选择器

1、css优先级1)id选择器2)class选择器3)标签选择器<style type="text/css"> #p-id{ color: #f00; } .p-class{ color: 0f0; } p{ color: 00f; } </style> </head><body>...
复制链接

扫一扫