[导读] id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 " " 来定义。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： red {color:reid 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#red {color:red;}#green {color:green;}下...
1 . 样式表 Cascading Style Sheet css优势： 内容与表现分离 网页的表现统一，容易修改 丰富的样式，使网页布局更加灵活 减少网页代码量，增加网页的浏览速度，节省网络带宽 使用独立于网页的CSS，有利于网页被搜索引擎收录 嵌入ID>外部ID>嵌入class>外部class>嵌入标签>外部标签 1.1 引入方式 四种 style="" 行内样式表 <style> 内部样式表 <link rel="stylesheet" href="" /> 外部样...
一、代码<style>ul{list-style: none}p ul li{width:100px;height:30px;border:#eee 1px solid;float:left;}p ul li:nth-child(1){background:#f00;}p ul li:nth-child(3){background:#ccc;}</style> <p> <ul> <li>11</li> <li>22</li> <li>33</li> </ul></p>二、预览效果如上图，ie9及以上背景色能显示问题：如上图，ie8背景色显示不出来三、解决方法<style> ul{list-style: none} p ul li{width:1...
这篇文章主要介绍了CSS3的first-child选择器实战攻略,包括first-child和:first-of-child的区别以及针对IE兼容问题的讲解,需要的朋友可以参考下CSS 中的 :first-child Selector 可以选择到特定元素的第一组物件(同一个 parent)HTML<ul><li>1</li><li>2</li><li>3</li> </ul> <hr> <ul><li>1</li><li>2</li><li>3</li> </ul>CSS// 只套用编号 1 的 li li:first-child { color: green; }first-child和:first-of-child的区别假...
css3属性符号选择器:<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>css3属性选择器</title><style>[id*=div]{color:red;/*id包含div的*/}[id^=div]{color:#0000ff;/*id首字符为div的*/}[id$=div]{color:green;/*id结束符为div的,数字前加上\*/}</style> </head> <body> <div id="div">测试文字</div> <div id="div1">测试文字</div> <div id="di">测试文字</div> <div id="mydiv">测试文字</div> </body> </html>css...
这篇文章详解css3类选择器之结合元素选择器和多类选择器用法css3类选择器之结合元素选择器和多类选择器用法:<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Title</title><style>.p2{font-size:30px;}/*结合元素选择器*/p.p1{color:rebeccapurple;}/*多类选择器*/.p1.p2{font-style: italic;}</style> </head> <body><div>看我</div><p>我就是我</p><p>我是一段文字</p><p class="p1 p2">我还是斜体字</p> </body> </...
特殊性是什么在对一个HTML元素应用CSS样式时，常常有很多种方法可以找到元素，比如：<p id="container" class="wrap_sty"> <p class="pra">这是一个段落</p> </p> <style> #container p { color:red } p p { color:green } p { color:yellow } </style>可见，如果要作用到一个HTML元素的方法有很多，远远不止这些。那么如果一个元素被应用了很多同样的样式，最终会显式到哪一个样式呢？CSS对于多个选择器的优先性...
在css3中，我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称语法@keyframes animationname {keyframes-selector {css-styles;}}值描述animationname必需。定义动画的名称。keyframes-selector必需。动画时长的百分比。在css3中，我们以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。其中，0% 是动画的...
零、概览CSS2支持的属性选择器用一个表达式[{属性 | 属性 {= | |= | ~=} 值}]1.[class="a"]只能匹配class="a"的元素2.[class~="a"]则可以匹配class="a"、class="a b"的元素3.[lang|=en]则可以匹配lang="en"、lang="en-us"的元素。CSS3新增*=、^=、$=三种匹配方式[{属性 | 属性 {*= | ^= | $=} 值}]：1.*=表示模糊匹配，[href="163"]可以匹配href="163.com"、href="mail.163.com"等元素；2.^=表示以指定字符开头，[href^="/"]则匹配...
1.[class~="flower"]：选中有flower的class class="flower ss" class="ss flower"2.[class|=top]：选择以top为top开头的class需要有—相连 或者单独的top class="top-ss" class="top" class="top-ss"//选不中3.[class^="top"]: 选中以top为开头的不管有没有特殊符号相连，单独的top也可以 class="top-ss" class="topss"4.[class$="top"]: 选中以top为结束的class,单独的top也行 class="mytop" class="m...
基础来看一个后代选择器的最简单写法，strong标签属于p标签的后代，i标签属于strong标签后代：HTML代码：<p>my name is <strong>li<i>daze</i></strong>, hahah. </p>CSS代码：p strong { font-size: 30px; } p i { font-size: 40px; }1、在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。2、选择器之间的空格是一种结合符。3、后代选择器，后代的层次间隔可以是无限的，注意与子元素选择器...
（一）CSS选择器： 1.标签选择器：通过HTML的标签名直接选择该标签 2.类选择器：通过.选择器的名称{} 来对添加了class属性的标签进行选中 3.ID选择器：通过#选择器的名称{} 来对添加了ID属性的标签进行选择，ID是在HTML文档中唯一的 4.通用选择器：通过*{}来选择HTML文档中所有的标签 5.后代选择器： 选择器1（空格）选择器2 来选择一个标签中对应的所有子标签 ...
说到选择器大家都不陌生，估计用的最多的还是id选择器和类选择器，至于其他的选择器，今天在这里我避而不谈。类选择器：将html元素取一个响亮的名字，用class来标记，就可以使用类选择器了，如<p class="p1">这是段落1</p>,这里我将p元素class设置为"p1",然后再写css样式就可以直接使用了，举个栗子：<style type="text/css">p.p1{color:red;}</style></head><body><p class="p1">This paragraph will also be center-aligned.</p>...
CSS3 基本选择器为了更好的说明问题，先创建一个简单的DOM结构，如下：<div class="demo"> <ul class="clearfix"> <li id="first" class="first">1</li> <li class="active important">2</li> <li class="important items">3</li> <li class="important">4</li> <li class="items">5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li id="last" class="last">10</li> </ul> </div>一、通配符选择器（＊） 通配符选择器是用来...
selector :first-child 这个是后代选择器. 怪异, 注意避免而不是理解.selector:first-child 当前 selector 选中的元素集合中的第一个元素selector:last-child当前 selector 选中的元素集合中的最后一个元素.但是有问题, :last-child 不生效.应该是:1 当前 selector 的父元素 parent2 parent所有子元素, [a,b,c]3 子元素的集合的第一个元素, 如果是 selector4 设置样式, 生效. **if(selecor.parent.childElementList.firstElement ...