属性选择器类型
除了常见的标签字符外，CSS还藏着个神奇装备——属性选择器，它能帮咱们找出带有指定属性的元素，然后改掉它们的颜色。这个选择器很强大，有三个好用的参数：等于号“=”、数字+前缀“^”和星星符号“*”。下面让我来给大家演示下怎么使用~
等号选择器（=）
说起常见的属性选择器，那绝对少不了等号选器！它就是这么牛逼，能精准定位到符合属性数值和设置条件的元素哦～比如，你要是想找那种名叫”btn”的东西，只要用这个选器轻轻一搜，立马就能找到！然后，你想怎么改包装就怎么改~
以某个值开头的选择器（^=）
哥们儿来试试这招，搞起href后面带“http”的图片元素特好用！能迅速找到想要调整样式的部分，效果棒极了！
<pre class='brush:css;toolbar:false;’>[class=”btn”] {
/* 样式规则 */
}
包含某个值的选择器（*=）
哇塞~这个宝贝得很呐！无论是a标签里的href属性，还是div里面的id属性，只要关键字(“example”)现身，立马就能揪出来。入手用起来太爽了，再也不用担心找错位置！
img[src^="http"] {
/* 样式规则 */
}
属性选择器的应用示例
你对选择器这种东西应该是熟得不能再熟了？那就让我带你更熟练地操作这个神奇的玩意儿。
a[href*="example"] {
/* 样式规则 */
}
选取具有特定属性的元素
找到带着data-title属性的元素，就得看准那个等号啦朋友们！比如，想要找出所有带着这个属性的小元素，那可就得靠它了！
选取具有特定属性值的元素
拿某个属性值的元素怎么找？我们有个超棒的东西叫“attribute selector”，能帮你快速定位到！比如说，你想在网页里把所有 class=”container”的东西揪出来，分分钟搞定！
[data-title] {
/* 样式规则 */
}
选取特定属性值的子元素
找孩子元素不就是找规律么，很简单。比如所有的娃都有爸妈，还能加上个特别的标识，那我们只需要用=属性选择器和子选择器就能轻易搞定了！比如说，你要找哪些哥哥姐姐 element 里的”example”数据标题属性的娃们，适用度不要太高！
根据特定属性值修改样式
[class="container"] {
/* 样式规则 */
}
简单的说，如果你想要把所有class=”btn”的按钮颜色变成红色，只要添加’=’ btn’就能完成了！
根据特定属性值部分匹配元素
还在为挑出一大堆东西中的特定几种苦恼？别担心，其实挺容易的！关键就在于正确使用选择器，它特能帮咱们找到需要的部分，瞬间解决问题。比如说，想要找出alt属性里带“example”的img元素，把它们的边框加粗到1像素，就试试这个办法，超级有效！
[data-title="example"] > div {
/* 样式规则 */
}
看过咱们网站上的案例了没?还愁不会搞CSS属性选择器?我们这款神器包你满意，让你瞬间提高工作效率，做出来的作品更漂亮!
蹭蹭，来聊聊怎么用CSS属性选择器。会这招，你就能随心所欲地打扮网页。以后搞微信公众号设计，就能玩儿CSS！
评论0