优秀程序员HTML5培训班-CSS3选择器30个总结

container>ul只会选取id为'container'的div下的所有直接ul元素。它不会定位第一个li下的ul元素。出于多种原因，将选择器与子节点相结合具有许多性能优势。事实上，在JavaScript中使用CSS选择器时强烈推荐这样做。9selector1~selector2:siblingselectorul~p{color:red;}兄弟节点的组合选择器和邻接选择器很相似，但是没那么严格。ul+p选择器只会选择紧跟在指定元素之后的那些元素。这个选择器将选择目标元素之后的所有匹配元素。10selector[title]:属性选择器a[title]{color:green;}在上面的例子中，只会选择具有title属性的元素。那些没有这个属性的锚标签将不会被这个代码修饰。11selector[href="foo"]:属性选择器a[href="http://strongme.cn"]{color:#1f6053;/nettutsgreen/}上面这段代码会将href属性值设置为anchorPoint标签设置为绿色，而其他标签不受影响。注意：我们用双引号将值括起来。然后在使用Javascript时使用双引号。只要有可能，尽量使用标准的CSS3选择器。12selector[href*="strongme"]:属性选择器a[href*="strongme"]{color:#1f6053;}指定strongme的值必须出现在锚标签的href属性中，不管是strongme。可以选择cn或strongme.com或www.strongme.cn。但请记住，这是一个非常宽泛的表达方式。如果锚标签指向strongme以外的站点，如果要更具体的限制，分别用^和$表示字符串的开头和结尾。13selector[href^="href"]:属性选择器a[href^="http"]{background:url(path/to/external/icon.png)no-repeat;padding-left:10px;}大家我一定很好奇。一些网站的锚标记旁边会有一个外部链接图标。这种情况相信大家一定都见过。这个设计会很明确的告诉你，你会跳转到其他网站。这很容易用克拉符号完成。它通常用于标识正则表达式的开头。如果我们想定位到锚点属性href中以http开头的标签，那么我们可以使用类似上面的代码。请注意，我们没有搜索http://，这是不必要的，因为它都不包含https://。14selector[href$=".jpg"]:属性选择器a[href$=".jpg"]{color:red;}这次我们使用了正则表达式$来表示字符串的结束。这段代码的意思是搜索所有图片链接，或者其他以.jpg结尾的链接。但请记住，这不适用于gif和png。15selector[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;}16选择器[foo~=”bar”]:属性选择器a[data-info~="external"]{color:red;}a[data-info~="image"]{border:1pxsolidblack;}这个相信会让小伙伴们惊叹不已。很少有人知道这个技巧。~符号可以定位属性值为空格分隔的多值的标签。继续第15项中的示例，我们可以设置一个数据信息属性，该属性可用于设置我们需要的任何空格分隔值。给这些元素设置这个标志后，我们就可以用~来定位这些标签了。/包含值“外部”的目标数据信息属性/a[data-info~="external"]{color:red;}/包含值“image”/a[data-info~="image”"]{border:1pxsolidblack;}17selector:checked:伪类选择器input[type=radio]:checked{border:1pxsolidblack;}上面的伪类写法可以定位那些选中的单选按钮和Multi-选择框，就这么简单。18selector: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%;}上面这段代码在目标标签后面追加一个空格，然后清除它。你必须把这个方法放在你的聚宝盆里。特别是当overflow:hidden方法不起作用时，这个技巧特别有用。根据CSS3标准，可以使用两个冒号::。然后为了兼容性，浏览器也会接受冒号。事实上，在这种情况下，使用冒号更为明智。19selector:hover:伪类选择器div:hover{background:#e3e3e3;}不用说了，想必大家都知道。官方的说法是用户操作伪类。听起来有点混乱，但实际上还可以。如果你想在用户鼠标悬停的地方画一些颜色，那么这个伪类的写法就可以做到。注意：旧版本的IE只能与添加到锚a标签的:hover伪类一起使用。通常人们在鼠标悬停在锚链接上时使用它来添加边框。a:hover{border-bottom:1pxsolidblack;}专业提示：border-bottom:1pxsolidblack;比text-decoration:underline;好看多了。20selector1:not(selector2):伪类选择器div:not(#container){color:blue;}否定伪类是相当有用的，假设我们要选择除idcontainer之外的所有div标签。那么上面的代码就可以做到了。或者我想选择除段落标签之外的所有标签：not(p){color:green;}21selector::pseudoElement:伪类选择器p::first-line{font-weight:bold;font-size:1.2em;我们可以使用::来选择一个标签css3radius的部分内容，比如第一段，或者第一个词。但请记住，它必须用在块标签上才能工作。伪标签由两个冒号组成::用于定位第一个单词：p::first-letter{float:left;font-size:2em;font-weight:bold;font-family:cursive;padding-right:2px;}上面的代码将找到页面上的所有段落并将其指定为每个段落的第一个单词。通常用在一些新闻报刊上，用来突出内容。定位段落首行p::first-line{font-weight:bold;font-size:1.2em;}类似于::first-line，为了兼容会选择段落首行，之前浏览过的老版本编译器也会兼容单冒号的写法，比如:first-line,:first-letter,:before,:after。但是这种兼容性不适用于新引入的功能。22selector:nth-child(n):伪类选择器li:nth-child(3){color:red;}还记得当初我们面对如何获取堆叠的前几个元素无从下手的时候label好吧，有了第n个孩子，那些日子就一去不复返了。请注意，第nth-child接受一个整数参数，并且它不是从零开始的。如果你想获取第二个元素，那么你传递的值就是li:nth-child(2)。我们甚至可以得到变量名定义的子标签的数量。例如，我们可以使用li:nth-child(4n)来每3个元素获取一个标签。23selector:nth-last-child(n):伪类选择器li:nth-last-child(2){color:red;}假设你在一个ul标签中有N个以上的元素，你只想得到The最后三个元素，即使是li:nth-child(397)，也可以使用nth-last-child伪类来替换它。24selectorX:nth-of-type(n):伪类选择器ul:nth-of-type(3){border:1pxsolidblack;}曾几何时，我们不想选择子节点，但是想根据元素的类型进行选择。假设有5个ul标签。如果只想修改第三个，不想使用id属性，那么可以使用nth-of-type(n)伪类来实现。上面的代码只有第三个ul标签会被加边框。25selector:nth-last-of-type(n):伪类选择器ul:nth-last-of-type(3){border:1pxsolidblack;}同理，nth-last-of也可以类似使用-type以相反的顺序获取标签。26selector:first-child:伪类选择器ulli:first-child{border-top:none;}这个结构伪类可以选择第一个子标签css33D，你会经常用它来取出第一个第一个和最后一个边界。假设有一个列表，每个标签都有上下边框，那么效果就是第一个和最后一个看起来会有点奇怪。这时候，就可以使用这个伪类来处理这种情况。27selector:last-child：伪类选择器ul>li:last-child{color:green;}与first-child相反，last-child取父标签的最后一个标签。比如标签

• ListItem
• ListItem
• ListItem

这里什么都没有，就是一个List。ul{width:200px;background:#292929;color:white;list-style:none;padding-left:0;}li{padding:10px;border-bottom:1pxsolidblack;border-top:1pxsolid#3c3c3c;}上面的代码会设置背景色，去掉浏览器默认的padding，并为每一里设置一个边框，突出一定的深度。28selector:only-child:伪类选择器divp:only-child{color:red;}说实话，你会发现你几乎不会用到这个伪类。但是，它非常有用，您可能有一天会用到它。它允许您获取那些只有一个子标签的父标签的子标签。就像上面的代码一样，只有一个段落标签的div被着色。在上面的示例中，不会选择第二个div。一旦第一个div有多个子段落css3过渡，这就不再起作用了。29selector:only-of-type:伪类选择器li:only-of-type{font-weight:bold;}结构伪类可以用得很巧妙。它只针对一个标签下同一子标签的一个目标。想象一下，你想只用一个子标签获取ul标签下的li标签？使用ulli将选择所有li标签。这时候应该使用only-of-typecss3圆角。ul>li:only-of-type{font-weight:bold;未完待续欢迎继续关注程序员前端好教程的分享！