ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css选择器

2021-08-04 15:32:39  阅读:137  来源: 互联网

标签:color 标签 选择器 red div c1 css


组合选择器

1.儿子选择器(大于号)
  div>p {}
2.后代选择器(空格)
  div p {}
3.毗邻选择器(加号):同级别紧挨着的下一个
  div+p {}
4.弟弟选择器(数字1左边的键)
  div~p {}
(上述的案例使用的都是标签选择器 其实也可以切换为任意选择器)
小练习
#d1>p {}
找id为d1标签内部所有的儿子p
.c1 .c2 {}
找class为c1标签内部所有class为c2的后代标签
div>.c1 {}
找div标签内部class为c1的儿子标签
.c1+#d1 {}
找class为c1标签同级别紧挨着的id为d1的标签

属性选择器

"""
HTML标签除了可以有自带的属性之外还支持自定义属性
<p id='d1' class='c1' name='jason' age=18 xxx=yyy></p>
"""
# 关键性的符号就是中括号
[name] {color:red}
  查找含有属性名name的标签
[name='jason'] {color:red}
  查找含有属性名name并且属性值是jason的标签
p[name='jason'] {color:red}
  查找含有书名name并且属性值是jason的p标签

分组与嵌套

# 分组(逗号隔开 同级别) 找p标签、div标签、span标签
p,div,span {
color:yellowgreen;
}

# 嵌套(不同的选择器可以混合使用) 找id=d1、class=c1、div标签
#d1,.c1,div {
color:yellowgreen;
}

div.c1 {} # 找class=c1的div标签

伪类选择器

# 以链接标签为例
1.未点击状态(了解)
a:link {
color:blue;
}

2.悬浮状态(掌握)
a:hover {
color:red;
}
3.点击状态(不松开)(了解)
a:active {
color:green;
}
4.点击之后的状态(了解)
a:visited {
color:pink
}

# 以input为例 获取焦点状态(聚焦) (掌握)
input:focus {}

伪元素选择器

# 通过css代码给html标签添加文本内容或者修改
# 改变文本第一个字
p:first-letter {
                font-size:48px;
                color:red;
            }
# 在文本开头添加内容
p:before {
                content:'#';
                color:red;
            }
# 在文本末尾添加内容
p:after {
                content:'?';
                color:blue;
            }
(该知识点在浮动中应用)

选择器优先级

1.相同选择器不同位置
就近原则(谁离我更近我就听谁的)
2.不同选择器不同位置(谁指定的目标更精确听谁的)
行内式(了解) > id选择器 > 类选择器 > 标签选择器
(优先级也可以打破 需要借助于关键字)
!important(尽量不要使用)

字体属性相关

1.长宽
width height
# 行内标签无法设置长宽 完全取决于内部文本

2.字体大小
font-size

3.字体颜色
第一种: color:red
第二种: color:#4d4d4d
第三种: color:RGB(128,128,128)
"""
如何利用常见软件取色
1.qq微信截图自带三基色取色(alt+a,鼠标下会显示鼠标指的颜色)
RGB(128,128,128)
2.利用浏览器自带的取色器取色(查看编码)
#4d4d4d
"""

文字属性

1.文字对齐(掌握)
text-align:center

2.文字装饰(重要)
text-decoration:none # 主要用于a标签取出自带的下划线

3.首行缩进(了解)
text-indet:32px

背景属性

1.背景色
background-color:RGB(255,160,0);

2.背景图片
background-image:url('111.png');

3.不自动填充(正常状态下背景大下大于图片大小会自动复制填充数张图片)
background-repeat:no-repeat;

4.图片居中
background-position:center

/*如果多个参数都是相同的前缀 那么可以简写*/
background:#336699 url('111.png') no-repeat center center;

 

标签:color,标签,选择器,red,div,c1,css
来源: https://www.cnblogs.com/wyhb/p/15098921.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有