首页 / CSS / CSS学习日记1——CSS各种选择器
CSS学习日记1——CSS各种选择器
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS学习日记1——CSS各种选择器,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2160字,纯文字阅读大概需要4分钟。
内容图文
![CSS学习日记1——CSS各种选择器](/upload/InfoBanner/zyjiaocheng/1018/a371f3838c3c4629b1caf31fdfb18732.jpg)
一.选择器:
1.三种基本选择器:
- 元素选择器 也叫标签选择器
- 类选择器,以符号(.)开头
- ID选择器,以符号(#)开头
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三种选择器练习</title>
<style>
h1{
color: papayawhip; }
.a1{
color: palegreen; }
#a2{
color: navy; }
</style>
</head>
<body>
<!-- 优先级:id选择器>类选择器>标签选择器 -->
<h1 > <!--标签选择器-->
选择器
</h1>
<h1 class="a1"><!--类选择器-->
选择器
</h1>
<h1 id="a2"> <!--id选择器-->
选择器
</h1>
</body>
</html>
效果图:
2.四种层次选择器:
- 后代选择器 语法:body h1 h2{ color : pink;}
- 子代选择器 语法:li>p{ color : pink; }
- 相邻兄弟选择器 选择自己相同元素的下一个元素(也可称弟弟选择器) 语法 .brother +p{ color : pink; }
- 通用选择器 选择自己相同元素以下的元素 语法:.brother ~p{ color : pink; }
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>四种层次选择器</title>
<style>
body h1 p{
color: pink; } /*后代选择器*/
p>i{
color: yellow; } /*子代选择器*/
.q1+a{
color: blue; } /*邻居兄弟选择器*/
.q2~a{
color: red; } /*通用选择器*/
</style>
</head>
<body>
<h1>
<p>选择器1</p>
</h1> <hr>
<p>
<i>选择器2</i>
</p> <hr>
<p>
<a>选择器3</a>
<a class="q1">选择器3</a>
<a>选择器3</a>
<a>选择器3</a>
</p> <hr>
<p >
<a>选择器4</a>
<a class="q2">选择器4</a>
<a>选择器4</a>
<a>选择器4</a>
</p> <hr>
</body>
</html>
效果图:
3.结构伪类选择器:
各种用法见表3-1:
例子—效果图:
4.属性选择器:
[attr]
表示带有以 attr 命名的属性的元素。[attr=value]
表示带有以 attr 命名的属性,且属性值为 value 的元素。[attr~=value]
表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少有一个值为 value。[attr|=value]
表示带有以 attr 命名的属性的元素,属性值为“value”或是以“value-”为前缀("-
"为连字符,Unicode 编码为 U+002D)开头。典型的应用场景是用来匹配语言简写代码(如 zh-CN,zh-TW 可以用 zh 作为 value)。[attr^=value]
表示带有以 attr 命名的属性,且属性值是以 value 开头的元素。[attr$=value]
表示带有以 attr 命名的属性,且属性值是以 value 结尾的元素。[attr*=value]
表示带有以 attr 命名的属性,且属性值至少包含一个 value 值的元素。
例子:
PS:不懂的多在网上搜一下,多看看,多实验,多思考。(好多名词解释太笼统,不容易理解,多看例子,用法就容易懂了)
内容总结
以上是互联网集市为您收集整理的CSS学习日记1——CSS各种选择器全部内容,希望文章能够帮你解决CSS学习日记1——CSS各种选择器所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。