CSS基本语法结构

1.CSS基本语法结构

选择器{声明1；

​ 声明2；}

声明包括属性和值

p{
color:#F00;
font-size:14px;
}

<style>标签

CSS代码是放在style标签中,它可以放在head中也可以放在body中 ,可以放到代码的任意位置

<style>p{color:green}
</style>

2.HTML中引入CSS样式

2.1行内样式

使用style属性引入CSS样式

<p style="color:green; font-size:14px;" >直接引入</style>

2.2内部样式表

CSS代码写在style标签中

<style>p{color:green;}
</style>

2.3外部样式表

2.3.1链接式

使用link标签链接

<link rel="stylesheet" href="path"/>

2.3.2导入式

使用@import导入

@import url("path")

2.4CSS基本选择器

2.4.1标签选择器

选择器直接使用HTML元素名称，用于选中页面中所有该类型的元素，并应用样式

p {color: blue;
}

2.4.2类选择器

以.开头，后面跟随类名，用于选中具有指定类属性的所有元素

.a {background-color: yellow;
}

页面中任何拥有class="a"的元素背景色都会变成黄色

2.4.3ID选择器

以#开头，后面跟随ID名，用于精确选中具有指定ID属性的单个元素。ID应保证页面中唯一

#a {font-weight: bold;
}

这会使得ID为a的元素文本加粗

3.CSS的高级选择器

3.1层次选择器

3.1.1后代选择器

后代选择器也叫包含选择器，祖先元素直接或间接的包含后代元素

<style>.a p{color:green;}
</style><div class="a"><p>000</p><div><p>111</p></div>
</div>
<p>222
</p>

此时000和111会变成绿色

3.1.2子代选择器

使用>来选择直接子元素

<style>
ul>li{list-style-type: none;}
</style>
<ul><li>111</li><li>222</li><li>333</li>
</ul>

选择所有ul元素的直接子元素li，去除列表样式

3.1.3相邻兄弟选择器

使用+，选择紧接在另一个元素之后的元素

<style>h1 + p{text-indent: 2em;}
</style><h1>000</h1>
<p>111</p>
<p>222</p>

111会首行缩进2，但222不会

3.1.4通用兄弟选择器

使用~，选择某个元素之后的所有同级元素

<style>.a ~ li{text-indent: 2em;}
</style><ul><li>111</li><li class="a">222</li><li>333</li><li>444</li><li>555</li></ul>

333,444,555会首行缩进2

3.2结构伪类选择器

以child结尾的是在父级里从一个元素开始查找，不分类型

**:first-child**选择作为父元素的第一个子元素的元素

**:last-child**选择作为父元素的最后一个子元素的元素

**:nth-child(n)**选择父元素中的第n个子元素

​ n 第n个 n的范围0到正无穷（全选）

​ even或2n 选中偶数位的元素

​ odd或2n+1 选中奇数位得到元素

以type结尾的是在父级里先看类型，再看位置

**:first-of-type **第一个子元素

:last-of-type最后一个子元素

**:nth-of-type() **选择同类型子元素中的第n个元素

<style>/*a下面的第一个元素变，也就是标题1变*/.a :first-child{border: 2px solid blue;}/*a下面的第1个子元素是p的时候变,此时无变化*/.a p:first-child{border: 2px solid blue;}.a h1:first-child{border: 2px solid blue;}/*a下面的最后一个元素是p的时候变 ，此时段落4变*/.a p:last-child{border: 2px solid blue;}/*a下面的第2个元素是p的时候变，此时段落1变*/.a p:nth-child(2){border: 2px solid blue;}/*a下面的偶数元素变*/.a :nth-child(2n){border: 2px solid blue;}/* n是从0开始的数列 把n=0开始往n+3里面计算就可 *//* n=0  n+3=3 *//* n=1  n+3=4 *//* n=2  n+3=5... 结果就是第3,4,5,6,7,8,9...变*//*a下面第二个元素以后是h1的变*/.a h1:nth-child(n+2){border: 2px solid red;}.a :first-child{border: 2px solid red;}/*a下面同类型的第一个变，结果标题1和段落1变（a下面共两个类型）*/.a :first-of-type{border: 2px solid blue;}/*a下面的最后一个元素是p时变，此时段落5变*/.a p:last-of-type{border: 2px solid blue;}/*a下面的h1类型中的第二个变，此时标题2变*/.a h1:nth-of-type(2){border: 2px solid red;}</style><div class="a"><h1>标题1</h1><p>段落1</p><h1>标题2</h1><p>段落2</p><p>段落3</p><h1>标题3</h1><p>段落4</p><h1>标题4</h1><p>段落5</p></div>

3.3属性选择器

1.某某[属性]

2.某某[属性=属性值]

3.某某[属性^=属性值]

4.某某[属性$=属性值]

5.某某[属性*=属性值]

6.某某[属性~=属性值]

7.某某[属性|=属性值]

<style>/*某某[属性] 选择到a标签且有title属性的变 */a[title]{background: yellow;} /*某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一模一样的，多一个空格都不行 */a[lang="zh"]{background: yellow;}/* id是last且有title属性且有class属性,属性值只能是links的变 */#last[title][class="links"]{background: yellow;} /*某某[属性^=属性值] a标签有class属性且属性值是li开头的 */a[class^="li"]{background-color: yellow;} /*某某[属性$=属性值] a标签有class属性且属性值结尾是t的变 */a[class$="t"]{background-color: yellow;} /*a标签有href属性且属性值结尾是.png的变*/a[href$=".png"]{background-color: green;} /*某某[属性*=属性值] 选择到a标签且有href属性且只要有字母b就可以 */a[href*="b"]{background-color: green;} /*某某[属性~=属性值] 选择到的是a标签且有class属性,且属性值有完整的itme词的变 */a[class~="item"]{background-color: green;} /*某某[属性|=属性值] 选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 */a[title|="link"]{background-color: green;}
</style>