CSS3选择器的使用

1、css3的引入

1.采用内联样式、行内样式（在元素的表头使用style属性来填写样式）

<div style="width: 200px;height: 200px;border: 1px solid #000;">坐看寒风起</div>

2、内部样式表（样式写到head中的style标签里）

    <style>
        *{
            color: red;/*将所有标签文字改成红色*/
        }
    </style>

3、引入外部css文件（用head中的link标签来引入）

    <link rel="stylesheet" href="./index.css"><!--href中填写css文件的地址-->

2.核心选择器

*2.1、通用选择器（号）

/* *号代表全部的 */
        *{
            color: red;/*将所有标签文字改成红色*/
        }

2.2.id选择器
在body中的div设置id标识符，然后在css中的使用#标识符的格式来选中，id标识符一般是唯一的

<div id="a1">123</div>

        #a1{
            color: red;
        }

2.3. 类选择器
在body中的div设置class标识符，然后在css中的使用.标识符的格式来选中。

<div class="a1">123</div>

        .a1{
            color: red;
        }

2.4. 元素选择器
使用元素选择器来选择属于某一类元素

        div{
            color: red;
        }

2.5、组合选择器
使用以上多种方式进行组合筛选来设置样式

<div class="a1">123</div>
<div class="a1">123</div>
<div id="a1">123</div>

        div.a1{
            color: red;
        }

3、层次选择器

3.1 子代选择器

作用：选择指定元素的指定子代元素
语法：父元素>子元素 {    } 

    <div class="a1">
        <div class="b1">目标元素</div>
        <div class="b2">
            <div class="b1">我不是</div>
        </div>
    </div>

选中a1类中的类为b1中的元素，只能在子代中选择

        .a1>.b1{
            color: red;
        }

3.2 后代选择器

作用：选择指定元素的指定后代元素
语法：祖先   后代{   }

    <div class="a1">
        <div class="b1">目标元素</div>
        <div class="b2">
            <div class="b1">我也是</div>
        </div>
    </div>

选中a1类中的类为b1中的元素，可以在后代中所有的元素中选择

        .a1 .b1{
            color: red;
        }

3.3 兄弟选择器

作用：选择下一个兄弟（紧挨着）
语法：前一个+下一个{     }

    <div>
        <ul class="a1">
            <li class="b1">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

选中　b1　的后面的兄弟　li2

        .b1+li{
            color: red;
        }

作用：选择下面所有的兄弟元素
语法：兄~弟{  }

    <div>
        <ul class="a1">
            <li class="b1">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

选中 b1 后面所有的 li 兄弟

        .b1 ~ li{
            color: red;
        }

4、属性选择器

[属性名]{}             p[title]                   选择含有指定属性的元素
[属性名=属性值]{}       p[title=as]           	 选择含有指定属性的元素和属性值的元素
[属性名^=属性值]{}      p[title^=as]              选择属性值以指定值开头的元素
[属性名$=属性值]{}      p[title$=d]               选择属性值以指定值结尾的元素
[属性值*=属性值]{}      p[title*=a]               选择属性值中含有某值的元素

    <p title="as">这是一个p标签</p>
    <p title="ac">这是一个p标签</p>
    <p title="asd">这是一个p标签</p>
    <p title="ambd">这是一个p标签</p>
    <p >这是一个p标签</p>
    <p >这是一个p标签</p>

/* 例子：title属性中含有b的元素*/
 p[title *= b] {
       color:red;
 }
 /* 例子：title属性中以a开头的元素*/
  p[title ^= a] {
       color:red;
 }

5、伪类选择器

伪类（不存在的类，特殊的类）
	伪类用于描述一个元素的特殊状态
		比如:第一个子元素、被点击的元素，鼠标移入的元素...
	伪类一般情况下都是使用：开头
         ：first-child  第一个子元素
         ：last-child  最后一个子元素
         ：nth-child（） 选中第n个子元素
特殊值:
         n    第n个      n的范围0～～正无穷
         2n或even       表示选中偶数位的元素
         2n+1或odd      表示选中奇元素
     -以上这些伪类都是根据所有的子元素进行排序
          ：first-of-type
          ：last-of-type
          ：nth-of-type()
 这几个伪类的功能和上述的类似，不通点是他们在同类型元素中进行排序。
          ：not() 否定伪类
              ---将符合条件的元素从选择器中去除      

<div>
    <ul>
    	<p>坐看寒风起</p>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</div>

下面的代码中，第一个和第二个区别就在于，
1.first-child是选择的是ul元素中的第一个子元素，如果第一个是子元素是li，则选择第一个元素，如果不是li则first-child不选中任何的元素。
2.first-of-type 是选择第一个是li的子元素，如果第一个子元素是li，则选择第一个，如果第一个子元素是其他的元素，
则往后找有没有li元素，如果有，选择其中的第一个li，如果没有，不选择任何元素。
3.第三个样式是选中所有的偶数元素，nth-child（）与nth-of-type（）区别跟上面是一样的
4.:not( ) 是否定伪类，排除某个选择其他的。

/*1*/
ul>li:first-child{
	color:skyblue;
}
/*2*/
ul>li:first-of-type{
	color: tomato;
}
/*3*/
ul>li:nth-of-type(2n){
	color: tomato;
}
/*4*/
ul>li:not(:nth-child(5)){
            color: tomato;
        }

6、选择器的权重

选择器	权重
！important	max
内联样式	1000
#（id选择器）	100
.（class选择器）	10
p（元素选择器）	1

一个权重为10的选择器大于十一个权重为一的选择器，选择器的权重不能用累加来越界。

7、备注：

以上选择器都是部分，详情请查看W3C官网
网址：W3C官网
选择器练习网站（看bilibili里尚硅谷的视频的链接）
网址：CSS Diner