标签：伪类 color 背景 元素 background 选择器 CSS 属性
属性选择器及背景
//属性选择器
属性选择器的标准语法如下：
E[attribute]
{
属性:属性值;
属性:属性值;
}
E 代表元素 attribute 代表属性
//自定义属性选择器
自定义属性：只需要在标签后加上自定义的属性，例如<div data-code></div>中的data-code
语法如下：
<style>
[data-code]{
属性:属性值;
属性:属性值;
}
</style>
若自定义属性内有值则需要在中括号内完整的写出。
属性选择器也可以选择已有属性，可选择同一标签内多个属性。中括号内就是属性[ ]。
//通配符选择器（也叫做子字符串选择器）
*所有 ^开头 $结尾 ~包含 |默认加-
[data-code^=“kk”]{属性值开头带有kk的}
[data-code$=“kk”]{属性值结尾带有kk的}
[data-code*=“kk”]{所有属性值带有kk的}
[data-code~=“kk”]{属性值带有kk单词的，中间加空格}
[data-code|=“kk”]{属性值带有kk-的（例如data-code=“kk-a”）}
//后代选择器（又称包含选择器）
后代选择器可以选择作为某元素后代的元素。
我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外的一些结构中不起作用。规则左边的选择器一段包括两个或多个用空格分割的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合夫可以解释为“…在…找到…”“…作为…的一部分”“…作为…的后代”，但是要求必须从右到左读选择器。
后代选择器的书写方法：把外层的标记写在前面，内层的标记写在后面，之间用空格分隔，当标记发生嵌套时，内层的标记就成为外层标记的后代了。
后代选择器语法格式如下：E1 E2{属性:属性值;属性:属性值;...}
//子（元素） 选择器
子元素选择器只能选择作为某元素的子元素。子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。
子选择器的语法格式如下：E > F{属性:属性值;属性:属性值;...}
//相邻选择器
相邻选择器可以选择紧接在另一元素后的元素，而且他们具有相同的父元素。即，E和F具有相同的父元素。且F在E后面紧紧相邻。
相邻选择器的语法格式如下：E + F{属性:属性值;属性:属性值;...}
//选择器分组
如下有两个选择器。
<style>
h1{color:gold;}
p{color:gold;}
</style>
为了同时应用这两个选择器，我们可以使用选择器分组。将两个选择器的标签用逗号隔开，这样就将两个标签应用了这一个属性。
<style>
h1,p{color:gold;}
</style>
//伪类选择器
伪类用来指定选择器某种特定状态或者条件，伪类在DOM中并不存在，但对用户是可见的。
语法如下：
选择符:伪类{属性:属性值;属性:属性值;...}
//动态伪类
1、hover 鼠标滑过
2、link 向未访问过的链接添加样式
3、visited 向访问过的链接添加样式
4、active 激活元素添加样式（例如：按下）
5、focus 向拥有输入键盘焦点的元素添加样式 solid 实线 border 边框
以下是5个例子：
<style>
a:hover{
color:red;
}
a:link{
color:green;
}
a:visited{
color:pink;
}
a:active{
color:blue;
}
input[type="text"]:focus{
border:10px soild #000000
}
</style>
//结构性伪类
1、first-child 匹配父类第一个子元素
2、last-child 匹配父类最后一个子元素
3、nth-child(n) 匹配父类元素第几个子元素 odd 2n 匹配奇数 even 2n+1偶数
下面是例子，以1为例，用法相同：
ul>li:first-child
{
color:red;
}
//语言伪类
1、:lang(值) 向带有指定lang属性元素添加样式
lang=“国际语言缩写” 代表该标签内所写语言。
用法与属性选择器相同。
//伪类元素选择器
::first-letter 第一个字
::first-line 第一行
font-size:控制文字大小
例如：
p::first-letter{
color:red;
font-size:22px;
}
p::first-line{
color:red;
font-size:22px;
}
与伪类选择器的不同点：
伪类选择器一个: 伪元素选择器两个 ::
仅限于块级元素
::before 在之前设定样式 1、需要配合content使用，content内一定要写内容，否则不显示。
::after 在之后设定样式
::selection 选中时的样式
div::before
{
width:100px;
height:100px;
background-color:red;
content:"*****"
}
div::selection
{
color:yellow;
}
//选择器优先级
!importment用法：
div
{
width:100px;
height:100px;
background-color: yellow !importment;
}
//微观权重
微观权重：
1,0,0,0,0 !importment （写在后面）
0,1,0,0,0 内联 外联
0,0,1,0,0 id选择器
0,0,0,1,0 类选择器 伪类选择器 属性选择器
0,0,0,0,1 元素伪类选择器
0,0,0,0,0 通配符选择器 后代选择器 兄弟选择器
//直观权重
直观权重：
10000 !importment （写在后面）
1000 内联 外联
100 id选择器
10 类选择器 伪类选择器 属性选择器
1 元素伪类选择器
0 通配符选择器 后代选择器 兄弟选择器
//使用原则
在一个节点上设定的样式越多，越受权重影响。
使用原则：
1、使用就近原则
2、继承样式的优先级别最低
3、!inportment的样式优先级别最高，如有冲突则重新计算。
//CSS单位
//尺寸单位
% 百分比
in（英寸） 1in=96px=2.54cm
cm（厘米）
mm（毫米）
pt point（点 点越多越清晰） 大约七十二分之一英寸
px 像素
em 浏览器默认字体大小 16px 1em=16px 2em=32px
如果当前元素设置字体大小则 em会根据当前元素进行倍数放大
如果没有在当前元素设置字体大小 则选择默认浏览器字体大小进行放大倍数
rem 根据根（html）元素字体尺寸的倍数
在html上设置字体大小，下面设置rem 会根据根元素大小进行倍数放大
//手机端布局方式
% 百分比布局 em布局 rem布局 flex（主流）布局
//视窗相对单位
vw 代表一屏的宽度
vh 代表一屏的高度
//颜色单位
1、颜色名 直接写单词，如red yellow
2、rgb rgb值 red 红色通道 green 绿色通道 blue 蓝色通道
如rgb(255,255,255) 即白色。
3、rgb rgb百分比值 如rgb(0%,100%,0%) 即绿色 理解为浓度
4、rgba red 红色通道 green 绿色通道 blue 蓝色通道 alpha透明通道（取值范围0~1）
5、16进制数 #000000 #ffffff
//背景
background-color 背景颜色
background-image 背景图片（image在使用时需要添加:url(地址) ，或者写none不显示背景图 ）
background-repeat 背景图平铺
{
background-repeat:repeat 背景图平铺 （不自适应）
background-repeat:no-repeat 背景图不平铺
background-repeat:repeat-x 背景图沿X轴平铺（横向平铺）
background-repeat:repeat-y 背景图沿Y轴平铺（纵向平铺）
background-repeat:round 自动缩放，充满整个容器（自适应）
background-repeat:space
}
//背景图定位
background-position:x y （X减小，图片向右走，视线向左；Y减小，图片向上走，视线下移）
icon 图标 雪碧图/精灵图 滑动门
为什么使用雪碧图？
1、提高浏览器加载速度（暂知）
background:颜色背景 url（地址） no-repeat（是否平铺） left（图片位置，left靠左显示 top向上显示，center居中显示） （支持IE）
标签：伪类,color,背景,元素,background,选择器,CSS,属性 来源： https://blog.csdn.net/qq_51745142/article/details/111032852
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。