前端css学习之css选择器（列举了多数选择器的使用）

前端css学习之CSS选择器

我这里把我知道的选择器都列举了，也都举了个例子，忘记了可以来看一下。

1. 通用选择器
   <div>我是div</div><p>我是p标签</p>'

   样式
   *{font-size: 26px;}

   显示结果
   
   这里设置的就是整个body里面的字体大小了。

2. 标签选择器
   这个就是你选的是那个标签就是给那个标签样式，如：
   <p>我是p标签</p>
   样式：
   p{font-size: 20px;}

3. 类选择器
   如：
   <p class="cla">我是p标签</p>
.cla{font-size: 27px;}

4. id选择器
   如：
   <p id="ids">我是p标签</p>
#ids{font-size: 20px;}

5. 复合选择器
   如：
   <p class="cla">我是p标签</p> <p>我是p标签</p>
p.cla{ font-size: 7px; }

6. 群组选择器
   <span>我是span标签</span> <p>我是p标签</p> <a>我是a标签</a>
span,p,a{ font-size: 7px; }

7. 后代选择器
   <div><p id='ids'>我是p标签</p></div>
div p{font-size: 10px;}

8. 直接后代选择器
   父标签 > 子标签：会选择出第一代子标签。
   <div id="ids"> <p>我是第一代p标签</p> <span> <p>我是第二代p标签</p> <span> </div>
div>p{ font-size:14px; }

9. 兄弟选择器 : 兄弟标签（同级的叫兄弟标签） + 兄弟标签：会选出第一个兄弟标签。
   <div > <p>p标签</p> <span>span标签</span> <span>span标签</span> <p>p标签</p> <span>span标签</span> <span>span标签</span> <p>p标签</p> <div>
   样式：
   p + span {font-size:50px;}
   兄弟标签 ~ 兄弟标签：会选出后面所有的兄弟标签。
   样式：
   p ~ span {font-size:50px;}

10. 属性选择器: 属性名：如[name]

<div> <p name="name1">第一个p标签</p> <p name="name2">第二个p标签</p> <div>
样式：
p[name]{font-size:50px;}
属性名：如[name=“xx”]
p[name='name1']{font-size:50px;}
11. 伪类（eg :active）和伪元素（eg ::first-line）
<div> <a href="#" id="a1">我是第一个a标签</a> <hr> <a href="#">我是第二个a标签</a> <div>
#a1:active{ font-size: 20px; color: aqua; }
::first-line { text-transform: uppercase }
12. 否定伪类选择器（eg div:not()）
<div> <p>我是p标签</p> <span>我是span标签</span> <a>我是a标签</a> </div>
div :not(p) { font-size: 20px; }

选择器的优先级

根据权值相加，权值越高则优先级越高

	*：0
	类：10
	属性：10
	伪类/伪元素：10
	id：100
	内联：1000
	外联（!import）：10000