必威体育Betway必威体育官网
当前位置:首页 > IT技术

CSS3起步 02-------css3选择器

时间:2019-09-03 00:13:18来源:IT技术作者:seo实验室小编阅读:59次「手机版」
 

css3选择器

基本选择器:

css3选择器中存在着九种基本选择器,通配符选择器;元素选择器;类选择器;id选择器;后代选择器;子代选择器;相邻兄弟选择器;通用兄弟选择器和群组选择器。现在一一记录…

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,inital-scale=1.0,Minimun-scale=1.0,maximun-scale=1.0" />
		<title>css3选择器-----基本选择器</title>
		<style>
			
			/* 通配符选择器 */
			*{
				margin: 0px;
				padding: 0px;
			}
			
			/* 元素选择器 */
			ul{
				list-style: none;
			}
			
			li{
				width: 30px;
				height: 30px;
				color: brown;
				display: inline-block;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				background-color: #FFE4C4;
			}
			
			/* 类选择器 */
			.demo{
				width: 500px;
				margin: 200px auto;
				border: 2px solid #A52A2A;
			}
			
			.firstli{
				color: #FF0000;
				background-color: aqua;
			}
			
			/* id选择器 */
			#seconodli{
				color: white;
				background-color: black;
			}
			
			/* 后代选择器 */
			.demo i{
				width: 30px;
				height: 30px;
				color: sandybrown;
				display: inline-block;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				background-color: green;
			}
			
			/* 子代选择器 */
			.demo>i{
				width: 30px;
				height: 30px;
				color: white;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				background-color: black;
			}
			
			/* 相邻兄弟选择器 */
			#seconodli + li{
				width: 30px;
				height:30px;
				color: white;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				background-color: black;
			}
			
			/* 通用兄弟选择器 */
			.eighthli ~ li{
				width: 30px;
				height: 30px;
				color: white;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				background-color: blue;
			}
			
			/* 群组选择器 */
			.sixthli,.seventhli{
				width: 30px;
				height: 30px;
				color: red;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<p class="demo">
			<ul>
				<li class="firstli">1</li>
				<li id="seconodli">2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li class="sixthli">6</li>
				<li class="seventhli">7</li>
				<li class="eighthli">8</li>
				<li>9</li>
				<i>10</i>
			</ul>
			<i>1</i>
			<i>2</i>
			<i>3</i>
		</p>
	</body>

</html>

运行截图:

在这里插入图片描述

1,通配符选择器:选择所有元素,,也可以选择某个元素下的所有元素。

2,元素选择器:选择html中的所有相同元素(包括javaScript),这里是ulli

3,类选择器:通过.class选择所属元素

4,id选择器:通过#id选择所属元素

5,后代选择器:选择某父类下所以后代,儿子,孙子,曾孙子等等等这里是.demo下的所有i元素

6,子代选择器:选择某父类下所有的儿子这里是是.demo下的所有儿子i元素

7,相邻兄弟选择器:选择某元素最大的弟弟,处于同一父类中,这里是#seconodli + li

8,通用兄弟选择器:选择某元素所有的弟弟处于同一父类中,这里是.eighthli ~ li

9,群组选择器:同时选用多个selectors,这里是.sixthli,.seventhli注意一定要逗号。

属性选择器

伪类选择器

适用于链接,遵循爱恨准则Link--visited--hover--active如果顺序错乱,则失效。

菜鸟爬行中…

相关阅读

jQuery的选择器大全

jQuery的选择器  一、 基本选择器1. ID选择器           ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以i

用css3做阴影

用css3做阴影 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/c

css3 深刻认识border-color和border-radius的属性

1.border-radius 属性: 我们先看看下面的图片: 如果你们看到这个图片该怎么写的?先思考一下 代码如下: .box{ width: 20

css3实现 slideUp/slideDown效果

1. 纯css3实现<h1><mark>PURE CSS</mark> Slide Up and Slide Down</h1> <input id="toggle" type="checkbox"><label for="toggl

11 - css3渐变

css3渐变 鼠标样式 透明度的使用以及兼容性写法(针对IE的大傻逼) 线性渐变 径向渐变 ###鼠标样式(cursor)规定当鼠标进入元素呢

分享到:

栏目导航

推荐阅读

热门阅读