1. 类选择器(通过类名进行选择)
效果图:
image.PNG
2.id 选择器(通过 id 进行选择)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- </title>
- </head>
- <style type="text/css">
- #text{ color: red; }
- </style>
- <body>
- <p id="text">
- 这是 id 选择器
- </p>
- </body>
- </HTML>
效果图:
image.PNG
3. 标签选择器(通过 id 进行选择)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- </title>
- </head>
- <style type="text/css">
- p{ color: #f40; font-size: 25px; }
- </style>
- <body>
- <div>
- <p>
- 这是标签选择器
- </p>
- </div>
- </body>
- </HTML>
效果图:
image.PNG
4. 分组选择器(可一次选择多个标签以设置相同样式)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- </title>
- </head>
- <style type="text/css">
- p,a,li{ color: blue; }
- </style>
- <body>
- <p>
- 这是分组选择器
- </p>
- <p>
- hello
- </p>
- <a href="#">
- world
- </a>
- <div>
- <ul>
- <li>
- 1
- </li>
- <li>
- 2
- </li>
- <li>
- 3
- </li>
- </ul>
- </div>
- </body>
- </HTML>
效果图:
image.PNG
5. 后代选择器(选择某个标签的所有后代以设置相同样式)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- </title>
- </head>
- <style type="text/css">
- div ul li{ color: red; list-style: none; }
- </style>
- <body>
- <div>
- <ul>
- <li>
- 1
- </li>
- <li>
- 2
- </li>
- <li>
- 3
- </li>
- </ul>
- </div>
- </body>
- </HTML>
效果图:
image.PNG
6. 属性选择器 (通过属性(如 name 属性) 进行选择以设置相同的样式)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- </title>
- </head>
- <style type="text/css">
- [name="pra1"]{ color: blue; } [name="pra2"]{ color: red; }
- </style>
- <body>
- <p name="pra1">
- 这是属性选择器
- </p>
- <p name="pra2">
- hello world
- </p>
- </body>
- </HTML>
效果图:
image.PNG
7. 通用选择器(选择所有标签以设置相同样式)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- </title>
- </head>
- <style type="text/css">
- *{ color: red; }
- </style>
- <body>
- <p>
- 这是通用选择器
- </p>
- <p>
- hello
- </p>
- <p>
- world
- </p>
- </body>
- </HTML>
效果图:
image.PNG
8. 兄弟选择器(选择兄弟关系的标签设置样式)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- </title>
- </head>
- <style type="text/css">
- p+a{ color: green; }
- </style>
- <body>
- <p>
- 这是兄弟选择器
- </p>
- <a>
- hello world
- </a>
- </body>
- </HTML>
效果图:
image
9. 直接父子选择器(选择父子关系的标签中子标签设置样式)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- </title>
- </head>
- <style type="text/css">
- div>p { color: red; }
- </style>
- <body>
- <div>
- <p>
- 这是直接父子选择器
- </p>
- </div>
- </body>
- </HTML>
效果图:
image.PNG
年初整理了一批 web 前端教程, 帮助想要成为 Web 前端程序员的人. 从零基础到各种框架的教程都有. 只需要加入到 Web 前端学习 qun:296,212,562. 即可免费领取, 学习过程中遇见任何问题可以在里面问. 种一颗树最好的时间是十年前, 其次是现在. 只要想学习, 不存在早晚.
来源: http://www.jianshu.com/p/55d2ea3ad71e