一.通配选择符(universal selector):
语法：*
说明：1.*表示通配符,表示所有的
2.格式:*{样式列表}
3.用于整个页面或网站字体、边距、背景等
例子：除了规定p标签内包含的元素使用p大括号内指定的样式，其它的都使用*大括号内指定的样式。
<!doctype html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>通配选择符</title><style type="text/css">*{/**定义网页中所有元素字体、边距样式*/ margin:0px; font-size:28px; font-family: "华文彩云";}div *{/**定义div中所有元素字体、边距样式*/margin:10px;color:#ff0000;}</style></head> <body>普通文本<p>段落文本</p><span>span内联文本</span><div>div文本 <div>div子div元素中的文本</div> <p>div中段落文本</p> <span>div中span内联文本</span></div></body></html>
输出如下：
二. 类型选择符（type selectors）：
语法：e1
说明：1.类型选择符用于设定特定html元素样式
2.元素名称不区分大小写
3.格式:html元素名{样式列表}
例子：p指定了大括号内的样式，那么下面标签类型为p的都是用它的样式；同理下面的p也是。
<!doctype html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>类型选择符</title><style type="text/css">p{font-size:1cm;font-style:oblique;}div{color:#ffff00;font-family:"方正黄草简体";font-size:1in;}</style></head><body><p>类型选择符</p><div>类型选择符</div></body></html>
输出如下：
三.属性选择符（attribute selectors）：
语法：1. e1[attr]
2. e1[attr=value]
3. e1[attr~=value]
4. e1[attr|=value]
说明：用于定义特定属性值的html元素样式.
例子：我们看到下面的例子里面第一个属性为type的，那么下面属性为type的就使用它指定的样式，同理button，有的人就问了，在button的前面不是也有type类型的吗，在这种情况下，取后面的标签样式，等同于覆盖了同括号内前面的type，后来者居上。
<!doctype html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>属性选择符</title><style type="text/css">input[type]{border:2px solid #e81d2b;}input[name='button']{border:1px solid #868686;height:25px;width:60px;}</style></head><body><form action="#"><div>用户名:<input type="text" name="name"/></div><div>密码:<input type="password" name="password"/></div><div>确认密码:<input type="password" name="confirmpwd"/></div><div>电子邮箱:<input type="text" name="email"/></div><div><input type="submit" value="用户注册" name="button"/> <input type="reset" value="重新填写" name="button"/></div></form></body></html>
输出如下：
四.包含选择符（descendant selectors）：
语法：e1 e2
说明：1.用于子元素对父元素样式的扩展
2. 格式:父选择符子选择符{样式列表}
3.注意html元素包含关系
例子：包含选择符简单，如下面的span是包含在p内的，但是span里面的元素选择的就是p p span 指定的样式，p里面的元素选择的就是p p 指定的元素，这就是就近原则：
<!doctype html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>包含选择符</title><style type="text/css">div p{font-size:32px ;font-weight:lighter;}div p span{color:#ff0000 ;text-shadow: 20px 10px 2px #e81d2b; }</style></head><body> <p>包含选择符</p> <div> <p> 包含选择符 <span>包含选择符</span> </p> </div></body></html>
输出如下：
五.子对象选择符（child selectors）：
语法：e1>e2
说明：1.用于子对象元素对父对象元素样式扩展
2. 格式:父对象选择符>子对象html元素名称{样式列表}
3.注意和包含选择符的区别
4.使用情况较少,通常可以用包含选择符取代
例子：子对象选择符其实和原本标签使用顺序没有什么变化，如<ul><li>,,,</li></ul>. li里面定义的是什么样式，那么下面的<li>里面的内容就是什么的样式.
<!doctype html ><html ><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>子对象选择符</title><style type="text/css">/**常用子对象选择符table>tbody>tr>tdul>liol>lidiv>子divdl>dtdl>ddform>input*/ul > li{font-size:18px;color:#4f87c2;}table>td{font-style:italic;font-weight:bolder;}dl>dd{font-weight:bolder;}div >div{font-weight:bolder;}form> input{border:2px solid #4f87c2;}</style></head><body>水果列表<ul ><li>香蕉</li><li>苹果</li><li>桃子</li></ul><table > <tr> <td>单元格一</td> <td>单元格一</td> </tr></table>三大球类运动<dl> <dt>足球</dt> <dd>全世界第一大球类运动</dd> <dt>篮球</dt> <dd>全世界第二大球类运动</dd> <dt>排球</dt> <dd>全世界第三大球类运动</dd></dl><div>第一层div<div>第二层div</div></div><form><input type="button" value="普通按钮"/></form></body></html>
输出如下：
六.id选择符（id selectors）：
语法：#sid
说明：1.用于定义唯一id属性值元素样式
2. 格式:#选择符名称{样式列表}
3.选择符名称必须和元素id属性值完成相同,且区分大小写
例子：id选择符标签以#开头，那么下面id的内容和#后面相同的就使用该定义下的样式，如name。
<!doctype html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>id选择符</title><style type="text/css">#name{border:2px solid #4f87c2;width:200px;height:30px;}</style></head><body><form action="#"> 文本框一: <input type="text" name="name" id="name"/> 文本框二: <input type="text" name="address"/></form></body></html>
输出如下：
七.类选择符（class selectors）：
语法：e1.classname
说明： 1.用于选择特定类选择符
2. 可以选择一个或以上的类选择符
3.区分大小写
例子：以点.开头的标签定义下的样式，下面class后面的内容和前面点后面的一样的话就使用该样式。
<!doctype html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>类选择符</title><style type="text/css">.mybutton{border:2px solid #4f87c2;width:200px;height:30px;}</style></head><body><form action="#"> 文本框一: <input type="text" name="name" class="mybutton"/> 文本框二: <input type="text" name="address" class="mybutton"/></form></body></html>
输出如下：
八.（选择符混合使用）选择符分组（grouping）：
语法：e1.e2.e3
说明： 1.常见的有类型选择符与类选择符 ；格式:html元素名.类选择符名称,中间不能有空格
2.其它选择与包含选择符；最常见使用方式
例子：顾名思义就是混乱在一起使用，规则还是那样。
<!doctype html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>选择符混合使用</title><style type="text/css">p.bigfont{font-size:36px;font-family:"微软雅黑"；}p#colorfont{color:#ff0000;} .div1 span, #div1 span, div div p{color:#ff00ff;font-weight:lighter;}</style></head><body><p>普通文字<div>11</div></p><p class="bigfont">放大文字</p><div class="bigfont">div放大文字</div><p id="colorfont">彩色字体</p><div class="div1"><span>div中的span文字</span></div><div><div><p>子div中的段落文字</p></div></div></body></html>
输出如下：
常见的三种样式表：
一.内嵌样式表：内嵌样式表其实就是把样式放在<head>,,,,</head>内部。
例子：
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>内嵌样式表</title><head><!-- 定义在头部标签里面--><style type="text/css">p{ font-family:"隶书"; font-size:28px; color:#ff0000;}</style></head><body><h1>静夜思</h1><h2>作者李白</h2><p>床前明月光，</p><p>疑是地上霜.</p><p>我是郭德刚，</p><p>低头思故乡.</p></body></html>
输出如下：
二.行内样式表：其实就是把样式放在<body>,,,,,,,,</body>内部。
例子：
<!doctype html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>行内样式表</title></head><body><div style="float:right" > <h1>静夜思</h1> <h2>作者李白</h2> <div style="font-family:'隶书';font-size:28px;color:#ff0000;"> <p>床前明月光，</p> <p>疑是地上霜.</p> <p>我是郭德刚，</p> <p>低头思故乡.</p> </div></div></body></html>
输出如下：
三.链接外部样式表：样式放在链接的css/demo.css那个文档里，而链接放在<head>,,,,,,,,,,,</head>内部。
例子：
<!doctype html ><html><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>链接外部样式表</title><link href="css/demo.css" type="text/css" rel="stylesheet"/></head><body><h1>静夜思</h1><h2>作者李白</h2><p>床前明月光，</p><p>疑是地上霜.</p><p>我是郭德刚，</p><p>低头思故乡.</p></body></html>
输出如下：
相关推荐：
css 选择符
css的子代选择符
以上就是css选择符有哪些？css选择符的全面总结（附代码）的详细内容。