第二课 css选择器

最新推荐文章于 2024-05-25 20:43:42 发布

Flyzz~

最新推荐文章于 2024-05-25 20:43:42 发布

阅读量89

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_45753808/article/details/109991752

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

尚硅谷html和css学习第二部分

CSS基本语法

注释 ‘/* */’
选择器和声明块

选择器

常用选择器

元素选择器：语法：标签名+{}
```
 				例如：p{},h1{}
```
id选择器：语法：#id属性值{}

例如：#leader{}
利用class属性，类似于id属性，但可以重复。

class选择器：语法：.class属性值{}

例如：.leader{}

可以为一个元素指定多个class,相较于id，class用的较多
通配选择器：语法：*{}

作用：为页面中所有元素添加样式

复合选择器

交集选择器：选同时满足多个选择器要求的元素

语法实例：div.red{} 若含有元素选择器，必须以元素选择器开头
选择器分组，并集选择器：选中多个选择器对应的元素

语法实例：h1,span{} #pp,h1,div.red{}

关系选择器

搞清楚父元素，祖先元素，子元素（直接包含的元素），后代元素，兄弟元素（有相同父元素的元素）概念

子元素选择器：选定父元素指定子元素

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

实例：div.p>span ,div>p>span

2.后代选择器：选定元素所有指定后代元素

语法：祖先后代

实例：#leader p , div p span

兄弟选择器：1.选择下一个兄弟，注意只选下一个

语法：上一个+下一个

实例：p+span

2.选择下面所有的兄弟，注意是后面

语法：兄~弟

属性选择器

文档里查

语法示例：p标签中

p[属性名]{} ->选择含有指定属性元素
p[属性名=属性值]{} 选择含有指定属性和属性值的元素
p[属性名^=指定值]{} 选择属性值以指定值开头的元素
p[属性名$=指定值]{} 选择属性值以指定值结尾的元素
p[属性名*=指定值]{} 选择属性值含有指定值的元素

伪类选择器

伪类：专门表示特殊状态，如第一个元素，鼠标点击的元素

语法: :+开头

查文档

超链接的伪类：

访问过的链接 :visited
没访问过的链接 :link

:hover伪类鼠标移上的状态

:active伪类鼠标点击时的状态

**提示：**在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

**提示：**在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

伪元素选择器

语法: ::+开头

::selection :选中的内容
::before :元素的开始

::after :元素的末尾

-必须结合content属性使用

其他相关知识

样式的继承

后代继承祖先的样式，但背景相关，布局相关等样式不会继承。

选择器的权重

当不同选择器选择样式冲突时，选择器的优先级

内联样式>id选择器>类，伪类选择器>元素选择器

优先级：1000>100>10>1

比较选择器优先级时，把所有选择器优先级相加进行计算，分组选择器单独计算。如果优先级相等，优先使用代码顺序较后的样式。另外继承的样式没有优先级。可以在某一个样式后加一个！important提高为最高优先级，但最好别用。

超链接的伪类中:link,:visited要放在:hover,:active前。

今天又遇到了一个问题：

        .Productnavigation .item a{
            font-size: 14px;
            color: #333;
            text-decoration: none;
            /*去除下划线*/
        }

        a:hover{
            color:#c81623;
            
        }