CSS选择器

元素选择器

文档的元素就是最基本的选择器

<style>
  html{color: royalblue;}
  h1{color: salmon;}
  p{color: slateblue;}
</style>
<body>
  <h1>标题一标题一</h1>
  <h2>标题2标题2</h2>
  <p>一个段落一个段落</p>
</body>

选择器分组

用逗号分隔 h1,h2,p{color:blue;background:white}

通配符选择器 *{color:red}可以使文档中的每个元素都为红色

类选择器

类选择器允许以一种独立于文档元素的方式来指定样式，类选择器可以单独使用，也可以和其他元素结合使用。

<style>
  .important{
      font-style: italic;
  }
  .warning{
      font-weight: bolder;
  }
  .important.warning{
      background: steelblue;
  }
</style>
<body>
   <p class="important">This paragraph is very important</p>
   <p class="warning">This is warning</p>
   <p class="important warning"> This is a very importat warning</p>
   <p>This is a paragraph</p>
</body>

ID选择器

ID选择器在使用时需要在前面加“#”，例如#intro{color:yellow}.

ID选择器和类选择器的区别

ID选择器只能在文档中使用一次
ID选择器不能结合使用，不能使用ID词列表
ID能包含更多的含义类选择器可以使用多次，就像人名一样可以重复，但是ID就像身份证号码，全国唯一

属性选择器

属性选择器可以根据元素的属性机器属性值来选择元素

<style>
a[alt]{
    background: tomato;
    font-size: 25px;
}
</style>
<body>
    <a href="http:www.sohu.com" alt="链接失效">搜狐网</a>
    <a href=http:www.qq.com>腾讯网</a>
</body>

后代选择器

又称作包含选择器，后代选择器可以选择作为某元素后代的元素

<style>
p a{
    font-size: 25px;
    background: turquoise;
}
</style>
<body>
   <h3>这是 <a href="http:www.sohu.com" alt="链接失效">搜狐网</a>的链接</h3>
   <p>这是 <a href=http:www.qq.com>腾讯网</a>的链接</p>
</body>

子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。子元素选择器用>连接，例如：h1 > strong {color:red}

子元素选择器和后代选择器的区别

子元素选择器只会查找儿子，不会选择孙子、重孙子。
子元素选择器只能用>来连接，不能用空格后代选择器和子选择器结合的例子：table.company td > p

相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素

伪元素选择器

:first-line伪元素用于向文本的首行设置特殊样式.注意，只能用于块级元素

<style>
div{
    width: 250px;
    height: 200px;
}
div::first-line{
   font-weight: bolder;
}
</style>
<body>
<div>
    Markdown applications don’t agree on how to handle
     underscores in the middle of a word. For compatibility, 
     use asterisks to bold and italicize the middle of a word for emphasis.
</div>
</body>

first-letter伪元素，用于向文本的首字母设置特殊样式
:before伪元素，可以在元素的内容前面插入新内容例：h1:before{content:url(http:google.com)}
:after伪元素，在元素之后插入新内容
first-child匹配任意元素的第一个子元素

伪类选择器

anckor伪类

a:link:未访问的链接
a:visited:已访问的链接
a:hover:鼠标悬停的链接
a:active:选中的链接

CSS选择器优先级

同一元素引用多个样式，排在后面的样式属性的优先级高
样式选择器的类型不同时候，id选择器>class选择器>标签选择器
标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先的相同的样式属性会被覆盖，继承的样式的优先级比较低
样式来源不同时，优先顺序为：内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式
三句话：越具体优先级越高，同样优先级的后面的覆盖前面的，带有!important标记的样式属性的优先级最高，但是最好少用。

CSS选择器及优先级