你听说过那个网页里很牛的东西？就是那个CSS！它能让网站变漂亮，更厉害的是还可以随意改变每个部分的样子。对了，你们晓得吗？实际上，除了普通的选择器，还有很多有趣又实用的技巧能让页面显得更特别！今天就给大家聊聊这个神奇的技术——CSS。
一、通配选择器
我们的通配选择框就像个万能工具，只需要在里面输入“*”，就能把整篇文档翻新一遍！比如要换成全蓝色的文字，也就是动动手指的事：
css
*{
color: blue;
}
使用通配符选择器，段落字体瞬间变色，大大提升效率！
p {
color: blue;
}
二、属性选择器
你听说过吗？属性选择器简直是个神奇工具！它可以搜寻到元素的属性，甚至能为它们换上新装。其实，属性选择器分好几种类型，比如属性选择器，属性值选择器，存在选择器，开始选择器还有结束选择器等等。
-使用属性选择器，想找谁就直接输入它的名字好了。
input[type=”text”]{
border: 1px solid #ccc;
这款小程序就是你的贴心小弟，能帮你把所有含有”text”属性的东西都加上灰边框~
咱们到底在找什么？看看属性值不就行了么。跟着ATTRIBUTE VALUE SELECTOR的流程走就是了！
a[href^=”https”]{
这段码就是挑出所有含有“https”的链接，设为蓝色。
[title="red"] {
color: red;
}
-搞定各种数值元素，就靠这种小巧可爱的选框！
img[alt]{
border: 1px solid #000;
[title] {
font-weight: bold;
}
这个小程序能找出所有有Alt标签的图片，然后给它们每个都加上黑色边框。
“startswith”:这个函数就是帮你找下有没有和我们之前说的有点像的东西！
a[href^=”mailto”]{
font-weight: bold;
[title^="hello"] {
color: green;
}
这这段小代码就是在网页里找所有带着’mailto’的链接，找到以后就把它们都变成粗体。
这个叫”尾部挑选器”(Ends with Selector)。找那些后缀有特定字符的属性值吗？简单好用，帮你快人一步！
a[href$=”.pdf”]{
color: red;
[title$="world"] {
color: blue;
}
好了，搞定了！这个小程序可以找出所有href后缀是”.pdf”的链接，还会给它们加上一个红点点呢～
三、伪类选择器
聊到CSS，那就说说那些能用的上的标记，比如当鼠标放在某个地方就能看到神奇效果的hover伪类（就是悬浮在上面那样儿的）；又比如，当挑选某个选项时候会用到的:focus伪类，或者是把子元素排列地妥妥帖帖的:nth-child伪类等等
-:hover伪类：选取鼠标悬停在元素上时的状态。
a:hover {
text-decoration: underline;
上述代码表示当鼠标悬停在链接上时，给链接添加下划线效果。
a:hover {
text-decoration: underline;
}
-:focus伪类：选取获得焦点的元素。
input:focus {
border-color: blue;
这段代码表示当输入框获得焦点时，给输入框添加蓝色边框。
-:nth-child伪类：选取指定位置的子元素。
input:focus {
outline: 2px solid blue;
}
ul li:nth-child(odd){
background-color:#f2f2f2;
咱们看这儿的这段代码！怪不怪，为什么每个没顺序的列表里，只要编号正好是奇数的部分，都给弄成浅灰了？
四、结合使用高级选择器的实用案例
li:nth-child(even) {
background-color: lightgray;
}
运用高级选择器能搞出既帅气又实用的设计。咱就来说俩例子吧：
-导航栏菜单效果：
菜单项想变得炫酷吗？其实很好实现！只需用一下属性选择器和伪类选择器，你就能在鼠标滑动到相应位置时，看到背景色或是字体亮丽变幻。这样一来，找到要点击的内容就容易多了，是不是很棒
-表单输入验证：
其实，这个表格输入框里头，属性选择器跟伪类选择器一样好用，能够智能化地帮你修正错误。只要填错了，马上跳出来提示你修改，真是太方便！
看了你给的那两例子，我明白咋用高级CSS选器解决生活中的小麻烦啦!还学到了不少新奇好玩的招。期待以后能用上这些小妙招，让我在工作中更加得心应手！
ul#nav li {
display: inline;
margin-right: 10px;
}
ul#nav li a {
text-decoration: none;
color: black;
}
ul#nav li a:hover {
color: blue;
font-weight: bold;
}
实话告诉你，高级选择器真的能帮咱们轻松搞定样式表，让网页看起来牛逼哄哄的！看完这篇文章，你就知道啥是高大上的用法，咋用也就那么回事儿~想让网页更吸引人？下次动手做网页时，就赶紧试试这些神奇的技巧！
评论0