CSS（一）选择器
1. 基本选择器
标签选择器：标签名{}，选择页面上所有该标签的元素
类选择器：.类名{} ，选择所有class属性一致的标签，可以跨标签
id选择器：#id名{}，全局唯一
优先级顺序：id选择器>类选择器>标签选择器
2. 层次选择器
样例代码，p1p4与p9p10为body的第一代后代，ul li中的p5~p8为第二代后代
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
<li>
<p>p7</p>
</li>
<li>
<p>p8</p>
</li>
</ul>
<p>p9</p>
<p>p10</p>
</body>
a. 后代选择器：选中元素的所有后代中的所有该元素
body p{
background : red;
}
b. 子选择器：选中元素的第一代后代中的所有该元素
body>p{
background : green;
}
c. 相邻兄弟选择器：选中元素的第一个相邻的弟弟（不包括自身）
.active+p{
background : blue;
}
d. 通用选择器：选中元素的所有弟弟（包括自身）
.active~p{
background : yellow;
}
3. 结构伪类选择器
样例代码结构
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>p5</li>
<li>p6</li>
<li>p7</li>
<li>p8</li>
</ul>
<p>p9</p>
<p>p10</p>
</body>
CSS代码
/*选中元素的父级的第一个子元素*/
ul li:first-child{
background: red;
}
/*选中元素的父级的最后一个子元素*/
ul li:last-child{
background: green;
}
/*选中元素的父级的所有子元素中的第n个，并且类型要与该选中元素同类才会被选中，否则无效*/
p:nth-child(1){ /*表示了h1，类型不符，不会选中，即无效*/
background: blue;
}
p:nth-child(2){ /*表示了p1，类型相符，选中*/
background: orange;
}
.list:nth-child(3){ /*表示了p7，类型相符，选中*/
background: yellow;
}
/*选中元素的父级的所有该类子元素中的第n个*/
p:nth-of-type(2){ /*注意和上面对比*/
background: aqua;
}
结果
4.属性选择器
样例代码结构
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item">2</a>
<a href="imgaes/123.jpg" class="links item">3</a>
<a href="imgaes/123.pdf" class="links">4</a>
<a href="images/123.png" class="links">5</a>
<a href="/123.jpg" class="links item">6</a>
<a href="/123.doc" class="links item">7</a>
<a href="123.pdf" class="links">8</a>
<a href="ab.doc" class="links">9</a>
<a href="cd.png" class="links item last" id="last">10</a>
</p>
初始CSS
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: deepskyblue;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
line-height: 50px;
}
不同属性选择器及对应结果
/*存在id属性的a元素*/
a[id]{
background: orange;
}
/*还可以在属性后限定属性值*/
a[id=first]{
background: green;
}
/*包含*/
a[class~="item"]{ /* ~= 或 *= 代表包含，即class属性中包含item的元素被选中*/
background: red;
}
/*^=以什么开头*/
a[href^=https]{
background: green;
}
/*&=以什么结尾*/
a[href$=pdf]{
background: blue;
}