css常用选择器

CSS常用选择器

基本选择器

1.元素选择器

语法：元素名{属性:属性值;}

特点：选中页面上所有对应元素名的元素

例：

p{
  color:red;
}

2.类选择器

语法：.类名{属性:属性值;}

特点：选中页面上拥有该类名的元素

注：一个元素可以有多个类名

例：

.box{
  font-size:40px;
}

3.id选择器

语法：#id名{属性:属性值;}

特点：选中页面上拥有该id名的元素

注：一个元素只能有一个id名，一个id名只能在页面上出现一次

例：

#box{
  font-weight:400;
}

4.通配选择器（通配符）

语法：*{属性:属性值;}

特点：选中页面上所有的元素

例：

*{
    color: red;
}

5.属性选择器

语法：[src="./img/background.jpeg"]{属性:属性值;}

特点：选中对应属性属性值的元素

例：

[src="./img/background.jpeg"]{
    width: 400px;
    height: 400px;
}
[src]{
  width: 400px;
  height: 400px;Ï
}
[src=""]{
  width: 400px;
  height: 400px;
}

6.伪类选择器

[选中第一个元素]

语法：元素:first-child{属性:属性值;}

例：

p:first-child{
    color: green;
}

[选中最后一个元素]

语法：元素:last-child{属性:属性值;}

例：

p:last-child{
    color: pink;
}

[选中第n个元素(方式1)]

元素:nth-child(){属性:属性值;}

特点：所有兄弟元素的名字相同时使用，若兄弟元素名字不同，则有可能选不中

• 直接写数字

例：

p:nth-child(4) {
    /* 4 */
    background-color: red;
}

• 写an+b公式 n从0开始

例：

p:nth-child(3n+1) {
    /* 1  4 7 10... */
    background-color: red;
}
  /* 选中前三个元素 */
p:nth-child(-n+3) {
    color: yellowgreen;
}

• 关键字 odd 奇数 even 偶数

例：

p:nth-child(odd) {
    /* 1 3 5 7 9 ... */
    background-color: red;
}

[选中第n个元素(方式2)]

元素:nth-of-type(){属性:属性值;}

特点：所有兄弟元素名称可以不同，先筛选类型，再选中第n个元素

例：

p:nth-of-type(even) {
    background-color: skyblue;
}

[否定伪类选择器]

语法：元素:not(:nth-child(n)){属性:属性值;}

特点：除了括号里的其他都被选中

例：

p:not(:nth-child(5)){
    font-size: 50px;
}

[a标签配套的伪类选择器]

书写顺序：link visited hover active 爱恨原则 love => hate

例：

/* 访问前*/
a:link{
    color: black;
}
/* 访问后 */
a:visited{
    color: gray;
}
/* 鼠标移入 悬停 */
a:hover{
    color: aqua;
}
/* 点击时 */
a:active{
    color: green;
}

7.伪元素选择器

[在元素之前添加内容]

语法：元素::before{content:‘添加的内容’}

特点：作为元素的子元素添加，是一个行内伪元素

例：

p::before{
    content: '在之前';
    color: red;
    font-size: 30px;
}

[在元素之后添加内容]

语法：元素::after{content:‘添加的内容’}

特点：作为元素的子元素添加，是一个行内伪元素。

例：

p::after{
    content: '在之后';
    color: blue;
    background-color: purple;
    display: inline-block;
    width: 100px;
    height: 100px;
}

[选中元素第一个字]

语法：元素::first-letter{属性:属性值;}

例：

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

[选中元素第一行]

语法：元素::first-line{属性:属性值;}

例：

p::first-line{
    color: pink;
}

[选中用户选择部分]

语法：元素::selection{属性:属性值;}

例：

p::selection{
    background-color: skyblue;
}

组合选择器

1.子级选择器

语法：父元素>子元素{属性:属性值;}

特点：只能一层一层选

例：

aside>p{
  color:green;
}

2.后代选择器

语法：祖先元素 后代元素{属性:属性值;}

特点：可以跳层去选

例：

aside div h3{
    color: green;
}

3.兄弟选择器1

语法：兄弟元素A+兄弟元素B{属性:属性值;}

特点：选中紧跟在A后面的兄弟B，即相邻选择器

例：

.box3+section{
    width: 200px;
    height: 100px;
    border: 3px dotted;
}

4.兄弟选择器2

语法：兄弟元素A~兄弟元素B{属性:属性值;}

特点：选中在A后面的所有兄弟元素B

例：

.box3~h5{
    color: orange;
}

5.并集

语法：a,p,h3,div>a{属性:属性值;}

特点：逗号前后都是独立的选择器

例：

.box4>p,.box4>section,.box4 a{
    font-size: 100px;
    color: chocolate;
}