想学做网页快点用CSS，简单搞定页面元素的挑选和修改。不要满足于只会基本标记或者类选择器了，赶快来挖掘更厉害的特色功能！
属性选择器的魅力
这个属性选择器真的牛得一匹！直接找到你需要的内容，根本不用费劲儿去查DOM属性和数值。想要找到以”data-“开头的元素吗?直接用”[data-]”就行，绝对妥当;要是遇到名字包含”btn-“的？这时候试试”[class^=” btn -“]”，绝对好用到飞起!学好了这个技巧,你的工作效率肯定能提升好几个档次哦,实在太实用了
这个选择真的有点费神，就拿那个[attr]来说，感觉好像在逛大街似的，看看哪个小摊点（元素）有什么特色（属性）儿。再看看[attr=value]，对你要求更高咯，得挑那些和招牌（属性值等于预设值）一模一样的顾客才行；接下来是[attr^=value]，这回更厉害了，先搜罗一遍有没有以预设值开头的客人，还要检查周围店铺和楼上的客人是不是都符合条件哦；再来看看[attr$=value]，想不到，它眼睛独到，看见那种字符串结束于预设字符串的顾客都是一目了然；最后说说[attr*=value]，简直就是武林高手，瞬间就能找出所有包含预设字符串的客人们。看来这几个功能真心让人伤脑筋
伪类选择器的神奇
今天好多人都在用伪类选择器，元素属性就能轻轻松松解决问题！比如那个:hover，把鼠标放上去它自己就选中啦；然后是”:active”，专门对付那些不能停止的元素，比如一碰就开始滚动的那些；接着是:visited，只记录我们点击过的链接；然后是:nth-child(n)，准确选定多列或行中的任意元素。想找到第一个元素吗？用:`:first-child`就没错了；最后一个宝贝儿？`:last-child`帮你找到，绝对没毛病！
要拿下头条，赶紧用”tr:first-child”伪类选，这东西超爽！它就是你的贴身小助手，到处都能用得上。
组合选择器的妙用
别忘了制作网页时得多留神，琢磨挑选选项卡的妙招儿，多试几次就能提高精准度了。找不到某项内容咋办？没事儿，学会用ul>li就轻松解决。尽管这看似麻烦点儿，但是多练练就习惯了。
学会高大上的CSS技能，网页制作不过小菜一碟！了解属性、伪类和复合选择器，让你的网页独树一帜！现在起动脑筋，打造属于自己的网站设计！
你忘啦那次咱们学的那个小技巧？就是利用属性和伪类让按钮变得更有趣味性。比如，只要鼠标滑过去就会发现字号自己变大了；但是一点击就马上恢复成原本的样子。这个技巧超实用！懂了这些选择器就能做出特别的按钮咯。
/* 属性选择器 */
button[data-color="red"] {
color: white;
background-color: red;
}
button[data-color="blue"] {
color: white;
background-color: blue;
}
/* 伪类选择器 */
button:hover {
font-weight: bold;
}
button:active {
transform: scale(0.9);
}
学会CSS高级选择器，立马提升你的技巧！轻轻松松做出完美网页，如同切豆腐般的容易！
评论0