05.CSS选择器

最新推荐文章于 2024-02-21 08:42:56 发布

AlbertLiangzt

最新推荐文章于 2024-02-21 08:42:56 发布

阅读量285

点赞数

分类专栏：学习笔记-Javaweb 文章标签： html css

本文链接：https://blog.csdn.net/AlbertLiangzt/article/details/61934874

版权

学习笔记-Javaweb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1. 元素选择器

body{...code...}    
h1{...code...}

2.类选择器：

选择一类（class="某值"）具有相同共性的元素

.swim{ color: blue; }

3.id选择器：

根据id选择唯一的元素

#beauty{ color:red; }

4.选择器组：

写出一组选择器，会选中每个选择器对应的目标的并集

.swim,#beauty{ font-weight:bold; }

5 派生选择器：

选择满足条件的所有后代

后代选择器：所有的后代

#words b { color:pink; }

子类选择器：子类

#words&gt;b { font-weight:bold; }

6伪类选择器：

根据元素的状态选择元素

a)选择未访问的过的超链接：

a:link { color:blue; }

b)选择访问过的超链接： ——访问后变色

a:visited { color:red; }

c)选择激活态的按钮： ——点击时

#b1 { background-color:#ccc; }

d)选择有焦点的文本框： ——输入时变色

#t1 {background-color:#ccc; }

e)选择悬停态的图片 ——鼠标悬停放大

img:hover { width:300px;height:300px; }

<body>
    <h1>随便写点什么</h1>
    <p class="swim">菲尔普斯</p>
    <p class="swim">孙杨</p>
    <p id="beauty">奥黛丽赫本</p>
    <p id="words">
    天安门广场，<u>位于北京市中心，<b>地处中国北京东城区东长安街</b>，北起天安门</u>，<b>南至正阳门</b>，东起中国国家博物馆，西至人民大会堂
    </p>
    <p>
    <a href="www.github.com">Github</a>
    <a href="www.stackoverflow.com">Stack overflow</a>
    </p>
    <p><input type="button" value="button1" id="b1"></p>
    <p><input type="text" id="t1"></p>
    <p>
    <img src="../images/01,jpg"/>
    <img src="../images/02.jpg"/>
    </p>
</body>

选择器优先级：

元素选择器：1

类选择器：10

ID选择器：100

.content div：10+1

.data：10

.content .data：10+10

AlbertLiangzt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05.CSS选择器

1. 元素选择器body{...code...} h1{...code...}2.类选择器：选择一类（class="某值"）具有相同共性的元素.swim{ color: blue; } .swim{ color: blue; } 菲尔普斯孙杨3.id选择器：根据id选择唯一的元素#beauty{ color:red; } 奥黛丽赫本 4.选择器组：写出一组选择器，会选
复制链接

扫一扫