通配符选择器 通配选择器的作用就是对页面上所有的元素都生效， 页面上的所有标签都会展示出通配符选择器设定的样式。 这样的弊端就是影响网页渲染的时间。所以不推荐直接使用通配符选择器 取代写法就是 把需要统一设置的元素放在一起，通过 [分组选择器] 一次性设置。 对于初学者，不用过于在于网页打开速度以及性能问题，对于什么时候使用 通配符选择器呢？在你需要的时候直接用就可以。其实也就下面这段代...
最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法，觉得十分实用，就自己尝试了一下，并把它给记录下来： 这是最基本的样式：1 2 li{3 list-style-type: none;4 float: left;5 width: 60px;6 height: 60px;7 background-color: #979698;8 margin-left: 10px;9 text-align: center; 10 line-height: 60px; 11 border-radius: 50%; 13 ...
在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器，和伪类选择器，当是并没有做案例的研究，本想在那篇文章里面写，但想想如果把案例都写在那篇文章里面，对于查找来说就不是很方便，所有另开一篇来讲实例。属性选择器 [title]:选择带有title属性的元素[title=hello]:选择属性是title并且值是hello的元素[title~=hello]:选择属性是title并且部分值是hello的元素，hello需要是单独的值，以空格分开[title*=hello]:选择属性是t...
属性选择器[title]:选择带有title属性的元素[title=hello]:选择属性是title并且值是hello的元素[title~=hello]:选择属性是title并且部分值是hello的元素，hello需要是单独的值，以空格分开[title*=hello]:选择属性是title并且其中包含了hello的元素[title|=hello]:选择属性是title并且值是以hello开头并且允许hello后面以-的任意字符[title^=hello]:属性以hello开头的任意字符[title$=hello]:属性以hello结束的任意字符[title^=hel...
伪对象选择器包含三种，分别为：E::selectionE::afterE::before 其中before和after必须与content结合使用，如果content想用几何图形要加 \ 进行转义，content里面的内容相当于文字，可以通过color改变颜色，font-size改变大小 等等。 其书写方式为： #E::before{ content:"\25C0";//获取的方法 color: rgba(254, 0, 0, 0.6);//可以改变它的颜色 font-size: 20px;//可以改变它的大小 position: relative; left: -29p...
1、给导航加分割线，左右.nav li::before,.nav li::after{content:"";position:absolute;top:14px;height:25px;width:1px; }.nav li::before{left:0;background:-webkit-linear-gradient(to bottom,#f06254,#ffffff,#f06254);background:-moz-linear-gradient(to bottom,#f06254,#ffffff,#f06254);background:-o-linear-gradient(to bottom,#f06254,#ffffff,#f06254);background:-ms-linear-gradient(to bottom,#f06254,#ffffff,#f...
1、*：通用元素选择器* { margin: 0; padding: 0; } *选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除默认CSS样式方法*选择器也可以应用到子选择器中，例如下面的代码：#container * { border: 1px solid black; } 这样ID为container 的所有子标签元素都被选中了，并且设置了border。2#ID：ID选择器#container { width: 960px; margin: auto; } ID选择器是CSS中效率最高的选择器，...
1、基本介绍 （1）[att*=val]属性选择器 如果元素用att表示的属性的属性值中包含用val指定的字符，则该元素使用这个样式 （2）[att^=val]属性选择器 如果元素用att表示的属性的属性值的开头字符为用val指定的字符，则该元素使用这个样式 （3）[att$=val]属性选择器 如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，则该元素使用这个样式 2、实例说明 ...
?? 属性选择器： [att*=val]{}若att元素属性值包含val指定字符，则使用该样式 [att^=val]{}若att元素属性值开头字符为val，则使用该样式 [att&=val]{}若att元素属性值结尾字符为val,则使用该样式 例： [id^=section1]{ background-color: yellow; } 示例文本2 示例文本1-1 示例文本1-2 示例文本2-1 示例文本2-2 target选择器： 页面内href跳转时，重新定义目标的属性 font字体：以前的版本网页中应用的特...
在前面的章节中，我们了解了，可以使用行内样式，ID选择器，类选择器，以及标签选择器来给一个元素应用样式。 如果我们想给定义了那些都定义了某一个属性的元素应用样式，这个时候我们该怎么做呢？ 这一节中，我将使用 双色球案例 和 文档类型提示图标案例 来引入和应用属性选择器。 双色球案例： 大家都知道，双色球共有7个球，6个红球，1个蓝球。首先我们先在页面上面定义7个span标签： CSS3 属性选择器 b...
CSS的选择器，我想大家并不会陌生吧，因为天天在使用，但对于CSS3的选择器，要运用的灵活到位，我想对很多朋友还是一定的难度，特别是CSS3中的:nth选择器。那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。 CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择...
《CSS3基本选择器》 一、通配符选择器（＊） *{ marigin: 0; padding: 0; } 二、元素选择器(E) ...
一个有很多个小方块的页面，大方块的class为big，小方块的class为small，用css3选择器这么写： .small:nth-child(even){margin-right:0;} 设置第偶数个小方块的margin-right为0，但是第三个小方块的margin-right却等于0了，怎么回事呢？ demo：http://guusoft.com/test/ 回复讨论(解决方案) 通过其他网友的指点，明白了从父元素中选择第奇数或者偶数个子元素并不会特指某种类型（.small），而是将所有子元素都计...
CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(a...
css3是移动Web开发的主要技术之一。当前，CSS3技术最适合在移动Web开发中使用的特性有增强的选择器、阴影、强大的背景设置 、圆角边框 接下来我们主要讲解增强型的选择器，主要分两种，属性选择器和伪类选择器 1、属性选择器 1.1完全匹配选择器 语法：[attribute=value] 属性匹配选择器[id=article]{ color:red;} 1.2包含匹配选择器 语法：[attribute*=value] 属性匹配选择器属性匹配选择器属性匹配选择器[id*=arti...