css选择器

用于设置网页中元素的样式

层叠样式表
网页实际上是一个多层的结构，通过css可以分别为网页的每一次设置样式，最终我们看到的只有网页最上面的一层

一. css设置方式

内联样式，行内样式：在标签内部通过style属性来设置元素样式

问题：
使用内联样式，样式只能对一个标签生效，
如果希望影响到多个元素，只能为为每个标签中复制该样式
并且当样式发生变化是，需要一个一个的修改

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

内部样式表：将样式编写到head的style标签中

然后通过css选择器选中元素并为其设置样式
可以同时为多个标签设置样式，并且修改时只需要修改一处即可

问题：
内部样式表只对一个网页起作用，而不能跨界面使用

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            color: green;
            font-size: 30px;
        }
    </style>
</head>

外部样式表：将css样式编写到一个外部的css文件中

优点：
使样式在不同页面间进行复用
将样式写到外部的css文件中，可以使用到浏览器的缓存机制，加快网页的加载速度，提高用户的体验

新建 style.css文件,设置style

p{
    color: tomato;
    font-size: 50px;
}

然后通过link标签来引入外部的css文件

1 2	<!--将link标签写到head里--> <link rel="stylesheet" href="./style.css">

二. css语法

**注释：/注释内容/**

快捷键同样是ctrl+/

基本语法：

选择器

选中页面中的指定元素

eg. p的作用就是选择页面中的所有p标签
声明块

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

由一个个声明组成

声明：一个键值对结构

样式名对应样式值，名和值之间用: 隔开，以; 结尾

三. css选择器

简单选择器

1. 元素选择器

p{
    color: tomato;
    font-size: 30px;
}

2. id选择器(使用较少)

根据元素的id选择其中的一个元素（id唯一）

语法：#id的属性值{}

1	<p id="red">光年之外</p>

1
2
3

#red{
    color: brown;
}

3. 类选择器

class是一个标签属性，与id类似，但可以重复使用，可以通过class属性来为元素分组
根据元素的class属性值选中一组元素
也可以为一个元素设置多个class属性

语法：.class的属性值

1
2
3

<p class="blue abc">光年之外</p>
<p class="green">我愿守候未知里</p>
<p class="green">为你等待</p>

.green{
    color:green
}
.abc{
    font-size: 50px;
}
.blue{
    color: blue;
}

4. 通配选择器

选中页面中的所有元素

语法：*

1
2
3

*{
    color:red;
}

复合选择器

1.交集选择器

选中同时符合多个条件的元素
语法：选择器1选择器2选择器3…选择器n{ }
注意：其中如果有元素选择器，必须将元素选择器放在开头

1 2	<div class="red">我是div</div> <p class="red">我是p标签</p>

将class为red的元素设置为红色

1
2
3

.red{
        color: red;
}

将class为red的div的字体大小设置为30px
同时使用元素选择器和类选择器

1
2
3

div.red{
    font-size: 30px;
}

1	<div class="red2 a b c">我是div2</div>

.a.b.c{  
    color: blue;
}
/* div#box{} */

2. 选择器分组（并集选择器）

同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，…，选择器n{}

1 2	<h1>标题</h1> <span>哈哈</span>

h1,span{
    color:green
}
/* #b1,.p1,span,div.red{} */

3. 关系选择器

子元素选择器
选中父元素的指定子元素

语法：父元素>子元素{ }

例如：为div的子元素span设置字体颜色

<!-- <div> -->
<div class="box">
    我是一个div
    <p>
        我是div中的p元素
        <span>我是p中的span</span>
    </p>
    <span>我是div中的sapn</span>
</div>
<div>
    <span>另一个div中的span</span>
</div>

div.box>span{
    color:orange;
}
/*或者*/
div>span{
    color:orange;
}

/*div>p>span*/

后代元素选择器
选中是指定元素内的所有元素

语法：祖先后代

1
2
3

