第四课：css中常用选择器—2018年8月15日 - CSS

首页 > 博客列表 > 第四课：css中常用选择器—2018年8月15日

博主信息

博文 9

粉丝 1

访问量 8356

专题推荐

更多>

实例

页面是通过元素展示出来的内容，元素是通过标签来来描述的。css样式是通过标签属性来美化页面显示内容，在动态或交互中则需要精确效率的找到描述元素的标签，所以css选择器则变得格外重要。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用选择器</title>
	<style>
		/*标签选择器*/
		ul {
			padding: 10px 5px;
			margin: 0;
			width: 500px;
			border: 1px dashed #666;
			
		}
		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 #888;	/*css3属性 向框添加一个多多个阴影*/
			background: skyblue;	/*背景色天蓝*/
			margin-right: 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^="cat"] {
			background-color: brown;
		}
		/*属性选择器：以指定属性值结束*/
		ul li[class$="pig"] {
			background-color: red;
		}
		/*属性选择器：属性值中包含指定子串*/
		ul li[class*="te"] {
			/*第一个小球是id，它的优先级大于标签属性选择器，改成class就会有效果*/
			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;
		}
		/*伪类选择器：位置*/
		/*选择集合中的第一个元素*/
		ul li:first-child {
			background-color: #efefef;
			background-color: #efefef!important;
		}
		/*选择集合中的最后一个子元素*/
		ul li:last-child {
			background-color: red;
		}
		/*按索引选择指定的元素，注意从1开始计数*/
		ul li:nth-child(5) {
			background-color: red;
		}
		/*选择所以的偶数小球变色*/
		/*2n偶数，even偶数	，2n+1奇数，odd奇数*/
		ul li:nth-child(even) {
			background-color: purple!important;
		}
		/*伪类选择器：根据子元素数量*/
		/*选择具有唯一子元素的元素*/
		ol :only-child {
			background-color: lawngreen;
		}
		/*选择指定类型的唯一子元素*/
		ol li:only-of-type {
			background-color: lawngreen;
		}
		/*倒数选择指定位置的元素*/
		ul li:nth-last-child(3) {
			/*将倒数第三个小球变色，实际上第8号球*/
			background-color: wheat!important;
		}
		/*选择指定父级的第二个<li>子元素*/
		ol li:nth-of-type(2) {
			background-color: wheat;
		}
		/*选择页面中内容为空的元素*/
		:empty {
			width: 220px;
			height: 271px;
			background-color: coral;
		}
		:empty:after {
			content: 'css中添加的内容哦';
		}
		:empty:before {
			/*默认插入的元素为行内元素，不支持宽度设定，如果一定要设置可以通过背景图片实现*/
			content: url("monkey.png");
		}
	</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选择器非常重要，对于后面的jquery学习至关重要</p>
	<a href="http://php.cn">PHP中文网</a>

	<ol>
		<li>列表项1</li>
		<!-- 现在给ol再添加一个子元素<p>，有二个子元素了，所以子元素不再唯一，如何才能选择唯一的li元素呢？only-oftype -->
		<p>我是一个段落</p>
	</ol>
	
	<ol>
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
	</ol>
	<ol>
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
		<li>列表项4</li>
	</ol>
	<!-- 空区块 -->
	<div></div>
</body>
</html>

运行实例 »

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