CSS选择符总结(Selectors)_html/css_WEB-ITnose
一.通配选择符(Universal Selector):
语法：*
说明：1.*表示通配符,表示所有的
2.格式:*{样式列表}
3.用于整个页面或网站字体、边距、背景等
例子：
1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>通配选择符</title> 6 <style type="text/css"> 7 * 8 {/**定义网页中所有元素字体、边距样式*/ 9 margin:0px;10 font-size:28px;11 font-family: "华文彩云";12 }13 div *14 {/**定义div中所有元素字体、边距样式*/15 margin:10px;16 color:#FF0000;17 }18 </style>19 </head> 20 <body>21 普通文本22 <p>段落文本</p>23 <span>span内联文本</span>24 <div>div文本25 <div>div子div元素中的文本</div>26 <p>div中段落文本</p>27 <span>div中span内联文本</span>28 </div>29 </body>30 </html>输出如下：
==============================================================================================================================================
二. 类型选择符（Type Selectors）：
语法：E1
说明：1.类型选择符用于设定特定HTML元素样式
2.元素名称不区分大小写
3.格式:HTML元素名{样式列表}
例子：
1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>类型选择符</title> 6 <style type="text/css"> 7 p 8 { 9 font-size:1cm;10 font-style:oblique;11 }12 div13 {14 color:#FFFF00;15 font-family:"方正黄草简体";16 font-size:1in;17 }18 </style>19 </head>20 <body>21 <p>类型选择符</p>22 <div>类型选择符</div>23 </body>24 </html>输出如下：
=================================================================================================================================
三.属性选择符（Attribute Selectors）：
语法：1. E1[attr]
2. E1[attr=value]
3. E1[attr~=value]
4. E1[attr|=value]
说明：用于定义特定属性值的HTML元素样式.
例子：
1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>属性选择符</title> 6 <style type="text/css"> 7 input[type] 8 { 9 border:2px solid #E81D2B;10 }11 input[name='button']12 {13 border:1px solid #868686;14 height:25px;15 width:60px;16 }17 </style>18 </head>19 <body>20 <form action="#">21 <div>用户名:<input type="text" name="name"/></div>22 <div>密码:<input type="password" name="password"/></div>23 <div>确认密码:<input type="password" name="confirmPWD"/></div>24 <div>电子邮箱:<input type="text" name="email"/></div>25 <div><input type="submit" value="用户注册" name="button"/> 26 <input type="reset" value="重新填写" name="button"/></div>27 </form>28 </body>29 </html>输出如下：
=================================================================================================================================
四.包含选择符（Descendant Selectors）：
语法： E1 E2
说明：1.用于子元素对父元素样式的扩展
2. 格式:父选择符子选择符{样式列表}
3.注意HTML元素包含关系
例子：
1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>包含选择符</title> 6 <style type="text/css"> 7 div p 8 { 9 font-size:32px ;10 font-weight:lighter;11 }12 div p span13 {14 color:#FF0000 ;15 text-shadow: 20px 10px 2px #E81D2B; 16 }17 </style>18 </head>19 <body>20 <p>包含选择符</p>21 <div>22 <p> 包含选择符23 <span>包含选择符</span>24 </p>25 </div>26 </body>27 </html>输出如下：
=================================================================================================================================
五.子对象选择符（Child Selectors）：
语法： E1>E2
说明：1.用于子对象元素对父对象元素样式扩展
2. 格式:父对象选择符>子对象HTML元素名称{样式列表}
3.注意和包含选择符的区别
4.使用情况较少,通常可以用包含选择符取代
例子：
1 <!DOCTYPE html > 2 <html > 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>子对象选择符</title> 5 <style type="text/css"> 6 /** 7 常用子对象选择符 8 table>tbody>tr>td 9 ul>li10 ol>li11 div>子div12 dl>dt13 dl>dd14 form>input15 */16 ul > li17 {18 font-size:18px;19 color:#4F87C2;20 }21 table>td22 {23 font-style:italic;24 font-weight:bolder;25 }26 dl>dd27 {28 font-weight:bolder;29 }30 div >div{31 font-weight:bolder;32 }33 form> input34 {35 border:2px solid #4F87C2;36 }37 </style>38 </head>39 <body>40 水果列表41 <ul >42 <li>香蕉</li>43 <li>苹果</li>44 <li>桃子</li>45 </ul>46 <table > 47 <tr>48 <td>单元格一</td>49 <td>单元格一</td>50 </tr>51 </table>52 三大球类运动53 <dl>54 <dt>足球</dt>55 <dd>全世界第一大球类运动</dd>56 <dt>篮球</dt>57 <dd>全世界第二大球类运动</dd>58 <dt>排球</dt>59 <dd>全世界第三大球类运动</dd>60 </dl>61 <div>第一层div<div>第二层div</div></div>62 <form>63 <input type="button" value="普通按钮"/>64 </form>65 66 </body>67 </html>输出如下：
=================================================================================================================================
六.ID选择符（ID Selectors）：
语法： #sID
说明：1.用于定义唯一ID属性值元素样式
2. 格式:#选择符名称{样式列表}
3.选择符名称必须和元素ID属性值完成相同,且区分大小写
例子：
1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>ID选择符</title> 6 <style type="text/css"> 7 #name 8 { 9 border:2px solid #4F87C2;10 width:200px;11 height:30px;12 }13 </style>14 </head>15 <body>16 <form action="#">17 文本框一:18 <input type="text" name="name" id="name"/>19 文本框二:20 <input type="text" name="address"/>21 </form>22 </body>23 </html>输出如下：
=================================================================================================================================
七.类选择符（Class Selectors）：
语法：E1.className
说明： 1.用于选择特定类选择符
2. 可以选择一个或以上的类选择符
3.区分大小写
例子：
1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>类选择符</title> 6 <style type="text/css"> 7 .myButton 8 { 9 border:2px solid #4F87C2;10 width:200px;11 height:30px;12 }13 </style>14 </head>15 <body>16 <form action="#">17 文本框一:18 <input type="text" name="name" class="myButton"/>19 文本框二:20 <input type="text" name="address" class="mybutton"/>21 </form>22 </body>23 </html>输出如下：
=================================================================================================================================
八.（选择符混合使用）选择符分组（Grouping）：
语法：E1.E2.E3
说明： 1.常见的有类型选择符与类选择符 ；格式:html元素名.类选择符名称,中间不能有空格
2.其它选择与包含选择符；最常见使用方式
例子：
1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>选择符混合使用</title> 6 <style type="text/css"> 7 p.bigFont 8 { 9 font-size:36px;10 font-family:"微软雅黑"；11 }12 p#colorFont13 {14 color:#FF0000;15 } 16 .div1 span, #div1 span, div div p17 {18 color:#FF00FF;19 font-weight:lighter;20 }21 </style>22 </head>23 <body>24 <p>普通文字<div>11</div></p>25 <p class="bigFont">放大文字</p>26 <div class="bigFont">div放大文字</div>27 <p id="colorFont">彩色字体</p>28 <div class="div1">29 <span>div中的span文字</span>30 </div>31 <div><div><p>子DIV中的段落文字</p></div></div>32 </body>33 </html>输出如下：
==============================================================================================================================================
常见的三种样式表：
一.内嵌样式表：内嵌样式表其实就是把样式放在
,,,,内部。
例子：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>内嵌样式表</title> 6 <head> 7 <!-- 定义在头部标签里面--> 8 <style type="text/css"> 9 p10 { font-family:"隶书";11 font-size:28px;12 color:#FF0000;13 }14 </style>15 </head>16 <body>17 <h1 id="静夜思">静夜思</h1>18 <h2 id="作者李白">作者李白</h2>19 <p>床前明月光，</p>20 <p>疑是地上霜.</p>21 <p>我是郭德刚，</p>22 <p>低头思故乡.</p>23 </body>24 </html>输出如下：
==============================================================================================================================================
二.行内样式表：其实就是把样式放在
,,,,,,,,内部。
例子：
1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>行内样式表</title> 6 </head> 7 <body> 8 <div style="float:right" > 9 <h1 id="静夜思">静夜思</h1>10 <h2 id="作者李白">作者李白</h2>11 <div style="font-family:'隶书';font-size:28px;color:#FF0000;">12 <p>床前明月光，</p>13 <p>疑是地上霜.</p>14 <p>我是郭德刚，</p>15 <p>低头思故乡.</p>16 </div>17 </div>18 </body>19 </html>
输出如下：
==============================================================================================================================================
三.链接外部样式表：样式放在链接的css/demo.css那个文档里，而链接放在
,,,,,,,,,,,内部。例子：
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>链接外部样式表</title> 6 <link href="css/demo.css" type="text/css" rel="stylesheet"/> 7 </head> 8 <body> 9 <h1 id="静夜思">静夜思</h1>10 <h2 id="作者李白">作者李白</h2>11 <p>床前明月光，</p>12 <p>疑是地上霜.</p>13 <p>我是郭德刚，</p>14 <p>低头思故乡.</p>15 </body>16 </html>
输出如下：
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
