CSS选择器

基本选择器

1.元素选择器

语法：元素名{属性：属性值；}

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

h1{
color:red;
}

2.类选择器

语法：类名{属性：属性值}

特点；选中页面上拥有该类名的元素，一个元素可以有多个类名。

.box{
width:200px;
height:200px;
}

命名规范

不可以纯数字或数字开头

区分大小写

包含数字、字母、下划线、连字符

望名知意

3.id选择器

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

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

#box1{
width：200px；
height：200px；
}

4.通配符

语法：*{属性：属性值；}

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

*{
padding：0；
margin：0；
}

5.属性选择器

语法：[属性=“属性值”]{属性：属性值；}

特点：方括号里可以只写属性，也可以写属性属性值

input[type="text"]{
    outline: none;
}

6.伪类选择器

• 选中第一个元素

语法：h1：first-child{属性：属性值}

section>h1:first-child{
color: blue;
}

• 选中最后一个元素

语法：h1：last-child{属性：属性值}

section>h1:last-child{
    background-color: aqua;
}

• 选中第n个元素 1

语法：h1：nth-child(){属性：属性值；}

特点：直接写数字关键字 odd 奇数 even 偶数an+b n从0开始

注意：如果兄弟元素名不同，则有可能选不中

section>h1:nth-child(3){
    font-size: 30px;
}
section>h1:nth-child(odd){
    font-size: 30px;
}
section>h1:nth-child(3n+1){
    font-size: 30px;
}

选中前三个

section>h1:nth-child(-n+3){
    font-size: 30px;
}

• 选中第n个元素2 使用场景：兄弟元素不同时

语法：h1：nth--of-type(){属性：属性值；}

特点：直接写数字，关键字 odd 奇数 even 偶数，an+b n从0开始

/* aside子元素section的第二个 */
aside>section:nth-of-type(2){
    width: 200px;
    height: 200px;
    background-color: aqua;
}

• 否定选择器

语法：p：not（：nth-child（5））{属性：属性值}

特点：除了第五个其它都被选中

header>a:not(:nth-child(5)){
    text-decoration: none;
    color: blue;
}

• a标签配套伪类选择器

爱恨原则 love hate lv

• 访问前 herf 属性要有值

a:link{
    color: brown;
}

访问后

a:visited{
    color: blueviolet;
}

鼠标悬停 移入

a:hover{
    color: blue;
}

鼠标点击时

a:active{
    color: aquamarine;
}

7.伪元素选择器

• 在元素之前添加内容

特点：如果要设置宽高，需要先display：block；是作为h3的子元素添加

语法：h3：：before{content:属性：属性值；}

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

• 在元素之后添加内容

语法：h3：：after{content:属性：属性值；}

 h3::after{    content: '在之后';    color: azure;    font-size: 30px;}

• 选中第一行

语法h4：：first-line{属性：属性值；}

h4::first-line{
       color: blanchedalmond;
}

• 选中第一个字

语法h4：：first-letter{属性：属性值；}

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

• 选中用户选择部分

语法：h4：：selection{属性：属性值；}

h4::selection{
    background-color: blue;
}

组合型选择器

1.子级选择器

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

特点：只能一层一层选

div>section>p{
    font-size: 20px;
    color: azure;
}

2.后代选择器

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

footer a{
    font-size: 29px;
}

3.兄弟选择器1

语法：p+div{属性：属性值；}

特点：选中p标签后的第一个元素div

p+div{
    width: 200px;
    height: 200px;
    background-color: blueviolet;
}

4.兄弟选择器2

语法：p~div{属性：属性值；}

特点：选中p标签后的所有兄弟元素div

p~div{
    width: 200px;
    height: 200px;
    background-color: blueviolet;
}

5.并集选择器

语法：h1，div>p,.box{属性：属性值；}

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

.box>p,h6{
    font-size: 40px;
    color: black;
}