分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

CSS选择符-----元素选择符

发布时间:2023-09-06 02:25责任编辑:苏小强关键词:CSS

   通配选择符(*)

          选定所有对象

  • 通配选择符(Universal Selector)
  • 通常不建议使用通配选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????*{ ???????????????color: #FF0000; ???????????????font-weight: bold; ???????????} ???????</style> ???</head> ???<body> ???????<div> ???????????<p>第一个段落。</p> ???????????<p>第二个段落。</p> ???????????<ul> ???????????????<li>Java</li> ???????????????<li>C#</li> ???????????</ul> ???????</div> ???</body></html>

   类型选择符(Element)

          以文档语言对象类型作为选择符

  • 类型选择符(Type Selector)
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????p{ ???????????????color: #FF0000; ???????????????font-weight: bold; ???????????} ???????</style> ???</head> ???<body> ???????<div> ???????????<p>第一个段落。</p> ???????????<p>第二个段落。</p> ???????????<ul> ???????????????<li>Java</li> ???????????????<li>C#</li> ???????????</ul> ???????</div> ???</body></html>

   ID选择符(Element#ID)

          以唯一标识符id属性等于myid的E对象作为选择符

  • ID选择符(ID Selector)
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????#language{ ???????????????color: #FF0000; ???????????????font-weight: bold; ???????????} ???????</style> ???</head> ???<body> ???????<div> ???????????<p>第一个段落。</p> ???????????<p>第二个段落。</p> ???????????<ul id="language"> ???????????????<li>Java</li> ???????????????<li>C#</li> ???????????</ul> ???????</div> ???</body></html>

   类选择符(Element.class)

          以class属性包含myclass的E对象作为选择符

  • 类选择符(Class Selector)
  • 不同于ID选择符的唯一性,类选择符可以同时定义多个
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????.a{ ???????????????color: #0000FF; ???????????} ???????????.b{ ???????????????font-weight:bold; ???????????????font-size: x-large; ???????????} ???????</style> ???</head> ???<body> ???????<div> ???????????<p>第一个段落。</p> ???????????<p>第二个段落。</p> ???????????<ul class="a b"> ???????????????<li>Java</li> ???????????????<li>C#</li> ???????????</ul> ???????</div> ???</body></html>

CSS选择符-----元素选择符

原文地址:https://www.cnblogs.com/fengfuwanliu/p/10095510.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved