您现在的位置是：网站首页> 编程资料编程资料
你应该知道的30个css选择器css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
2021-09-06
1052人已围观
简介 你认为学会了基础的id，类和后代选择符，然后你就一直用它们了吗？如果是这样，你丢失了（css的）巨大的灵活性。在本文中提到的很多选择器属于CSS3规范的一部分，因此，只有在现代浏览器中才可使用
1.*
复制代码
代码如下:* {
margin: 0;
padding: 0;
}
对于初学者，在学习更多高级选择器之前，最先了解的选择器。
星号选择器将匹配页面里的每一个元素。很多开发者使用这个技巧将外边距和内边距重置为零。虽然在快速测试时这确实很好用，但我建议你永远不要再生产代码中使用它。它给浏览器带来大量不必要的负担。
* 也能作为子选择符使用。
复制代码
代码如下:#container * {
border: 1px solid black;
}
这将匹配#container div的每一个后代元素。再次强调，尽量不要使用这种技术。
兼容性
•IE6+
•Firefox
•Chrome
•Safari
•Opera
2.#X
复制代码
代码如下:#container {
width: 960px;
margin: auto;
}
井号前缀允许我们选择id。这是最常见的用法，不过应该慎重使用ID选择器。
反复问自己：我一定需要id来匹配要选择的元素吗？
id选择符是唯一的，不允许重复使用。如果可能的话，先尝试使用一个标签名称，一个新的HTML5元素，甚至是一个伪类。
兼容性
•IE6+
•Firefox
•Chrome
•Safari
•Opera
3. .X
复制代码
代码如下:.error {
color: red;
}
现在介绍的是类选择符。id和类的不同之处在于后者可以多次使用。当你想给一组元素应用样式的时候可以使用类选择符。另外，当你紧想给特殊元素应用样式的时候才使用id。
兼容性
•IE6+
•Firefox
•Chrome
•Safari
•Opera
4. X Y
复制代码
代码如下:li a {
text-decoration: none;
}
下一个最常用的选择符是后代选择符。当你需要给你的选择符增加特殊性的时候你可以使用。例如，如果你只想匹配无序列表下的锚元素？此时后代选择符派上用场。
小贴士——如果你的选择符看起来像这样 X Y Z A B.error，那你就错了。时刻问自己使用这高的权重是否有必要。
查看例子
兼容性
•IE6+
•Firefox
•Chrome
•Safari
•Opera
5. X
复制代码
代码如下:a { color: red; }
ul { margin-left: 0; }
如果你想匹配页面上的所有的元素，根据他们的类型，而不是id或类名？显而易见，使用类型选择符。如果你需要选择所有的无序列表，请使用ul {}。
查看例子
兼容性
•IE6+
•Firefox
•Chrome
•Safari
•Opera
6. X:visited and X:link
复制代码
代码如下:a:link { color: red; }
a:visted { color: purple; }
我们使用:link 伪类选择符选择所有已经被点击过的锚标签。
此外，我们也有:visited伪类选择符，正如你期望的，允许我们仅给页面上被点击过的或被访问过的锚标签应用样式。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
7. X + Y
复制代码
代码如下:ul + p {
color: red;
}
这被称作相邻选择符。它将只选择紧贴在X元素之后Y元素。上面的例子，仅每一个ul之后的第一个段落元素的文本为红色。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
8. X > Y
复制代码
代码如下:div#container > ul {
border: 1px solid black;
}
X Y和X > Y之间的不同点是后者只选择直接子代。例如，考虑如下的标记。
复制代码
代码如下:- List Item
- Child
- List Item
- List Item
- List Item
选择符#container > ul将只选择id为container的div的直接子代ul。它不匹配更深层的li的子代的ul。
因此，使用子代选择符有性能上的优势。事实上，这同样适用于基于css选择器的javascript引擎。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
9. X ~ Y
复制代码
代码如下:ul ~ p {
color: red;
}
这是兄弟选择符和X + Y一样，然而，它没有约束。与相邻选择符（ul + li）仅选择前一个选择符后面的第一个元素比起来，兄弟选择符更宽泛。它会选择，我们上面例子中更在ul后面的任何p元素。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
10. X[title]
复制代码
代码如下:a[title] {
color: green;
}
被称为属性选择器，在我们上面的例子里，这只会选择有title属性的锚标签。没有此属性的锚标签将不受影像。但如果你需要更多的特性怎么办呢？呵呵……
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
11. X[href=foo]
复制代码
代码如下:a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}
上面的代码段将给所有href属性为http://net.tutsplus.com的锚标签添加样式；他们将会显示为我们的品牌绿色。所有其他的锚标签将不受影响。
注意我们将href值用引号包裹。记住，当使用javascript的css选择符引擎时也这么做。如果可能的话，尽可能使用css3选择符代替非官方的方法。
这工作的很好，但有点不够灵活。如果链接确实直接连接到Nettus+还好，但是，也许路径是到nettust的相对路径呢？在这种情况下，我们可以使用一点正则表达式语法。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
12. X[href*=nettuts]
复制代码
代码如下:a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
来了不是~这就是我们需要的代码。*号指定了包含该属性的值必须包含定义的值。就是说，这句代码包含了href值为 nettuts.com，net.tutsplus.com或者tutsplus.com。
记住这个描述过于宽泛，如果是某个锚点标签链接到某个连接中带有tuts非Envato的网站（tutsplus属于Envato旗下网站）呢？因此你需要更多特性来限制，分别使用^和&来限定字符串的开始和结束。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
13. X[href^=http]
复制代码
代码如下:a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
有没有想过某些网站是如何定义一个图标的链接的？我确定你肯定看到过。这些链接很容易让你跳转到另一个网站。
使用^(carat)符灰常简单啦。这个符号常常在正则表达式中表示字符串的开始。如果我们想指向所有以”http”开头的”href”属性的锚点的话，我们就可以使用类似于上面的那段代码啦。
注意啦，我们不需要搜索”http://”,完全没必要，因为我们还要包含以https://开头的链接呢。
如果我们想为所有链接到图片的链接定义样式咋办？这种情况下，我们得搜索字符串的结束了不是。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
14. X[href$=.jpg]
复制代码
代码如下:a[href$=".jpg"] {
color: red;
}
又来了，我们还是使用正则表达式符号，$(dolor)，来作为字符串的结束标记。这种情况下，我们就会搜索所有url以.jpg为结尾的锚点啦。记住记住这种情况下gif和png格式的图片不会被选择哦。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
15. X[data-*=foo]
复制代码
代码如下:a[data-filetype="image"] {
color: red;
}
回顾最近一条，我们如何能包含各种图片类型:png,jpeg,jpg,gif?很容易想到，我们能通过多个选择器来不是，像这样：
复制代码
代码如下:a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
不过，这样很蛋疼，效率极低。另一个解决办法是使用自定义属性。如果我们加了一种自己的 data-filetype 属性给每一个链接到图片的锚点的话呢？
复制代码
代码如下:这样关联后，我们就能使用标准的属性选择器来指定这些链接啦。看下面：
复制代码
代码如下:a[data-filetype="image"] {
color: red;
}
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
16. X[foo~=bar]
复制代码
代码如下:a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
这儿有个鲜为人知的特殊技巧，绝对让你印象时刻。~(tilda)符，它可以帮助我们指向那些以空格隔开多个值的属性的元素（真拗口，这翻译我自己都看不懂，水平问题）
以我们第15条的自定义属性为例，上面的代码中我们创建了 data-info属性，这个属性可以定义以空格分隔的多个值。这样，这个链接本身就是个icon，并且指向的也是一个图片链接，像下面这样。
复制代码
代码如下:有了这样适当的标记，通过使用 ~ 属性选择器的技巧，我们就可以指向任何具有着两种属性的任何一种啦。
复制代码
代码如下:/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
很棒，不是吗？
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
17. X:checked
复制代码
代码如下:input[type=radio]:checked {
border: 1px solid black;
}
这种伪类只会匹配已经被选中的单选元素。就是这么简单。
查看例子
兼容性
•E9+
•Firefox
•Chrome
•Safari
•Opera
18. X:after
before 和 after 伪元素也很蛋疼。貌似人们每天都能找到或者发明一些新办法来有效地使用它们。它们很容易控制选择器周围的内容。
很多第一次使用是因为他们需要对clear-fix进行改进。
复制代码
代码如下:.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
这个改进使用了:after伪类元素来在元素后增加一个空间，然后清除它。这个牛X的技巧你应该收藏到工具包里，特别是当overflow:hidden方法无能为力的时候。
想看看其他创造性的用法：访问我滴创建阴影的窍门
通过Css3选择器的标准说明书，你应该有技巧地使用这些伪类语法——双冒号::。不过为了兼容，浏览器会接受一个双引号。
兼容性
•IE8+
•Firefox
•Chrome
•Safari
•Opera
19. X:hover
复制代码
代码如下:div:hover {
background: #e3e3e3;
}
我去，这个你必须懂。典型的官方形式的用户触发伪类。听起来会有点迷惑，不过实际上并非如此。想在用户在某个元素上面悬停时定义个特别的样式？这个属性就是做这个的。
记住啦，较old版本的IE，只能在锚点标签后使用这个hover。
这个选择器你用得最多的情况，估计可能就是在锚点的悬停时加个border-bottom啦。
复制代码
代码如下:a:hover {
border-bottom: 1px solid black;
}
小贴士： border-bottom:1px solid black;比 text-decoration:underline;好看一点哦。（真的？我去）
兼容性
•IE6+ (In IE6, :hover must be applied to an anchor element)
•Firefox
•Chrome
•Safari
•Opera
20. X:not(selector)
复制代码
代码如下:div:not(#container) {
color: blue;
}
not伪类灰常有用。例如我要选择所有的div，除了有id为container的。上面那个代码片段就能完美的实现。
如果我想选择除了p以外的所有元素，我可以这么做：
复制代码
代码如下:*:not(p) {
color: green;
}
查看例子
兼容性
•IE9+
•Firefox
•Chrome
•Safari
&#
相关内容
- 纯CSS3打造动感漂亮时尚的扇形菜单纯CSS3实现扇形动画菜单(简化版)实例源码纯 Css 绘制扇形的方法示例
- CSS控制链接显示状态的CSS伪类CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- 一个清爽的button按钮样式CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- 经常使用的两个清爽的table样式CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- css浮动(float/clear)使用讲解CSS清除浮动float的三种方法小结详解css清除浮动float的七种常用方法总结和兼容性处理CSS的position定位和float浮动详解CSS使用float属性设置浮动元素的实例教程理解CSS浮动float、定位positioncss浮动(float,clear)通俗讲解经验分享html/css中float浮动的用法实例详解
- 常用技巧margin负外边距的使用介绍CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- CSS自定义select下拉选择框的样式(不用其他标签模拟)使用CSS样式写选择框右侧小三角
- 让你的HTML5&CSS3网站在微软的浏览器中也能运行检测浏览器对HTML5和CSS3支持度的方法2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼IE9beta版本浏览器对HTML5/CSS3的支持各大浏览器 CSS3 和 HTML5 兼容速查表 图文不同浏览器对CSS3和HTML5的支持状况HTML5 CSS3新的WEB标准和浏览器支持关于老式浏览器兼容HTML5和CSS3的问题
- 使用css3背景渐变中的透明度来设置不同颜色的背景渐变CSS3制作半透明边框(Facebox)类似渐变css实现透明渐变特效的示例代码
- 使用条件注释判断 IE 浏览器版本适用于IE5.0及以上版本面向XHTML的IE条件注释IE的有条件注释优点和缺点css 条件注释区分非IE浏览器 针对主流浏览器的CSS-HACK写法及IE常用条件注释 ie10 css hack 条件注释等兼容方式整理浏览器兼容之旅第一站:如何在页面中创建IE条件注释条件注释判断浏览器(ie系列)详谈IE条件注释
