3月21日CSS选择器
——基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>基本选择器练习</title>
<style type="text/css" media="screen">
/*元素选择器 E 的使用*/
p{
width:100px;
text-align: center;
font-size:30px;
margin: 2px;
}
/*基本选择器 * 号通配符使用*/
/* .dome1 * {
color:#fff;
background: blue;
width: 100px;
text-align:center;
} */
/*类选择器 . class 使用 最常见*/
/* 方式一 */
.two{
color:#fff;
background:#99cccc;
}
/* 方式二 */
/* p.three{
color:#fff;
background:#CCCC99;
} */
/*ID 选择器的使用*/
/* 前面以#号作为选择器 */
/* #four{
color:red;
} */
/*后代选择器 E F*/
/* 上层 dome1 下层的 p 都可以改变 */
/* .dome1 p{
color:red;
background:blue;
} */
/*子元素选择器*/
/* ul > li 只能选择某元素的子元素，也就是说只能一层 */
/* div > ul{
color:blue;
background:red;
width:100px;
} */
/*群组选择器*/
/* .two,.three{
color:red;
background:blue;
} */
</style>
</head>
<body>
<div>
<ul type="none">
<li><p>1</p></li>
<li><p>2</p></li>
<li><p>3</p></li>
<li><p id="four">4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
<li><p>7</p></li>
<li><p>8</p></li>
<li><p>9</p></li>
<li><p>10</p></li>
<li><p>11</p></li>
<li><p>12</p></li>
</ul>
</div>
</body>
</html>——属性选择器
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>属性选择器练习</title>
<style type="text/css" media="screen">
/*属性选择器 E */
/*选择dome1 下面的 p 标签中带 id的元素 */
/* .dome1 p[id]{
color:red;
} */
/*选择a 标签 href 必须 带 title 的元素*/
/* .dome1 a[href][title]{
color:red;
background:blue;
} */
/* 选择 p 标签下 的元素*/
.dome1 p[class="two"]{
color:red;
background:blue;
}
</style>
</head>
<body>
<div>
<ul type="none">
<li><p>1</p></li>
<li><p>2</p></li>
<li><p>3</p></li>
<li><p id="four">4</p></li>
<li><p>5</p></li>
<li><p><a href="" title="">6</a></p></li>
<li><p>7</p></li>
<li><p>8</p></li>
<li><p>9</p></li>
<li><p>10</p></li>
<li><p>11</p></li>
<li><p>12</p></li>
</ul>
</div>
</body>
</html>手抄基本选择器：
