前端——选择器

最新推荐文章于 2024-11-05 21:16:39 发布

原创最新推荐文章于 2024-11-05 21:16:39 发布 · 656 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端专栏收录该内容

6 篇文章

订阅专栏

基础选择器

1.标签选择器 p

例如p标签，可以更改所有此标签的格式

格式为 标签{ }

Html文件

<link rel="stylesheet" href="./demo01.css">

<body>

    <p>hello css</p>

    <p>hello html</p>

    <p>hello js</p>

</body>

Css文件

p{
    color: blue;

    font-size: 40px;
}

2.类选择器 .

优先级比标签选择器高

针对类class进行设定格式

格式为 .class{ } ps:注意类名前有点

<p class="study">学习</p>

<p class="read">读书</p>

<p class="eat">吃饭</p>

.eat{ color: red; }

.sleep{ color: blue; }

.study{ color: green; }

一个元素可以有多个类名,但只能有一个Id，例如学习的类名可以是 today study hard

类名之间用空格隔开，多类名是为了能够文字效果的叠加

    <p class="today study">学习</p>

    <p class="read">读书</p>

    <p class="eat">吃饭</p>

.eat{color: red;}

.sleep{color: blue;}

.study{color: green;}

.today{font-size: 40px;}

3. Id选择器 #

与类选择器类似

格式为 #开头id选择器

Id选择器的值和html中某个元素的id值相同

Html的元素id不必带#

Id是唯一的，不能被多个标签使用（这点和类选择器有大区别）

 <p id="fe">前端开发</p>

 <p id="server">后端开发</p>


#fe{color: pink;}

#server{color: green;}

4. 通配选择器 *

使用*的定义，选中所有的标签

通配符选择器在实际开发中是用来针对页面中所有的元素默认样式的消除，主要用来消除边距。

页面所有内容都会改变，不需要被页面结构调用

*{ background-color: beige; }

背景颜色改为淡黄色

复合选择器

复合选择器就是指将之前的选择器复合使用

1. 后代选择器

又叫包含选择器，选择某个父亲中的某个子元素，也可以是爷孙关系，只要是包含关系均可使用

元素1 元素2 {样式声明}

元素1是父级，元素2是子级，只选元素2，不影响元素1

<ul>

     <li>吃饭</li>

     <li>吃饭</li>

     <li>吃饭</li>

</ul>

<ol>

     <li>吃饭</li>

     <li>吃饭</li>

     <li>吃饭</li>

</ol>

将有序列表文字改成红色，

ol li{color: red;}

.hobby li{color: red;}

li a {color: red;}

2. 伪类选择器

伪类选择器，用来定义元素的状态（鼠标指针拖动到某一图标或文字时，发生变化（颜色、大小））

a:link 选择未访问过的链接

a:visited 选择已经访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接（鼠标按下了但是未弹起）

链接默认是蓝色或者紫色

要求链接默认是黑色

当鼠标悬停在上面时，显示红色

当鼠标按下去没有回弹时，显示绿色

a{color: black;}

 a:hover{color: red;}

 a:active{color: green;}

hover和active也同样适用于其他标签按键

少年没有乌托邦，心向远方自明朗！

如果这个博客对你有帮助，给博主一个免费的点赞就是最大的帮助❤
欢迎各位点赞，收藏和关注哦❤
如果有疑问或有不同见解，欢迎在评论区留言❤
后续会继续更新大连理工大学相关课程和有关前端的内容和示例
点赞加关注，学习不迷路，好，本次的学习就到这里啦！！！

我们下次再见喽！