01selector

goer ... 2022-01-05

大约 4 分钟

CSS

[toc]

# css：

CSS 指层叠样式表 (Cascading Style Sheets) 定义html元素样式

# 结构

不同的浏览器可能需要不同的前缀是浏览器的私有属性

为了更好的向前兼容

前缀	浏览器	内核
-webkit	chrome和safari	以前是Webkit内核，现在是Blink内核；
-moz	firefox	Gecko内核
-ms	IE	Trident内核
-o	opera	Blink内核

# 1. 引入css的方式

内部样式表

写在html的style标签中的样式(建议写在head标签内)

<head>
	<style>
		p{
            color:blue;
		}
	</style>
</head>

1
2
3
4
5
6
7

外部样式表

新建css文件，用link标签引入

/* text.css */
p{
    color:blue;
    font-size:20px;
}

1
2
3
4
5

内联样式表

直接在html的标签内设置style
```
<p style="color:blue">
    小段落
</p>
```
1
2
3
优先级: 内联 > 内部 = 外部

提升样式:!important

# 2. 注释

提高代码的可读性，很重要哇！

/* 我是注释 */
p{
    color:blue;
}

1
2
3
4

# 3. 选择符

# (1)通配符

* 通配符选择器：所有的元素同时设置样式

eg:一般用于清除默认样式

*{
	margin:0;
	padding:0;
}

1
2
3
4

# (2)元素选择符

标签元素选择符：给同一类标签设置样式

p{
    color:blue;
}
div{
    width:100px;
}

1
2
3
4
5
6

# (3)群组选择符

,(逗号) 群组选择符: 给多个选择符设置同一样式

.class,p,span{
    color:blue;
    font-size:2px;
}

1
2
3
4

# (4)关系选择符

包含选择符

选择它包含的所有标签

div a{ 
  	/*div标签下的所以a标签*/  
    color:yello;
}

1
2
3
4

子选择符

只选择儿子属性的标签

div>a{
    /* 设置div儿子标签,孙子这些不会设置 */
    color:blue;
}

1
2
3
4

相邻选择符

div+a{
    /* 只会选择紧贴在div后面的a */
    color:pink;
}

1
2
3
4

兄弟选择符

div~p{
    /* 选择p标签兄弟中的div标签*/
    color:black;
}

1
2
3
4

# (5)id选择符

id名唯一: 一般用于js

#abc{
    color:#ccc;
}

1
2
3

# (6)class选择符

class类选择符: 最常用 灵活多用:一个标签用多个,多个标签用一个

# (7)伪类选择符

在标签名加 :

hover

鼠标经过元素显示的样式

div:hover{
    background-color:blue;
}

1
2
3

active

鼠标点击元素不动显示的样式
```
a:active{
    background-color:red;
}
```
1
2
3

focus

获取焦点时的样式

/*  <input type="text" class="two"> */
.tow{
    border:1px solid red;
    outline:none;
}

1
2
3
4
5
6

==outline:none==清除input框的默认线

not

不含这个元素

.ul li:not(.li){
    /* 除了类名是.li的,其他li的样式*/
    color:blue;
}

1
2
3
4

first-child

设置第一个儿子的样式

<ul class=".ul">
	<li></li>
    <li></li>
    <li></li>
</ul>

.ul li:first-child{
    font-weight:blod;
}

1
2
3
4
5
6
7
8
9
10

last-child

设置最后一个儿子的属性 -- 同上一样滴
only-child

只有一个儿子的,设置儿子属性
nth-child(n)

设置第n个儿子的属性: 1就是第一个儿子(一般用于有规律的样式)
```
2n --- 2 4  6  8 
3n-1 -- 2 5 8 
.ul li:nth-child(2n-1){
   	background-color:#008c8c;
}
```
1
2
3
4
5
nth-last-child(n)

和nth-child一样, 倒数第n个的样式

first-of-type

兄弟中的第一个, 和first-child有区别

<p class=".plist"> </p>  会选到我
<p class=".plist"> </p>
<p class=".plist"> </p>
<p class=".plist"> </p>

.plist:first-of-type{
	font-size:20px;
}

1
2
3
4
5
6
7
8

last-of-type

兄弟中的最后一个

only-of-type

没有其他兄弟的时候，设置自己

<p class=".plist"> </p>  会选到我
.plist:only-of-type{
    background-color:blue;
}

1
2
3
4

nth-of-type(n)

选择第几个兄弟 1就是第一个兄弟(一般用于有规律的样式)

<p class=".plist"> </p>  会选到我
<p class=".plist"> </p>
<p class=".plist"> </p>
<p class=".plist"> </p>
/* 选 2 4 6 */
.plist:nth-of-type(2n){
    color:black;
}

1
2
3
4
5
6
7
8

nth-last-of-type(n)

选择倒数第几个兄弟倒着数

empty

空内容被选中:选择符不能有内容

/*<p></p> 这样才选中我*/

p:empty{
	color:pink
}

1
2
3
4
5

checked

单选框和多选框被选中

<input type="checkbox" name="aa" id="a" class="in" />
<label for="a">打篮球</label>
<input type="checkbox" name="aa" id="b" class="in" />
<label for="b">跳街舞</label> 

.in:checked+label{
    font-size:30px;
    color:red;
}

1
2
3
4
5
6
7
8
9

enabled

未禁用的元素
disabled

禁用的元素：不能点击啊他

target

作为目标被选中的元素

<img src="images/1.jpg" alt="" id="aa" /><br>
<img src="images/2.jpg" alt="" id="bb" /><br>
<img src="images/3.jpg" alt="" id="cc" /><br>
<a href="#aa">11111</a>
<a href="#bb">22222</a>
<a href="#cc">33333</a>
<style>
	img:target{
        border:5px solid red;
        width:300px;
		}
</style>

1
2
3
4
5
6
7
8
9
10
11
12

Css 02selector2

01selector

# css：

# 结构

# 1. 引入css的方式

# 2. 注释

# 3. 选择符

# (1)通配符

# (2)元素选择符

# (3)群组选择符

# (4)关系选择符

# (5)id选择符

# (6)class选择符

# (7)伪类选择符

详情