您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

css选择符有哪些?css选择符的全面总结(附代码)

2025/6/26 7:44:44发布7次查看
css选择符有哪些?css基本的选择符包括通配选择符、类型选择符、属性选择符、id选择符、类选择符、包含选择符和子对象选择符,还有一个特别的是选择符混用,接下来我们就分别的来看一看这几种选择符。
一.通配选择符(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"/>&nbsp;<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选择符的全面总结(附代码)的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product