首页 > 作文

css选择器与权重问题———–一、四种基本选择器

更新时间:2023-04-07 12:58:55 阅读: 评论:0

css选择器

1、标签选择器

标签选择器选择的是整个html页面所有包含这个标签的元素,经常用于描述共性,没办法特殊的选择改变某一个元素
例如:

<!DOCTYPE html><html lang="en"><head>    <meta chart="UTF-8">    <title>css选择器</title>    <style>        p{            color: blue;        }    </style></head><body><div>    <h1>大家好</h1>    <p>欢迎大家</p>    <h3>观看我的博客</h3>    <p>谢谢大家</p>    <p>中国万岁</p></div></body></html>

效果展示:

我用标签选择器选择了所有的p标签并改变了他们的颜色,但是我并没有办法单独的改变任意一个p标签的颜色与其他p标签不同。
总结:
1、所有的标签比如ul、l社会心理学书籍i、label、dt、dl、input、div等都可以用标签选择器来选择
2、运用标签选择器多选中的标签并不是单独的一个,而是所有运用这个标签的元素都会被选中

2、id选择器(针对某一个特定的标签来使用,只能使用一次。css中的ID选择器以”#”来定义。)

以上面这个例子来说,我想把中国万岁这四个字变成红色而其他的字保持不变运用标签选择器就不能满足了,这时我们可以选用id选择器,代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta chart="UTF-8"> <title>css选择器</title> <style>临行密密缝 p{            color: blue;        }        #red{            color: red;        }    </style></head><body><div>    <h1>大家好</h1>    <p>欢迎大家</p>    <h3>观看我的博客</h3>    <p>谢谢大家</p>    <p id="red">中国万岁</p></div></body></html>

实现效果:

任何的标签都可以有id属性,不过就像我们人有身份证一样,id就像是标签的身份证,每个标签的id都不相同且只能使用一次。标签的名字可以任取但是要注意以下几点:

只能有字母、数字、下划线必须以字母开头。大小写严格区分,也就是说aa,和AA是两个不同的ID

类选择器(用点来定义)

例如

<!DOCTYPE html> <html lang="en"> <head> <meta chart="UTF-8"> <title>css选择器</title> <style> p{            color: blue;        }        #red{            color: red;        }        .green{            color: green;        }    </style></head><body><div>    <h1>大家好</h1>    <p>欢迎大家</p>    <h3>观看我的博客</h3>    <p class="green">谢谢大家</p>    <p id="red">中国万岁</p></div></body></html>

展示效果:

类选择器与id选择器有些相似,但是相比于id选择器类选择器更加的灵活,同一个html中类选择器可以被多次重复使用。但是为了后面写js方便,我们一般默认浙江莫干山标签上都用类选择器,写js的时阔达候用id选择器。也就是类上样式,id上行为

通配符(*)

通用选择器,将匹配任何标签。不建议使用,IE有些版本不支持,大网站增加客户端负担。
一般重置网页的时候有些时候会用到。例如:

*{            margin安徽大学历史系: 0;            padding: 0;        }

页面上的效果

本文地址:https://blog.csdn.net/my__road/article/details/107520517

本文发布于:2023-04-07 12:58:54,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/86f688bdacd7143b9896bed3c80f3db5.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:css选择器与权重问题———–一、四种基本选择器.doc

本文 PDF 下载地址:css选择器与权重问题———–一、四种基本选择器.pdf

标签:选择器   标签   中国   万岁
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图