前端开发 --初识css

一、基本选择器

1、元素选择器

根据元素名称做选择 

复制代码

div {
color: red;
background: pink;
}

 

2、属性选择器

复制代码

div[id]有id属性的div元素
div[id=xx]有id属性且id属性值为xx的div元素
div[ id^=xx]有id属性且id属性值以xx开头的div元素
div[id$=xx]有id属性且id属性值以xx结尾的div元素
div[id*=xx]有id属性且id属性值包含xx的div元素

 

 3 id选择器

复制代码

#aa {
color: red;
background: pink;
}

4 class选择器

 

复制代码

.aa {
    color: red;
    background: pink;
} 

5包含选择器 

复制代码

选择器1 选择器2{} 强调包含关系
h1 p {
    color: red;
    background : pink;
} 

6子选择器

复制代码

选择器1>选择器2{}强调父子*/

h1>p {
    color: red;
    background: pink;
}

7兄弟选择器

复制代码

平级下找后边的兄弟元素选择器1~选择器2{} 所有弟弟选择器2为* */

.aa~.demo {95
    color: red;
    background: pink;
}

.aa~* {
color: red;
background: pink;
}

8选择器组合

复制代码

选择器1,选择器2{}

div,
p,
span,
a,
h4 {
color: red;
background: pink;
 }

/*选择所有* */

*{
    color: red;
    background : pink;
 }

二、伪元素选择器

1首字母::first-letter块级元素

复制代码

div: :first-letter {135
    color: gold;
    font-size: 40px;
 }

2首行 ::first-line 块级元素

复制代码

div {
word-break: break-all;
}


div::first-line {
    color: gold;
    font-size: 40px;
 }

3往前加东西 before

复制代码

div: :before {
content:"新添加的内容";
background: gold;
color: red;
font-size: 40px; 
}

4往元素后加东西 after

复制代码

div: :after {
content:“新添加的内容";
background: gold;
color: red;
font-size: 40px;
 }

三、伪类选择器

1结构性伪类选择器

复制代码

:nth-child(n)正着数:nth-last-child(n)倒着数﹑只认数字，如果类型刚好相符合，则找到
n可以是数字也可以是表达式 2n+1 3n+2 n从0开始也可以是odd奇数个even偶数个

第一个 :nth-child(1) :first-child :nth-last-child(1)

最后一个 :last-child


: nth-of-type(n)正着数:nth-last-of-type(n)
倒着数既认数字也认类型，找同类型下的第n
个 n可以是数字﹐也可以是表达式 2n+1 3n+2 n从0开始也可以是odd奇数个even偶数个

第一个 :nth-of-type(1) :first-of-type

最后一个 :last-of-type :nth-last-of-type(1)


ul li:nth-child(1){
background: gold;

color: red;
}

ul li:nth-last-of-type(1){
background: gold;
color: red;
 } 

 /* hover鼠标悬停状态 */

ul li:hover{
    background: gold;
    color:red;
} 

/* focus焦点状态 */

input:focus{
    background: red;
} 

/* checked选中状态 */

 input :checked{
    设置阴影
    box-shadow: 3px,3px,3px red;
} 

/* 其他选选择器 */
 
 not()表示过滤掉某个或某些元素 

/* css选择器优先级 */

/* 1.选择器写的越长(越准确)优先级越高 */

/* 2.id选择器>class选择器>元素选择器 */

/* 同级别长度下css安装顺序执行,后边的代码会把前边的样式覆盖掉 */

/* 以上规则适用于大多数常见 若特殊常见不适用,自行测试 */