博客列表 >CSS常用选择器-2019.1.14

CSS常用选择器-2019.1.14

ken的博客
ken的博客原创
2019年01月22日 09:09:06683浏览

学习了CSS常用选择器比如:标签选择器,层级选择器,id选择器,类class选择器,属性选择器,群组选择器,相邻选择器,兄弟选择器以及伪元素的使用方法:

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style2.css">
	<title>CSS常用选择器</title>
	<style type="text/css">
	*{
	margin:0px;
	padding: 0px;
}
/*标签选择器*/
ul{
	border: 1px dashed red;
	overflow: hidden;
	padding: 10px;

}
/*层级选择器*/
ul li{
	list-style:none;
	float: left;
	width:40px;
	height:40px;
	background-color:wheat;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	margin-left: 8px;
	box-shadow: 2px 2px 1px red;

}

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

/*class选择器*/
.bg-yellow{
	background-color: yellow;
}

/*属性选择器*/
li[bg-pink]{
	border: 2px solid #000;

}

/*相邻选择器*/
.bg-yellow + *{
	background-color: #ccc;
}

/*兄弟选择器*/
#bg-pink~ *{
	background-color: blue;
}
/*群组选择器*/
#bg-pink .bg-yellow{
border: 2px solid #ccc;
}

/*伪类:子元素选择器*/

/*第一个子类*/
ul :first-child{
	background-color: red;
}

/*最后一个子类*/
ul :last-child{
	background-color: yellow;
}

/*双数子类*/
ul :nth-child(2n){
    background-color: red;
}
/*单数子类*/
ul :nth-child(2n+1){
    background-color: red;
}

/*伪类:类型选择器*/

ul li:first-of-type{
	background-color: pink;
}
ul li:nth-of-type(5){
background-color: #fff;
}
/*选择测试8*/
div:nth-child(3) p:nth-of-type(2){
	background-color: red;
}

/*直接用类型p标签选择会出现2个div里面第二个p元素都变色*/
p:nth-of-type(2){
	background-color: red;
}


/*启用背景颜色为粉色*/
form :enabled{
	background-color: pink;
	border:1px solid #ccc;
}
/*单选按钮选中文本设置字体颜色为红色,使用到相邻选择器*/
form :checked + * {
	color: red;
}
/*焦点背景颜色为黄色*/
form :focus{
	background-color:yellow;
}

/*错误格式信息显示红色*/
form :invalid{
	color: red;
}
	</style>
</head>
<body>
	<div>
		<ul>
			<li class="bg-yellow">1</li>
			<li>2</li>
			<li id="bg-pink">3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
	</div>
<div>
	<p>测试一</p>
	<li>测试2</li>
	<p>测试3</p>
	<li>测试4</li>
</div>
<div>
	<p>测试5</p>
	<li>测试6</li>
	<li>测试7</li>
	<p>测试8</p>
</div>

<!-- 表单选择器使用方法 -->
<div>
	<form method="get" action="xx.phph"> 
<label for="email">邮箱:</label>
<input type="email" name="email" id="email" placeholder="请填写邮箱地址">
<br>
<label for="pwd">密码:</label>
<input type="password" name="pwd" id="pwd" placeholder="请输入密码">
<br>
<label>
 <input type="radio" name="save" value="7" checked>保存一周
</label>
<label>
	<input type="radio" name="save" value="30">保存一个月
</label>
<br>
<button>登入</button>
</form>
</div>
</body>
</html>

运行实例 »

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

总结:

  1. 通过学习这些选择器从中学的了很多,我比较喜欢常用的还是class选择器以及层级选择器

  2. 伪元素老师也了讲了许多,需要在实际中去运用才能完全掌握,我觉得我现在还是皮毛。不能完全掌控。

  3. 还是就是后面的表单里面的focus焦点以及checked不能成功测试出来,开始focus是ok的后面不知道怎么就不生效了。可以帮忙帮我找下错误,谢谢~!

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议