css总结篇之选择器

css总结篇之选择器

嘿嘿，马上就要放假了，这篇文章为今年对css的总结，这是第一篇，总结我认为的较为常用且有点难度的css选择器，后面会陆续总结css我认为的比较重要的内容。说到css选择器，写代码时往往会明明加了选择器写了样式却还是运行不出来的烦恼，那可能是忘记css选择器的优先级了。

css选择器的优先级；

1. 内联样式(直接写在标签行内的)权重： 1000
2. ID选择器权重： 100
3. 类选择器权重： 10
4. 元素选择器权重：1
5. 当权重一致时，离标签最近的样式选择器有效
   6.不管有多少选择器累加，内联选择器优先级最高。

2. css选择器的类别；

1. 基础选择器：标签选择器（只要是html标签，基本都是选择器）；
2. ID选择器：
   1.格式：难以描述，直接上代码；

<div id="div"></div>

上图为div标签中添加了一个id为div的id选择器。

2. 添加样式：也是直接上代码：

#div {
            width: 100px;
        }

要给使用id选择器的容器加样式，记得要在id名字前加#号。

3. 类选择器
   格式：与id选择器格式较相似：

<div class="div"></div>

若要添加样式，则需在class名前加.表示：

.div {
            width: 100px;
        }

4. 通用选择器:用*表示：

* {
           margin:0;
           padding:0;
        }

通用选择器一般用于清除容器的内外边距，及标签自带的样式。
2.组合选择器（组合选择器比较常用，所以要再认真一点哈）。

1. 后代选择器

<div>
        <span></span>
    </div>

像这样，一个div中添加了一个span标签，span标签为div的后代，如果要给span标签添加样式，除了用标签选择器，还可以用后代选择器，写法如下：

div span {
            color: aqua;
        }

注意这里的div和span中间要有空格，即后代选择器标签之间用空格隔开。

2. 儿子选择器

<div>
        <span></span>
    </div>

仍然拿上面的例子，这时给span添加标签：

div>span {
            color: aqua;
        }

儿子选择器标签之间用>相连接。

3. 兄弟选择器——相邻选择器

<div> </div>
<p></p>
<p></p>
<p></p>

这个div后面跟着三个p标签，如果用相邻选择器p添加样式，所选中的p为第一个标签，即相邻选择器只对第一个相邻的被选标签起作用。

div+p{
    background-color: cornflowerblue;
}

如果给第一个p元素添加标签，用相邻选择器可以这样表示，注意，相邻选择器标签之间用+相连接。

4. 兄弟选择器——弟弟选择器

div~p{
    background-color: cornflowerblue;
}

注意：弟弟选择器标签之间用~连接。

3.属性选择器

1. 带有指定属性

<input type="text" value="text">

这是一个带有value属性且有value值的inout标签，
如果要给input添加标签，用属性选择器可以这样表示：

input[value] {
            color: #1c1c1c;
        }

2. 带有指定属性和值
   上述input还可以用带属性值的属性选择器添加样式:

input[value="text"] {
           color: #1c1c1c;
       }

属性值需要把属性的属性值添加上去。
4. 不常用的

1. 找到所有title属性以hello开头的元素

[title^="hello"]{}

2. 找到所有title属性以hello结尾的元素

[title$="hello"]{}

3.找到所有title属性中包含（字符串包含）hello的元素

[title*="hello"] {}

4. 找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素

[title~="hello"] {}

4.分组和嵌套

1. 当多个标签有同一个样式时，标签之间可以用逗号隔开，写成一个样式：

div, p{
    background:blue;
}

2. 嵌套，多种选择器可以混合起来使用：
   （1）id嵌套class

<p id="sp" class="myclass"></p>。 

写成

#sp.myclass{
background:blue;
};

（2）有很多，这里不一一列了。

5.伪类选择器

最常见的为鼠标的动作：悬停（:hover)、访问过(:visit)、聚焦(:foucs)等。

6.伪元素选择器

1. 最常见的为某个标签元素之前或之后插入内容：
   在p元素前加*号，颜色为红色；

p:before {
  content:"*";
  color:red;
}

在p元素之后：

p:after {
    /**/
  content:"*";
  color:red;
}

2. 把段首改成大号字体

p:first-letter {
  font-size: 40px;
}

3. 使用css选择器的注意事项；

1. 后代选择器和儿子选择器同样选的是父元素后面的标签，不同的是，后代选择器对父元素后面所有的被选子元素都起作用，而儿子选择器只对父元素的第一个被选子元素起作用。
2. 两个兄弟选择器直接的区别：用+连接的兄弟选择器只会选中相邻的被选标签中的第一个同类标签；而用~连接的标签则会选中被选标签的所有同类标签。
3. 带有特定属性和带有特定属性值这两类选择器一般用于input的value值中，或其他有属性的标签中。
4. 属性选择器与属性值选择器之间的区别：属性值选择器需要把属性及属性值当作选择的条件，而属性选择器只用属性当作选择的条件。