重识CSS---基础知识---选择器（1）

选择器：

基本选择器：

全部选择：
*  ：使用 * 可为所有元素设置样式。

* {
    text-decoration: none;
    color: #6c757d;
}

标签选择：

标签选择是根据标签为元素设置样式，以HTML标签为选择器

h1 {
	color: red;
}
// 同时为多个元素设置样式
h1,h2 {
    color: red;
}
// 元素在多个组件中存在
h1,h2 {
    color: red;
}
h1,h3{
    background: #dcdcdc;
} 
// 这里h1 即设置了color 也设置了background 

类选择器

类选择器是为一类状态声明样式规则，在给标签加上class属性，即可给当前标签设置元素，且不影响其他标签的正常使用

<style>
.text-center {
    text-align: center;
}
</style>
<h1 class="text-center">muxi</h1>
<h2 class="text-center">muxi</h2>
// 将类选择器指定为具体标签
.help-block {
    background: red;
}

span.help-block {
    font-size: 12px;
    color: #aaa;
    background: none;
}
...
<div>muxi很帅</div>
<span class="help-block">muxi呀</span>
// 多类使用
.text_color {
    color: #aaa;
}

.text_size {
    font-size: 12px;
}
...
<div class="text_color text_size">muxi很帅</div>

效果：

ID选择器

为有 id 属性的元素设置样式，在给标签加上id属性，文档中ID应该是唯一的，虽然为多个元素设置同一个ID也可以产生样式效果，但这是不符合规范的。（有的时候id可用于js中，所以广泛使用id选择器，会引起不必要的问题）建议优先使用类选择器，

#container {
    background: red;
}

...
<h1 id="container">muxi</h1>

结构选择器：

后代选择器：

HTML中元素是以父子级、兄弟关系存在的。后代选择器指元素后的元素（不只是子元素，是后代元素）。

main div h2,main h1 {
    color: green;
}
...

<main>
	<div>
		<h2 name="text">muxi</h2>
		<aside>
			<h2>muxi</h2>
		</aside>
	</div>
	<h2 name="text">muxi</h2>
	<h1>muxi</h1>
</main>

子元素选择:

子元素选择器中选择子元素，不包括孙级及以下元素。

// 只管子级，不管后代（孙级...）
main article>h2 {
    color: green;
}

兄弟选择：

// 后面所有的兄弟级
main article~h2 {
    color: green;
}
// 后面最近的一个兄弟级
main article+h2 {
    color: green;
}

属性选择器：

// 为h1标签所有带class属性的标签设置样式
h1[class] {
    color: red;
}
...

<h1 class="color">muxi</h1>
// 设置多个约束
h1[class][id] {
    color: red;
}
...
<h1 class="muxi">muxi_color</h1>

// 为h1标签带有class属性值且值为muxi的标签设置样式
h1[class="muxi"] {
      color: red;
}
...
<div>
    <h1 class="container">muxi_text</h1>
    <h1 class>muix</h1>
    <h1 class="muxi">muxi_color</h1>
</div>

// ^= 为h1标签里class值为muxi为开头的所有符合的标签设置样式
h1[class^="muxi"] {
      color: red;
}
// $= 为h1标签里class值com为结尾的所有符合的标签设置样式
h1[class$="com"] {
      color: red;
}
// *= 为h1标签里class值含有muxi为的标签设置样式
h1[class*="muxi"] {
      color: red;
}
// ~= 为h1标签里class值含有muxi 值 的标签设置样式
h1[class~="muxi"] {
      color: red;
}
<h1 class="muxi">muxi很帅</h1> // 有样式填充
<h1 class="www.muxi.henshuai">muxi很帅</h1> // 无样式填充
<h1 class="ww. muxi .henshuai">muxi很帅</h1> // 有样式填充