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)，这里是ul和li
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的选择器 一、 基本选择器1. ID选择器 ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以i
用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
1. 纯css3实现<h1><mark>PURE CSS</mark> Slide Up and Slide Down</h1> <input id="toggle" type="checkbox"><label for="toggl
css3渐变 鼠标样式 透明度的使用以及兼容性写法(针对IE的大傻逼) 线性渐变 径向渐变 ###鼠标样式(cursor)规定当鼠标进入元素呢