CSS选择器
1. 标签名选择器
- 通过标签的名称选取页面中所有同名的元素
- 格式：
div{
样式代码
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> <!--通过标签名选择器选择所有div --> div{ color: blue; background-color: green; } </style> <!-- 引入css文件 --> <link rel="stylesheet" href="style.css"> </head> <body> <h5 style="color: red">灭霸</h5> <div>div1</div> <div>div2</div> <div>div3</div> </body> </html>
页面效果
Insert title here
灭霸
div1
div2
div3
______________________________________________________________
2. id选择器
- 通过元素的唯一标识id属性值 选取元素，当需要选择页面中某一个元素时使用
- 格式：
#id{
}
3. 类选择器
- 通过元素的class属性值选取元素，当需要选择页面中多个看似不相关的元素时使用
- 格式：
.class{
}
4. 分组选择器
- 将多个选择器合并成一个选择器
- 格式：
#id,.class,div{
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> #l2{ color: red; } .c1{ background-color: green; } span,h3{ color: blue; } /* 选择器优先级：作用范围越小优先级越高 id>class>标签名 */ li{ color: purple; } </style> </head> <body> <div>c++</div> <div>java</div> <div class="c1">C语言</div> <span class="c1">c#</span> <span>oracle</span> <span>mysql</span> <h3>python</h3> <ul> <li>循环语句</li> <li id="l2">判断语句</li> <li class="c1">分支语句</li> </ul> </body> </html>
页面效果：
Insert title here
c++
java
C语言
c# oracle mysql
python
- 循环语句
- 判断语句
- 分支语句
-----------------------------------------------------------------------------------------------------------------------
5. 属性选择器
- 通过标签的属性名和值 选取元素
- 格式：
标签名[属性名='值']{
}
6. 子孙后代选择器
- 通过元素的上下级关系选择元素
- 格式：
div div p{
}
7. 子元素选择器
- 通过元素的上下级关系选择元素
- 格式：
div>div>p{
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> input[type='password']{ background-color: yellow; } /* 子孙后代选择器 */ div p{ color: red; } body>div>p{ background-color: blue; } /* 修改p4字体绿色 */ body>p{ color: yellow; } </style> </head> <body> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <div> <p>p1</p> <div> <p>p2</p> </div> <div> <p>p3</p> </div> </div> <p>p4</p> </body> </html>
页面效果：
Insert title here
p1
p2
p3
p4
