CSS1-选择器

基本选择器

标签选择器

标签名{}　　　

p {color: "red";}

ID选择器

#ID名{}　　　　关键字 #

#i1 {
  background-color: red;
}

类选择器

.类名{}　　　　关键字 .

.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}

通用选择器

*{}　　　　关键字 *

* {
  color: white;
}

组合选择器

后代选择器

我的之下所有

选择器 选择器{} 　　关键字:空格

li a {
  color: green;
}

儿子选择器

仅我的下一级别

选择器>选择器{} 　　关键字:>

div>p {
  font-family: "Arial Black", arial-black, cursive;
}

毗邻选择器

找同级的毗邻

选择器+选择器{}        关键字 + 

div+p {
  margin: 5px;
}

弟弟选择器

同级往下所有,被打断也找

选择器~选择器{}          关键字 ~

#i1~p {
  border: 2px solid royalblue;
}

属性选择器

通过属性找

选择器[属性]{}         关键字[]

p[title] {
  color: red;
}

通过属性和值找

选择器[属性="值"]{}        关键字 []

p[title="213"] {
  color: green;
}

分组和嵌套

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

选择器1,选择器2{}        关键字 ,

div, p {
  color: red;
}

嵌套

各种组合选择器

后代选择器,儿子选择器,毗邻选择器,弟弟选择器

伪类选择器

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */        # 常用
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

伪元素选择器

first-letter
    常用的给首字母设置特殊样式
    p:first-letter {
      font-size: 48px;
      color: red;
    }

before
    在每个<p>元素之前插入内容
    p:before {
      content:"*";
      color:red;
    }
after
    在每个<p>元素之后插入内容
    p:after {
      content:"[?]";
      color:blue;
    } 

加强选择器

黏在一起写，表示加强选择器
必须两个条件都符合

选择器选择器{}        

div#id1{
    color:blue;
}

选择器的优先级

继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

优先级

1,选择器相同:就近原则(越靠近标签优先级越高)

2,内敛样式>ID选择器>类选择器>元素(标签)选择器

3,除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
万不得已可以使用!important