css --- > 选择器

标签选择器

// 标签选择器是最简单的选择器, 它的命名只要和对应的HTML标签相同即可
h1 {
    font-size: 30px;
    color: #333;
}

类选择器

// 类选择器也称为class选择器,它的语法非常简单,在class名称前面加上一个"."符号
<div class="red content"></div>
.red {
    background:red,
}
.content {
    height: 100px;
    width: 100%;
}

id选择器

// id选择器的语法是一个"#"号加上id的名称,例如:
<div id="user_123"></div>

#user_123{
    width: 120px;
    line-height: 30px;
    height: 30px;
}

通配符选择器

// 通配符的意思是用一个符号来代替某些字符,例如在Word中要搜索以com开头的所有单词,可以用"com*"来做搜索关键词
* {color:red;}  /* 这个声明等价于列出文档中所有元素的一个分组选择器 */
body {
    color: red
}
html {
    color: red
}

子元素选择器

// 子元素选择器用于表示某些特定HTML嵌套关系时的样式展现,其语法关键词是一个">"符号.
<li><a href="#">www.baidu.com</a></li>
<li><div><a href="#">www.baidu.com</a></div></li>

// CSS
li > a{
    color: blue;
}

后代元素选择器

// 后代元素选择器类似于子元素选择器, 只不过它的要求不那么严格.它的语法关键词是一个空格
// HTML 代码:
<li><a href="#">www.baidu.com</a></li>
<li><div><a href="#">www.baidu.com</a></div></li>

// CSS 代码
li a{
    color: blue;
}

相邻元素选择器

// 相邻元素选择器用于选取和某个元素相邻的同级元素,其语法关键词是一个"+"符号,
// HTML 代码
<div class="content">
    <h1>测试</h1>
    <p>测试内容</p>
</div>

// CSS 代码:
h1 + p{
    font-size: 15px;
}

属性选择器

[title] {
    color: red;
}                      /* 所有拥有title属性的元素的文字颜色设为红色 */

a[href][title] {
    color: red;
}                      /* 同时拥有href 和 title 属性的a标签的文字颜色设为红色 */

a[href="http://www.baidu.com"][title="百度"] {
    color: red;
}                      /* 只有href=://www.baidu.com 且 title="百度"的链接(<a>)文字才会设置为红色

还可以使用通配符来进行模糊匹配:
a[src^="https"]   /* 选择其src 属性值以"https"开头的每个<a>元素  */
a[src$=".pdf"]    /* 选择其src 属性值以".pdf"结尾的所有<a>元素   */
a[src*="abc"]     /* 选择其src 属性中包含"abc"字串的每个<a>元素  */

组选择器

// 如果要对多个元素定义同样的样式,则可以用组选择器来缩减重复代码. 组选择器的语法关键字是一个","
h1, h2, h3, h4, h5, h6{
    font-wight:bold;
}
表示从h1~h6 都采用加粗字体

复合选择器

// 如果说组选择器相当于一种并集, 或者常说的"或" (||) 关系的话,那么复合选择器
就表示 "与" (&) 的关系。
p.test{
    color: red;
}

<p class="test">hehe</p>
<div>hehe</div>
<div class="test">hehe</div>
<p>hehe</p>

参考《CSS高效开发实战》 P25~P33