css3部分选择器整理

摘要:
整理一些选择器,以加深印象,并理解标记选择器body{}表示主体标记类选择器ClassName{}表示类名为ClassName#idName的所有标记id选择器{}}表示id为idName P的所有标记属性选择器[id=“yt”]{}代表所有P个标记,所有P标签的id属性为yt P[id^=“yt”]{}的标签属性选择器表示所有P标签,所有P标签id属性为ytP[id的标签属性选择符$
整理些选择器,加深印象和理解

标签选择器 body{}  表示body标签
类选择器 .className{} 表示类名class为className的所有标签

id选择器 #idName{} 表示id为idName的所有标签



属性选择器 P[id="yt"]{} 表示所有P标签,且P标签的id属性为yt的所有标签

属性选择器 P[id^="yt"]{} 表示所有P标签,且P标签的id属性以yt开头的所有标签

属性选择器 P[id$="yt"]{} 表示所有P标签,且P标签的id属性以yt结尾的所有标签

属性选择器 P[id*="yt"]{} 表示所有P标签,且P标签的id属性中有yt的所有标签



根选择器 :root{}  相当于整个html的所有标签

否定选择器  div:not([id="yt"]){} 表示所有div标签中出去id为yt的标签

空选择器   P:empty{}  表示不含有任何内容的P标签(内容包括空格)

目标选择器 <a href="#toP">hello</a>

               <p id="toP"></p>

               #top:target{color:red}

               当单击hello时定位到页内toP段落位置,并改变颜色为red

多层子标签选择器 ul li{}  表示选择ul下的所有li标签  li可以是子标签 或者是孙子标签等
子标签ul
>li{} 选择ul标签下的所有li子标签 只包含子标签 首标签选择器 ul>li:first-child{} 表示从ul中选出所有li标签,再从所有li标签中选择第一个标签 尾标签选择器 ul>li:last-child{} 表示从ul中选出所有li标签,再从所有li标签中选择最后一个标签 任意标签选择器 ul>li:nth-child(2n+3) 表示(n始终从0开始)3 5 7....等标签(第一个标签序号为1 不是0) 任意标签选择器 ul>li:nth-last-child(2n+1) 表示从末尾开始计算标签 父元素下某一类标签的第一个标签 div>p:first-of-type{} 父标签下某一类标签的最后一个标签 div>p:last-of-type{} 父标签下某一类标签中选择部分标签 div>p:nth-of-type(2n+1){} 同上,从后向前计数 div>p:nth-last-of-type(2n+1){} .className p:only-of-type{} 表示className类中只有一个p标签的话就选中这个P标签 li:only-child 表示li是其父标签的唯一子标签,就选中这个li标签 可用选择器 input[type="text"]:enabled{} 表示选择输入框为可用的标签 不可用选择器 input[type="text"]:disabled{} 表示选择输入框为不可用的标签 选中文本选择器 ::selection{} 当选中文本时可以改变选中文本的样式 只读选择器 textarea:read-only{} 表示选择属性为只读的textarea标签 非只读选择器 textarea:read-write{} 表示属性为非只读的textare标签(与上一个相反) 前后标签 ::before ::after 表示在前后添加内容

免责声明:文章转载自《css3部分选择器整理》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Ubuntu12.10安装多个Mysql5.5实例(一)前端常用框架知识点收集!下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

webpack4 css添加浏览器前缀 postcss-loader

自动添加浏览器前缀 ,我们这里使用postcss-loader 首先 cnpm install --save-dev postcss-loader autoprefixer 我这里用的cnpm ,npm也可以下载 接下来是配置 在网上查了相关文档发现需要新建一个 postcss.config.js 文件来对 postcss-loader 配置。 第一种配置...

css设置文字多余部分显示省略号

如果只显示一行,则可以使用以下方法:   overflow: hidden;   text-overflow:ellipsis;   white-space: nowrap; 如果需要显示多行,在需要设置的元素style中添加以下代码:   word-break: break-all;   text-overflow: ellipsis;  ...

CSS实例:翻转图片、滚动图片栏、打开大门

CSS 翻转图片主要用到的技术除了3D翻转和定位 ,还用到了一个属性 backface-visibility:visable|hidden;该属性主要是用来设定元素背面是否可见。 效果图如下: 具体的步骤如下: 1、写出页面主体, <div> <img src="http://t.zoukankan.com/Image...

解决初次使用webpack+antd-mobile时css不生效的问题

前端这块,最火的是angular、react、vue。根据你具体的业务场景,选择合适的框架或者类库。以react为例,新建一个项目时, css组件按钮,图片轮播等组件,最好不要重复造轮子,选择业内规范的,拿来用就行。这里选了一个比较火的antd-mobile。类似移动端的 bootstrap,但是UI组件要比bootstr强大丰富,且专注于结合react使...

语法高亮插件SyntaxHighlighter的使用教程

首先到这里下载其源码。里面东西挺多的,我们基本上可以把它放到两个文件夹就是。其中shCore.js与shCore.js与clipboard.swf放到js文件夹中,shCore.css还有另一个CSS文件(随你挑一个吧)与所有图片放到style文件夹中。如果你想高亮html或xml代码,那么就在js多放一个shBrushXml.js,如果要高亮javascr...

学习 | css3实现进度条加载

进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验。 进度条的的实现分为3大部分:1、页面布局,2、进度条动效,3、何时进度条增加。 文件目录 加载文件顺序 <link rel="stylesheet/less" href="http://t.zoukankan.com/index.less"> <script src="...