CSS中常用的选择器2018年8月15日20时00分

手抄: CSS中常用的三种单位案例
编程: CSS中常用的选择器
实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>常用选择器</title>
	<style type="text/css">
		/*标签选择器 根据标签选择*/
		ul {
			padding: 0;
			margin: 0;
			width: 500px;
			border: 1px dashed #666
			padding:10px 5px;
		}
		/*子块撑开父块区块*/
		ul:after {
			content: '';
			display: block;
			clear: both;
		}
		ul li {
			list-style: none;
			float: left;
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-radius: 50%;
			box-shadow: 2px 2px 2px #800;
			background-color: skyblue;
			margin: 5px;

		}
		/*id选择器*/
		#item1 {
			background-color: coral;
		}
		/*类选择器*/
		.item2
		{
			background-color: gold;
		}
		/*属性选择器 ： 属性名*/
		ul li [class]
		{
			background-color: blueviolet;
		}
		/*属性选择器 ： 属性值*/
		ul li[class="item2"]
		{
			background-color: grey;
		}	
		/*属性选择器 ： 属性值*/
		ul li[class="item2"]
		{
			background-color: grey;
		}	
		/*属性选择器 ：一指定值开头的 属性值*/
		ul li[class^="cat"]
		{
			background-color: yellow;
		}
		/*属性选择器 ：一指定值结尾的 属性值*/
		ul li[class$="pig"]
		{
			background-color: yellow;
		}
		/*属性选择器 ：包含 属性值*/
		ul li[class*="te"]
		{
			background-color: green;
		}

		/*后代选择器、层级选择器*/
		body ul li {
			border: 1px solid black;
		}

		/*子选择器*/
		ul > li[class$="pig"]
		{
			background-color: greenyellow;
		}
		/*相邻选择器,当前选择器不在内*/
		ul  li[class$="pig"] ~ * {
			background-color: black;
			color: white;
		}

		/*相邻兄弟选择器，只选择了第四个小球*/
		ul  li[class$="pig"] + li {
			background-color: pink;
			color: black;
		}

		/*群组选择器*/
		h1,p{
			font-size: 2rem;
			font-weight: lighter;
			margin:0;
		}

		/*伪类选择器 ：链接*/
		a {
			font-size: 2rem;
		}
		/*访问前*/
		a:link {
			color: red;
		}
		/*访问后*/
		a:visited {
			color: orange;
		}
		/*获取焦点*/
		a:focus {
			color: purple;
		}
		/*鼠标悬停*/
		a:hover {
			color: green;
		}
		/*鼠标激活*/
		a:active
		{
			color: blue
		}

		/*伪类选择器：根据位置,first last */
		ul li:first-child {
			background-color: #efefef!important;
		}
		ul li:last-child {
			background-color: #red;
		}
		/*伪类选择器：根据位置,随机数 */
		ul li:nth-child(5) {
			background-color: #red;
		}

		/*伪类选择器：根据位置,偶数2n  even,奇数 odd 2n+1 */
		ul li:nth-child(2n) {
			background-color: #red;
		}

		/*w伪类选择器根据子元素数量,这里一个*/
		ol :only-child {
			background:-color :lawngreen;
		}

		ol li:only-child {
			background:-color :lawngreen;
		}
		/*倒数第三个*/
		ol li:nth-last-child(3) {
			background-color: wheat;
		}
		选择有第二个列表的
		ol li:nth-of-type(2) {
			background-color: wheat;
		}
			/*找到为空的元素 hiv*/
		:empty {
			width: 220px;
			height: 270px;
			background: coral;
		}
		/*填写为空内容*/
		:empty:after {
			content: '看到我了吗';
					} 

		:empty:before {
			/*通过伪类添加元素都是行内元素，不支持宽高设置，可以通过设置背景*/
			content: url(../xxx.jpg);
		}

	</style>
</head>
<body>
	<ul>
		<li id="item1">1</li>
		<li class="item2">2</li>
		<li class="cat dog pig">3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>

<h1>css选择器大法</h1>
<p>css选择器非常重要，特别是学习JS 以及iqita前段</p>

<a href="http://www.php.cn">php中文网</a>

<ol>
	<li>列表1</li>
</ol>

<ol>
	<li>列表1</li>
	<li>列表2</li>
</ol>

<ol>
	<li>列表1</li>
	<li>列表3</li>
	<li>列表4</li>
</ol>

<div></div>


</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例

相关文章
