简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 深入css常用选择器
Blogger Information
Blog 4
fans 0
comment 0
visits 2443
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
深入css常用选择器
aptx_1999的博客
Original
512 people have browsed it
深入学习css常用选择器

实例

/*标签选择器*/
ul{
	border:1px dashed red;
	margin-top:0;
	margin-bottom:0;
	padding-left:0;
	overflow: hidden;
	padding: 10px;
}

/*层级选择器*/
ul li{
	list-style: none;
	width:40px;
	height: 40px;
	border-radius: 50%;
	line-height: 40px;
	text-align: center;
	float: left;
	margin-left: 10px;
}

/*id选择器*/
#bg-blue{
	background-color: -lightblue;
}

/*类选择器*/
.bg-green{
	background-color: lightgreen;
}

/*属性选择器*/
ul li[id="bg-blue"]{
	background-color: blue;  /*id选择器优先级较高，需把前面的注释掉*/
	color: white;
}

/*群组选择器*/
.bg-green, #bg-bule{
	background-color: blueviolet;
}

/*相邻选择器*/
.bg-green + *{
	background-color: chartreuse;
}

/*兄弟选择器*/
#bg-blue ~ *{
	color: peru;
}

/*伪类：子元素选择器*/
 ul :first-child{
	 color: blue;   /*选择第一个子元素*/
 }

 ul :last-child{
	 background-color: coral;   /*选择最后一个子元素*/
 }

 ul :nth-child(9){
	 background-color: brown;  /*选择第9个子元素*/
 }

 ul :nth-last-child(3){
	 background-color: cyan;   /*选择倒数第3个子元素*/
 }






/*伪类：类型选择器*/
ul li:first-of-type{
	background-color: deeppink;  /*选择第一个li类型的元素*/
}

ul li:last-of-type{
	background-color: gray;     /*选择最后一个li类型的元素*/
}

ul li:nth-of-type(6){
	background-color:yellowgreen ;    /*选择第6个li类型的元素*/
}



/*选中每个div中的第2个子元素*/
div :nth-child(2){
	background-color: springgreen;
} 

/*只选中神奇与一*/
div:first-of-type :nth-child(3){
	background-color: -tan;
}

/*可以简化*/
p:nth-of-type(2){
	background-color: violet;
}

/*选择只有一个子元素且为p*/
p:only-of-type{
	background-color: skyblue;
}

/*伪类：表单控件*/
form :enabled{
	background-color: wheat;
}

/* 将单选按钮中的文本前景色设置为红色,使用了伪类和相邻选择器 */
form :checked + *{
	color: red;
}

/*当在控件中输入无效值文本会自动变成红色*/
form :invalid{
	color: red;
}

/*设置控件获取到焦点时的样式*/
form :focus{
	background-color: lightgreen;
}

/*设置鼠标悬停时的样式*/
button:hover{
	width: 56px;
	height: 20px;
	background-color: black;
	color: white;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html>

<head>
	<meta charset="uft-8">
	<title>CSS常用选择器</title>
	<link rel="stylesheet" href="static/css/style01.css">
</head>

<body>
	<!-- 演示基本选择器 -->
	<ul>
		<li class="bg-green">1</li>
		<li id="bg-blue">2</li>
		<li class="bg-green">3</li>
		<li class="bg-green">4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>

	<!-- 演示伪类选择器中的子元素与类型选择器之间的区别与联系 -->
	<div>
		<p>大力哥</p>
		<li>简言</li>
		<p>神奇与一</p>
	</div>

	<div>
		<p>一只阿冉</p>
		<li>三次元少女佐拉</li>
	</div>

	<form action="">
		<label for="email">邮箱</label>
		<input type="email">

		<label for="password">密码</label>
		<input type="password">

		<input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
		<input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>

		<button type="button">登录</button>
	</form>
	
	
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

以上代码涉及以下知识点：

  1. 了解标签选择器、层级选择器、属性选择器等优先级要比伪类选择器高

  2. 伪类的子元素选择器着重在元素的位置，而伪类的类型选择器这重在元素的类型

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！