Web前端day03-CSSC选择器

1.css介绍

2.css选择器

2.1元素选择器

2.2id选择器

2.3复合选择器

2.4关系型选择器

2.5属性选择器

2.6伪类选择器

2.7a元素的伪类

2.8伪元素选择器

1.css介绍

css

-层叠样式

-网页实际上是一个多层结构，通过css可以分别为网页的每一层来设置样式，而最终我们只能看到网页的最上边一层

-总之一句话 css用来设置网页中的元素的样式

修改元素的样式有两种方法：1.内联样式(行内样式)

在标签内部通过style属性来设置元素的样式

-问题：内联样式只能对一个标签生效

如果希望影响到多个元素必须在每一个元素中都复制一遍

并且当样式发生变化时，我们必须要一个个的修改，非常的不方便

 <p style="color: red;font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>

2.css的方法修改样式

css基本语法:

选择器：通过选择器可以选中页面中的指定元素

比如p的作用就是选中页面中的所有p元素

声明块：通过块来指定要为元素设置的样式

声明块由一个个的声明组成

声明是一个名值对结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color: red;font-size: 40px;}h1{color: green;}</style>
</head>
<body><h1>今天天气真不错</h1><p>hhhhhhhhhh</p>
</body>
</html>

2.css选择器

2.1元素选择器

作用：根据标签名来选中指定的元素

语法：标签名{}

例子：p{} h{} div{}

2.2id选择器

作用：根据元素的id属性值选中一个元素

语法：#id属性值{}

例子： #box{} #red{}

<style>#red{color: red;}/* 将秋水。。设为蓝色*/.blue{color: blue;}</style>
</head>
<body><p>少小离家老大回</p><p>乡音无改鬓毛衰</p><p id="red">儿童相见不相识</p><p class=="blue">秋水共长天一色</p><p>落霞与孤鹜齐飞</p>
</body>

id与class的区别：class是一个标签的属性，它和id类似，不同的是class可以重复使用

可以通过class属性来为元素分组

可以同时为一个元素指定多个class属性

2.3复合选择器

2.3.1交集选择器：

作用：选中同时符合多个条件的元素

语法：选择器1选择器2选择器3选择器n{}

注意：交集选择器中如果有元素选择器，必须使用元素选择器开头

<style>/* 将class为red的div字体大小设置为30px */div.red{font-size: 30px;}.a.b.c{color: blue; }
</style><body><div class="red">我是div</div><p class="red2 a b c">我是p元素</p>
</body>

2.3.2选择器分组(并集选择器)

作用：同时选择多个选择器对应的元素

语法：选择器1,选择器2，选择器3

<style>h1,span{color: green;}</style>
</head>
<body><h1>标题</h1><span>yuiyuig</span>
</body>

2.4关系型选择器

父元素：

-直接包含子元素的元素叫做父元素

子元素：

-直接被父元素包含的元素是子元素

祖先元素：

-直接或间接包含后代元素的元素叫做祖先元素

-一个元素的父元素也是他的祖先元素

后代元素

-直接或间接被祖先元素包含的元素叫做后代元素

-子元素也是后代元素

兄弟元素

-拥有相同父元素的元素是兄弟元素

子元素选择器

/* 为div子元素span设置一个字体颜色红色(为div直接包含的span设置一个字体颜色)子元素选择器作用：选中指定父元素的指定子元素语法：父元素>子元素*/div>span{color: orange;}

后代元素选择器

/* 后代选择器;作用：选中指定元素的指定后代元素语法：祖先 后代*/div span{color: skyblue;}div>p>span{color: blueviolet;}

兄弟元素选择器

 /* 选择下一个兄弟语法：前一个 + 下一个选择下边所有的兄弟语法：兄 ~ 弟*/p + span{color: red;}p ~ span{color: red;}

2.5属性选择器

 <style>/* [属性名] 选择含有指定属性的元素[属性名=属性值] 选择含有指定属性和属性值的元素[属性名^=属性值] 选择属性值以指定值开头的元素[属性名$=属性值] 选择属性值以指定值结尾的元素[属性名*=属性值] 选择属性值含有指定值的元素*/p[title*=abc]{color: orange;}</style>
<body><p title="abc">少小离家老大回</p><p title="abcdf">乡音无改鬓毛衰</p><p title="helloabc">儿童相见不相识</p><p>笑问客从何处来</p><p >秋水共长天一色</p><p >落霞与孤鹜齐飞</p>
</body>

2.6伪类选择器

伪类(不存在的类，特殊的类)伪类用来描述一个元素的特殊状态

比如第一个子元素、被点击的元素、鼠标移入的元素

-伪类一般情况下都是使用：开头

:first-child第一个子元素

:last-child最后一个子元素

:nth-child()选中第N个子元素

特殊值：

n 第n个 n的范围e到正无穷

2n 表示选择偶数位的元素

2n+1或者odd 表示选择奇数位的元素

注意：以上这些伪类都是根据所有的子元素进行排序

:first-of-type

:last-of-type

:nth-last-of-type()

这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序

:not()否定伪类 -将符合条件的元素从选择器中去除

 <style>/* ul > li:first-of-type{color: red;} */ul > li:not(li:nth-of-type(3)){color: yellowgreen;}</style><body><ul><span>span元素</span><li>第一个</li> <li>第二个</li><li>第三个</li><li>第四个</li><li>第五个</li></ul>
</body>

2.7a元素的伪类

<style>/* link用来表示没有访问过的链接(正常的链接)*/a:link{color: red;}/* visited用来表示访问过的链接 由于隐私原因 visited这个伪类只能修改链接的颜色*/a:visited{color: orange;font-size: 50px;}/* :hover用来表示鼠标移入的状态*/a:hover{color: aqua;font-size: 50px;}/* a:active用来表示鼠标的点击*/a:active{color: yellow;}</style>

2.8伪元素选择器

伪元素表示页面中一些特殊的并不真实存在的元素(特殊的位置)

伪元素使用::开头

::first-letter表示第一个字母

::first-line表示第一行

::selection表示选中的内容

::before元素的开始

::after元素的最后

-before和after必须结合content属性来使用

 <style>p{font-size: 20px;}p::first-letter{font-size: 50px;}p::first-line{background-color: yellow;}p::selection{background-color: greenyellow;}/* div::before{content: 'abc';color: red;}div::after{content: 'haha';color: blue;} */div::before{content: '[';}div::after{content: ']';}</style>
<body><div>Hello How are you</div><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non ducimus voluptates impedit aliquam earum, debitis magnam quibusdam consequatur provident? Quas eum eaque reiciendis id laboriosam, earum beatae ullam error placeat!</p>
</body>