css 选择器种类

  1. 类型选择器:选择某一种类型的所有元素.类型选择器是指不带小于号或大于号的元素名称.如:div,img等
  2. 类选择器:选择指定某个类的所有元素.类选择器的格式是英文句号后面加上类名.如:  .myclass{}
  3. id选择器:选择文档中指定id的所有元素.每一个元素只有一个id,而且必须在文档中保持唯一.
  4. 属性选择器:  
    1. 属性存在性选择器:可用于选择包含指定属性的元素.属性选存在性选择器的格式是总括号内加属性名.例如:p[title]可以选择所有含有title属性的p元素.有些浏览器不识别空属性如<p title=""></p>
    2. 属性单词选择器:可用于选择在指定属性中包含指定单词的元素.例如p[title~="mytitle"]能够选择title属性中包含单词mytitle的所有p元素单词之间必须有空格隔开,字符区分大小写.如<p title="this is mytitle"></p>
    3. 属性值选择器:可用于选择指定属性中包含指定的元素.属性值选择器.如p[title="#4 mytitle"]可以选择title属性值正好是#4 mytitle的所有p元素.字符区分大小写,必须包括空格在内完整的属性值
  5. 伪元素选择器:first-letter,first-line称之为伪元素选择器,因为他们只选择元素的一部分内容,而非元素的所有内容.换言之,他们创建了一个伪元素.如:p:first-line{},选择p元素下面的第一行内容.
  6. 伪类选择器:仅适用于超链接.a:hover,a:link,a:visited,a:active,a:focus.(css2.1定义了另外两个伪类选择器:fist-child,lang().css3又定义了nth-child(n-1)等伪类选择器,而且可以把伪类选择器用到除超链接外的其他标签上)
  7. 子类选择器:使用通配选择器,加一个点,加上基类名称,再加一个点.最后是子类名称,可以选择所有设置了基类的元素.这就睡串联类.串联类可以有无限个,建议基类在前,子类在后,串联类不必具有相关性,但是将他们按类和子类划分可以增加代码的逻辑性.如:.class.subclass.etc{}
时间: 2024-08-05 23:11:38

css 选择器种类的相关文章

css选择器种类

选择器种类 1.ID选择器 <div id="one"></div> #one{} 2.类选择器 <div class="one"></div> .one{} 3.标签选择器 <div>dsd</div> div{} 4.普遍选择器 *{} 所有的 div * div后代所有的元素 5.嵌套选择器 div.one <div class="one"></div

CSS、CSS2和CSS3选择器总结(全部选择器种类及其优先级)

选择器种类罗列: 1.基础的选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; } E 标签选择器,匹配所有使用E标签的元素 p { font-size:2em; } .info和E.info class选择器,匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:#ff0; } #info和E#info id选择器,匹配所有id属性等于footer的元

关于css选择器的一些事 第一章 基本选择器!

关于选择器,好多人小伙伴只用了最基本的几个选择器,感觉这玩意没有啥学的,讲道理,确实也没啥学的.但是,选择器种类掌握的越多,编写代码起来就会越轻松,为啥呢.举个例子吧!先上一串代码和效果,就知道我想表达什么了! 上面一个五列的li,代码如下 <style> *{margin:0;padding: 0;list-style: none} ul{display: flex} li{flex: 1;text-align: center;border-left: 1px solid red} li:n

详解CSS选择器、优先级与匹配原理【转】

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择

CSS —— 选择器

选择器种类 标签选择器 id选择器 类选择器 通配符 交集选择器 并集选择器 后代选择器 子代选择器 选择器设置样式优先级 默认样式 < 继承样式 < 通配符设置样式 < 标签选择器设置样式 < 类选择器设置样式 < id选择器设置样式 < 行内样式 < !important 选择器权重计算 1. 判断是否继承,若不是继承则进行下一步 2. (0.0.0.0) 第一个数表示当前选择器中important的个数 第二个数表示当前选择器中id选择器的个数 第三个数表示

导航栏布局时遇到的问题以及解决办法 css选择器优先级

得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下效果 或者可以使用第二种方法 #menu ul li{ float:left; margin-left:10px;text-align:center;padding-left:10px;实现列表项文字的居中 line-height:28px; height:28px; width:40px; bor

CSS选择器及其优先级

一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="MyCss.css" type="text/css" rel="stylesheet"> </head> &l

转------详解CSS选择器、优先级与匹配原理

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标签

详解CSS选择器、优先级与匹配原理

最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器: 顾名思议,标签选择器是直接将HTML标签作为CSS选择器,可以是p.h1.dl.strong等HTML标签.如: p{font:12px;} em{color:blue;} dl{float:left;margin-top:10px;} 二.id选择器: 我们通常