层次选择器
选择全部
*p{}所有该属性标签都会改变样式
1 p{
2 background: #15f50c;
3 }
后代选择器
选择某一项的后代所有的该元素都改变样式
1 后代选择器
2 body p{
3 background: aqua;
4 }
子选择器
只选择子代，子代之后的不做选择
1 /*子选择器*/
2 body>p{
3 background: blue;
4 }
相邻兄弟选择器
选择向下的相邻的兄弟标签改变样式，只有一个标签
1 /*相邻兄弟选择器*/
2 .active + p{
3 background: antiquewhite;
4
5 }
通用选择器
向下的兄弟标签改变样式，只有同一层的兄弟标签改变
1 /*通用选择器*/
2 .active~p{
3 background: blue;
4 }
总代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 /*p{*/
8 /* background: #15f50c;*/
9 /*}*/
10
11 /*后代选择器*/
12 /*body p{*/
13 /* background: aqua;*/
14 /*}*/
15
16 /*!*子选择器*!*/
17 /*body>p{*/
18 /* background: blue;*/
19 /*}*/
20
21 /*!*相邻兄弟选择器*!*/
22 /*.active + p{*/
23 /* background: antiquewhite;*/
24
25 /*}*/
26
27 /*!*通用选择器*!*/
28 /*.active~p{*/
29 /* background: blue;*/
30 /*}*/
31
32 li>p{
33 background: bisque;
34 }
35 #nice >p +p{
36 background: aqua;
37 }
38
39 </style>
40 </head>
41 <body>
42 <p>p0</p>
43 <p class="active">p1</p>
44 <p>p2</p>
45 <p>p3</p>
46 <ul>
47 <li>
48 <p>p4</p>
49 </li>
50 <li id="nice">
51 <p>p5</p>
52 <p>6666</p>
53 </li>
54 <li>
55 <p>p6</p>
56 </li>
57 </ul>
58 <p>p7</p>
59 <p>p8</p>
60 <p>p9</p>
61 </body>
62 </html>
总结
层次选择器：
1. 后代选择器：在某个元素的后面的所有
1 1 body p{
2 2 background: aqua;
3 3 }
2. 子选择器: 只选择一代
1 body>p{
2 background: blue;
3 }
3. 相邻兄弟选择器: 选择同辈(只选择最近的下方的一个元素)
1 .active + p{
2 background: antiquewhite;
3
4 }
4. 通用选择器:选择当前选中元素下面的所有同级元素
1 .active~p{
2 background: bisque;
3 }
结构伪类选择器
不创建类而对各标签进行选择
-
选择第一个元素：
1 /*ul的第一个子元素*/
2 ul li:first-child{
3 background: bisque;
4 }
-
选择最后一个元素：
1 /*ul的最后一个子元素*/
2 ul li:last-child{
3 background: rosybrown;
4 }
-
1 选中p1：定位到父元素，选择父元素下第几个元素，必须和类型匹配才可以使用.
1 <body> 2 <a href="http://www.baidu.com">haha</a> 3 <h1>121</h1> 4 <p>p0</p> 5 <p>p1</p> 6 <p>p2</p> 7 <p>p3</p>
1 p:nth-child(4){
2 background: aquamarine;
3 }
如果是child（123）则不会改变p1
3.2 根据类型选择：
选择父元素下p标签中的第二个p标签
1 p:nth-of-type(2){
2 background: red;
3 }
属性选择器
首先创建10个a标签
1 <p class="demo"> 2 <a href="http://www.baidu.com" class="link item first" id="first">1</a> 3 <a href="" class="link item 2" target="_blank" title="test 2">2</a> 4 <a href="test/123.html" class="link item 3">3</a> 5 <a href="test/123.png" class="link item 4">4</a> 6 <a href="test/123.jpg" class="link item 5">5</a> 7 <a href="abc" class="link item ">6</a> 8 <a href="/a.pdf" class="link item ">7</a> 9 <a href="/abc.pdf" class="link item ">8</a> 10 <a href="abc.doc" class="link item ">9</a> 11 <a href="aabb.doc" class="link item last">10</a> 12 </p>
设计a标签的样式
1 .demo a{
2 float: left;
3 display: block;
4 height: 50px;
5 width: 50px;
6 border-radius: 10px;
7 background: bisque;
8 text-align: center;
9 color: gray;
10 text-decoration: none;
11 margin-right: 5px;
12 font: bold 20px/50px Arial;
13 }
利用各种属性选择对应标签进行样式的修改
a[]{}:
a是修改的标签类型
[]中写选定的特定值可以用正则表达式
1 = 是绝对等于 2 *= 是包含这个元素 3 ^= 以这个开头 4 $= 以这个结尾
{}对标签的修改
-
存在id的属性：
1 a[id]{
2 background: yellow;
3 }
-
id=first的标签
a[id=first]{
background: #15f50c;
}
-
class中有link的元素
a[class*=link]{
background: yellow;
}
-
href以http开头
a[href^=http]{
background: bisque;
}
-
href以pdf结尾
a[href$=pdf]{
background: red;
}
成效图
标签：body,标签,day27,元素,选择,background,选择器 From： https://www.cnblogs.com/GUGUZIZI/p/16897358.html