CSS选择器列表

h1 类型选择器 选择元素的一个类型
.className 类选择器 以class属性的值来选择元素,可以在一个页面中出现多个
#idName ID选择器 以id属性的值来选择元素,在页面中是唯一的,只能出现一次
article h2 后代选择器 选择指定祖先元素内的后代元素
article > h2 子元素选择器 选择指定父元素内的直接子元素
h2 ~ p 相邻兄弟选择器 选择第一个元素后的兄弟元素,两者拥有相同的父元素
h2 + p 子元素选择器 选择第一个元素后紧跟的元素,两者拥有相同的父元素
a[target] 目标属性选择器 选择一个存在某属性的元素
a[href="http://google.com/"] 属性均等选择器 选择一个属性值匹配特定值的元素
a[href*="login"] 属性包含选择器 选择一个属性值包含特定值的元素
a[href^="https://"] 属性开头选择器 选择一个属性值以特定值开头的元素
a[href$=".pdf"] 属性结尾选择器 选择一个属性值以特定值结尾的元素
a[rel~="tag"] 属性间隔选择器 选择一个属性值被空白分割成多个单词,且其中一个单词匹配给定值的元素
a[lang|="en"] 属性连接符选择器 选择一个属性值被连接符分割成多个单词,且其中一个单词匹配给定值的元素
a:link 链接(link)伪类 选择一个用户没有访问过的链接
a:visited 链接(link)伪类 选择一个用户访问过的链接
a:hover 行为性伪类 选择一个用户将鼠标指针悬浮在上方的元素
a:active 行为性伪类 选择一个用户使用中的元素
a:focus 行为性伪类 选择一个拥有用户焦点的元素
input:enabled 状态性伪类 选择一个处于可编辑状态(默认)下的元素
input:disabled 状态性伪类 选择一个通过设置disabled属性而处于不可编辑状态下的元素
input:checked 状态性伪类 选择一个被选中的单选或者复选按钮
input:indeterminate 状态性伪类 选择一个处于不确定状态下的单选或者复选按钮(可能被选中或者不被选中)
li:first-child 结构性伪类 选择父元素下的第一个子元素
li:last-child 结构性伪类 选择父元素下的最后一个子元素
div:only-child 结构性伪类 如果某个元素是它父元素中惟一的子元素,那么将会被匹配
p:first-of-type 结构性伪类 选择父元素中同类型的第1个子元素
p:last-of-type 结构性伪类 选择父元素中同类型的最后一个子元素
img:only-of-type 结构性伪类 若元素为父元素中同类型的唯一元素,则会被匹配
li:nth-child(2n+3) 结构性伪类 当父元素中子元素的序列匹配所给数字时会被选中,会以文档树开头作为起点,来计算所有元素
li:nth-last-child(3n+2) 结构性伪类 当父元素中子元素的序列匹配所给数字时会被选中,会以文档树开头作为起点,来计算所有元素
p:nth-of-type(3n) 结构性伪类 当父元素中子元素的序列匹配所给数字时会被选中,会以文档树开头作为起点,只计算文档树中给定类型的元素
p:nth-last-of-type(2n+1) 结构性伪类 当父元素中子元素的序列匹配所给数字时会被选中,会以文档树开头作为起点,只计算文档树中给定类型的元素
section:target 目标伪类 选择URI片段标示符的值指向的元素
div:empty 空伪类 选择没有任何子元素或者文本的元素
div:not(.awesome) 否定伪类 选择不匹配某个状态标示符的元素
.alpha:first-letter 文本伪元素 选择元素内文本的第一个字母
.bravo:first-line 文本伪元素 选择元素内文本的第一行
div:before 生成的内容 在被选择元素前创建伪元素
a:after 生成的内容 在被选择元素末尾创建伪元素
::selection 片段伪元素 选择通过用户操作所选定或者高亮的部分
时间: 2024-10-24 15:04:41

CSS选择器列表的相关文章

CSS选择器总结

最近在www.w3school.com.cn学习了CSS选择器,下面做一个知识汇总.部分源码来自www.w3school.com.cn! 插入样式表的方法有三种: 第一种:外部样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 第二种:内部样式表 <head> <style type=&

这 30 类 CSS 选择器,你必须理解!

CSS 选择器是一种模式,用于选择需要添加样式的元素.平时使用最多也是最简单的就是 #id..class 和标签选择器,在 CSS 中还有很多更加强大更加灵活的选择方式,尤其是在 CSS3 中,增加了很多新的选择器,使得选择元素更加便捷,所以必须理解这些选择器,只有先理解了,多用几次,自然而然就记住了. 1.* [CSS2] 通配符,选择页面所有元素. 1 *{ 2 margin:0; 3 padding:0; 4 } 上面代码的作用是把页面上所有元素的内外边距设置为 0,这是最基本的清除默认 

CSS选择器详细总结

一.基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #footer id选择器,匹配所有id属性等于footer的元素 实例: * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } p.info { background:#ff0; } p.in

导航栏布局时遇到的问题以及解决办法 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

js,jq,css选择器

js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个兄弟节点 var ps=s.previousSbiling; //得到s的上一个兄弟节点 var fc=s.firstChild; //获得s的第一个子节点 var lc=s.lastChile; //获得s的最后一个子节点 css选择器: 基础选择器 * 通用元素选择器,匹配页面任

1.3 基本CSS选择器

一.标记选择器 二.类别选择器 三.ID选择器 选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器进行控制的.用户只需要通过选择器对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. 为了理解选择器的概念,可以用“地图”作为类比.在地图上都可以看到一些“图例”,比如河流用蓝色的线表示,某公路用红色的线表示,省会城市用黑色圆点表示,等等.本质上,这就是一种“内容”与“表现形式”对应关系.在网页上,也同样存在着这样的对应关系,例如

30个最常用css选择器解析(转自大范甘迪)

你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的margin和padding设置为0. *选择符也可以在子选择器中使用. #container * { border: 1px

HTML 学习笔记 CSS(选择器3)

CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有href属性的锚应用样式 a[herf] {color: red} 例子3还可以根据多个属性进行选择 只需将属性选择器链接在一起就可以 a[href][title] {color:red} 例子4 可以采用一些创造性的方法来使用这个特性 例如,可以对所有带有 alt 属性的图像应用样式,从而突出显示

CSS选择器、CSS hack及CSS执行效率

主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与匹配原理     CSS选择器大概可以分为:1.id选择器(#myid)  2.类选择器(.myclassname)  3.标签选择器(div,h1,p)  4.相邻选择(h1+p)6.后代选择器(li a)7.通配符选择器(*)  8.属性选择器(a[rel='externaml']) 9.伪类选