div span{
    color:orange;
}

兄弟元素选择器
选择下一个兄弟

语法：前一个 + 下一个

选择前一个以后的所有的兄弟

语法：前一个~兄弟

1
2
3

p + span{
    color:red;
}

1
2
3

p ~ span{
    color:red;
}

4.属性选择器

语法：

[属性名]

选择含有指定属性的元素
[属性名 = 属性值]

选择含有指定属性和属性值的元素
[属性名 ^= 属性值]

选择属性值以指定值开头的元素
[属性名 $= 属性值]

选择属性值以指定值结尾的元素
[属性名 *= 属性值]

选择属性值含有指定值的元素

<body>
    <p title="abc">光年之外</p>
    <p title="abcdef">缘分让我们相遇乱世意外</p>
    <p title="helloabc">命运却要我们危难中相爱</p>
    <p>也许未来遥远在光年之外</p>
    <p>我愿守候未知里</p>
    <p>为你等待</p>
</body>

eg.为有title属性的p标签设置属性

1
2
3

p[title]{
    color: tomato;
}

eg.为有title属性值为abc的p标签设置属性

1
2
3

p[title=abc]{
    color: tomato;
}

eg.为有title属性值为abc开头的p标签设置属性

1
2
3

p[title^=abc]{
    color: tomato;
}

eg.为有title属性值为abc结尾的p标签设置属性

1
2
3

p[title$=abc]{
    color: tomato;
}

eg.为有title属性值含有abc的p标签设置属性

1
2
3

p[title*=abc]{
    color: tomato;
}

5. 伪类选择器 :开头

伪类：不存在的类，用来描述一个元素的特殊状态
eg. 第一个子元素，被点击的元素，鼠标移入的元素
语法：一般以：开头

:first-child –第一个子元素
:last-child –最后一个子元素
:nth-child(数字) –第n个子元素

特殊值：n

n的范围是0~∞，即选中所有元素

2n或even 偶数项

2n+1或odd 奇数项

以上这些伪类选择器是根据所有的子元素进行排序选择

:first-of-type
:last-of-type
:nth-of-type()

功能与上述类似，不同的是在同类型元素中进行排序选择

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

<ul>
    <span>hello</span>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul>

ul > li:first-child{
    color: red;
}/*这是第一个li不显示红色*/
ul>li:first-of-type{
    color: red;
}/*这是第一个li显示红色*/
ul > li:not(:nth-of-type(3)){
    color:cornflowerblue
}

超链接（a元素）的伪类

:link 用来表示没访问过的链接（正常的链接）
:visited 用来表示访问过的链接

由于隐私原因，visited伪类只能用来修改字体颜色
:hover 用来设置鼠标移入时显示的状态
:active 用来设置鼠标点击时显示的状态

link和visited是超链接独有的，hover和active所有元素都有的

/*访问过的链接*/
a:link{
    color:red;
}
/*没访问过的链接*/
a:visited{
    color: orange;
}
/*鼠标移入*/
a:hover{
    color: yellowgreen;
}
/*鼠标点击*/
a:active{
    color: blue;
}

6.伪元素选择器 ::开头

伪元素：表示页面中一些特殊的并不真实存在的元素
语法：以::开头

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 选中的内容
::before 元素的开始
::after 元素的结束

before和after必须结合content属性使用，可以在前后添加内容

1
2
3

<div>Hello Hello How are you</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, eligendi ducimus quisquam dignissimos illum ipsum veniam exercitationem incidunt quos eos accusamus facilis! Voluptatem repudiandae quia illum quo temporibus, alias nisi.</p>

p{
    font-size: 20px;
}
p::first-letter{
    font-size: 50px;
}
p::first-line{
    background-color: burlywood;
}
p::selection{
    background-color: yellowgreen;
}
div::before{
    content: 'abc';
    color: red;
}
div::after{
    content: 'haha';
    color: blue;
}