CSS选择器比较常用的方法 |
您所在的位置:网站首页 › css选择器最常用的类型有 › CSS选择器比较常用的方法 |
CSS选择器比较常用的方法_CSS选择器有什么方法
![]() 就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等。下面由学习啦小编为大家整理的CSS选择器的方法,希望大家喜欢! CSS选择器的方法 一、基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #footer id选择器,匹配所有id属性等于footer的元素 实例: CSS Code复制内容到剪贴板 * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } p.info { background:#ff0; } p.info.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器 序号 选择器 含义 5. E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 6. E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 7. E > F 子元素选择器,匹配所有E元素的子元素F 8. E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 实例: CSS Code复制内容到剪贴板 div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; } 三、CSS 2.1 属性选择器 序号 选择器 含义 9. E[att] 匹配所有具有att属性的E元素,不考虑它的值 10. E[att=val] 匹配所有att属性等于“val”的E元素 11. E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 12. E[att|=val] 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值 以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等 实例: CSS Code复制内容到剪贴板 p[title] { color:#f00; } div[class=error] { color:#f00; } td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类 序号 选择器 含义 13. E:first-child 匹配父元素的第一个子元素 14. E:link 匹配所有未被点击的链接 15. E:visited 匹配所有已被点击的链接 16. E:active 匹配鼠标已经其上按下、还没有释放的E元素 17. E:hover 匹配鼠标悬停其上的E元素 18. E:focus 匹配获得当前焦点的E元素 19. E:lang(c) 匹配lang属性等于c的E元素 实例: CSS Code复制内容到剪贴板 p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: "201D" "201D" "2019" "2019"; } 五、 CSS 2.1中的伪元素 序号 选择器 含义 20. E:first-line 匹配E元素的第一行 21. E:first-letter 匹配E元素的第一个字母 22. E:before 在E元素之前插入生成的内容 23. E:after 在E元素之后插入生成的内容 实例: CSS Code复制内容到剪贴板 p:first-line { font-weight:bold; color;#600; } .preamble:first-letter { font-size:1.5em; font-weight:bold; } .cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; } a:link:after { content: " (" attr(href) ") "; } CSS 3选择器的方法 一、CSS 3的同级元素通用选择器 序号 选择器 含义 1.E ~ F 匹配任何在E元素之后的同级F元素 实例:序号 选择器 含义 2 E[att^=”val”] 属性att的值以"val"开头的元素 3 E[att$=”val”] 属性att的值以"val"结尾的元素 4 E[att*=”val”] 属性att的值包含"val"字符串的元素 CSS Code复制内容到剪贴板 p ~ ul { background:#ff0; } 二、CSS 3 属性选择器 实例: C# Code复制内容到剪贴板 div[id^="nav"] { background:#ff0; } 三、CSS 3中与用户界面有关的伪类 序号 选择器 含义 1 E:enabled 匹配表单中激活的元素 2 E:disabled 匹配表单中禁用的元素 3 E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素 4 E::selection 匹配用户当前选中的元素 实例: CSS Code复制内容到剪贴板 input[type="text"]:disabled { background:#ddd; } 四、CSS 3中的结构性伪类 序号 选择器 含义 1 E:root 匹配文档的根元素,对于HTML文档,就是HTML元素 2 E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1 3. E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1 4 E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素 5 E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素 6 E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1) 7 E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1) 8 E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1) 9 E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child 或 :nth-child(1):nth-last-child(1) 10.only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type 或 :nth-of-type(1):nth-last-of-type(1) 11:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素 实例: CSS Code复制内容到剪贴板 p:nth-child(3) { color:#f00; } p:nth-child(odd) { color:#f00; } p:nth-child(even) { color:#f00; } p:nth-child(3n+0) { color:#f00; } p:nth-child(3n) { color:#f00; } tr:nth-child(2n+11) { background:#ff0; } tr:nth-last-child(2) { background:#ff0; } p:last-child { background:#ff0; } p:only-child { background:#ff0; } p:empty { background:#ff0; } 五、CSS 3的反选伪类 序号 选择器 含义 E:not(s) 匹配不符合当前选择器的任何元素 实例: CSS Code复制内容到剪贴板 :not(p) { border:1px solid #ccc; } 六、CSS 3中的 :target 伪类 序号 选择器 含义 E:target 匹配文档中特定"id"点击后的效果 关于选择器使用的一些建议 CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面的渲染速度,缩短页面呈现时间。 Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序: 1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul < li)6.后代选择器(li a)7.通配符选择器(*)8.属性选择器(a[rel="external"])9.伪类选择器(a:hover,li:nth-child) CSS如何实现文字竖排 1. writing-mode(设置对象书写方向) 语法:writing-mode : lr-tb、tb-rl 参数:lr-tb:从左向右,从上往下 tb-rl:从上往下,从右向左 示例: CSS Code复制内容到剪贴板 div { writing-mode: tb-rl; } 2. text-align(设置对象中文本的对齐方式) 语法:text-align : left、right、center、justify 参数:left:左对齐 right:右对齐 center:居中 justify:两端对齐 示例: CSS Code复制内容到剪贴板 div { text-align : center; } 而通常普通的排版思路:对文字对象宽度设置只能排下一个文字的宽度距离,让文字一行排不下两个文字使其文字自动换行,就形成了竖立排版需求。 CSS选择器比较常用的方法_CSS选择器有什么方法 就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等。下面由学习啦小编为大家整理的CSS选择器的方法,希望大家喜欢! CSS选择器的方法 一、基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹 推荐度:![]() ![]() ![]() ![]() ![]() 上一篇:CSS浏览器有什么好的方法_CSS浏览器有哪些方法 下一篇:CSS元素有哪些重要的定位方法_CSS元素定位有什么方法 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |