CSS选择器之基础选择器的简单使用

ID选择器

ID 选择器是用 “#” 号加 ID 名称 xxx 来表示，用来选择 HTML 中 id=“xxx” 的 DOM 元素

<span id="content">Hello World</span>

#content{
    color: red;
}

这样 ID 为 content 的元素内容会呈现红色的效果了。

Tips：ID 选择器只能对一个元素生效，同一个页面里不允许出现两个 ID 相同的元素

类选择器

类 选择器是用 “.” 号加 class 名称 xxx 来表示，用来选择 HTML 中class=“xxx” 的 DOM 元素

<ul>
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
</ul>

#list-item{
    border-bottom: 1px solid #ccc;
}

这样列表里所有的项就都有一个宽 1px 灰色的下边框了。

Tips：类选择器会选择到所有类名相同的 DOM 元素，没有数量限制

通配选择器

通配选择器使用星号来选择到页面里所有元素。用法如下：

*{
    margin: 0;
    padding: 0;
}

上面这个样式就是把所有元素的内外边距都归零,效率较低，一般不建议使用

标签选择器

作用 HTML 中某一种类的标签

h1{
    font-size: 20px;
}

Tips： 标签选择器通常用来重置某些标签的样式

属性选择器

通过 DOM 的属性来选择该 DOM 节点，属性选择器是用中括号 “[]” 包裹，比如

a[href]{
    color: red;
}

这条选择器就可以让所有带 href 属性的 a 标签字体都变成红色

主要有以下几种形式：

.[attr]，用来选择带有 attr 属性的元素，如刚提到的 a [href]
.[attr=xxx]，用来选择有 attr 属性且属性值等于 xxx 的元素，如选择所有文本类型的输入框

<!-- HTML： -->
<input type="text" value="Hello World"/>

// CSS：
input[type=text]{
    color: red;
}

Tips： xxx 和 HTML 中的属性值必须完全相等才会生效。

.[attr~=xxx],选择属性值中包含 xxx 的元素,但一定是空格分隔的多个值中有一个能和 xxx 相等才行

<!-- HTML： -->
<input class="input text" type="text" value="Hello World"/>

// CSS：
input[class~=input]{
    color: red;
}

.[attr|=xxx],用来选择属性值为 xxx 或 xxx- 开头的元素(选择器会对前三条都生效，但不会对第四条生效)

<!-- HTML： -->
<div class="color-red">我是红色</div>
<div class="color-green">我是绿色</div>
<div class="color-blue">我是蓝色</div>
<div class="color_black">我是黑色，不是以color-开头的</div>

// CSS：
div[class|=color]{
    font-size: 20px;
}

.[attr^=xxx],匹配以 xxx 开头的元素，实际上就是用正则去匹配属性值，只要是以 xxx 开头都可以(上面例子，选择器也会对第四条生效)
.[attr$=xxx]，用正则匹配的方式来选择属性值以 xxx 结尾的元素（select不会生效）

<!-- HTML： -->
<button class="btn btn-disabled">禁用的按钮</button>
<select class="select select-disabled city-select"></select>
<input class="input input-disabled" value="禁用的输入框"/>

// CSS：
[class$=disabled]{
    display: none;
}

Tips：disabled 相关的类必须放在最后，否则就像 select 一样不会生效。

.[attr*=xxx],用正则匹配的方式来选择属性值中包含 xxx 字符的所有元素，它对所有带这个单词的属性都会生效，哪怕是 class=“i-am-a-disabled-element” 的元素都可以

Tips:属性选择器很灵活，如果能使用 CSS 代替 JS 解决一些需求，可以不用太纠结性能的问题，用 JS 实现也一样要耗费资源的