css3属性选择器

兄弟选择器

作用：获取相同父元素的所有兄弟元素 但是不包括元素之前的兄弟元素 中间有其他的标签也不会受到影响

.first~.meat{

background-color;

}

属性选择器

属性选择器的作用：根据标签的属性去筛选对应的元素

选择器语法：

e[attr]:包含attr属性

e[att=”val”]:属性值为val

e[att~=”val”]:属性值以空格隔开 其中一个属性是val

e[att^=”val”]属性值以val开头

e[att$=”val”]属性值为val结尾

e[attr*=”val”]属性中包含val

e[attr=”val”]属性以“-”分割 其中有val值 （如果属性只有val 也会被选中）

• 葫芦娃


• 黑猫警长


• 海尔兄弟


• 舒克和贝塔


• 喜羊羊与灰太狼


• 大头儿子小头爸爸

伪类

结构伪类：

E：first-child第一个子元素

E: last-child 最后一个子元素

E:nth-child(n) 第N个子元素 n从1开始 从前往后数

E:nth-last-child(n) 从后往前算

伪元素选择器

brfore&&after

需要配合content属性使用

E:before 在元素e之前添加

E:after 在元素e之后添加

以前是一个冒号 现在为了跟伪类选择器有区别 最好写两个冒号

E::before 在元素e之前添加

E::after 在元素e之后添加

first-letter 获取的是文字的第一个子

first-line 获取的是内容的第一行文字

selection

选中时的样式

只能设置背景色 前景色 文字阴影

placeholder

设置input标签的placehoder属性的显示颜色

颜色表示方法

rgba

rgb取值范围为 0-255

a取值为0-1

不设置a就没有透明度

• HSLA

  • Hue(色调):0-360
  • Saturation(饱和度):0-100%
  • Lightness(亮度):0-100%

  • Alpha(透明度):0-1（小数）

    color: hsla(308, 85%, 58%, 1);
    color: hsl(308, 85%, 58%);

  取色：

• 使用PS的拾色器即可

• 在线颜色转换

  透明度的说明

  opacity只能针对整个盒子设置透明度 子盒子及内容会继承父盒子的透明度 这是作为css的属性来使用的

  transparent始终完全透明，他是作为颜色的取值来使用color:transparent

  边框圆角

  border-radius

  从左上角开始赋值 顺时针旋转

  设置2个值 是对角线的形式 上左下右 上右下左

  设置3个值是 第1个值是上左 第2个值是上右下左 第3个值是 下右

  设置4个值是 上左 上右 下右 下左 顺时针

  盒子阴影

  box-shadow

  0px 0px 30px red

  ​

  文字阴影

  text-shadow

  inset 0px 0px 30px red

  第1个值inset 代表向里发散 第2个值代表水平 第3个值代表垂直 第4个值代表阴影模糊程度 第5个值代表阴影颜色

  盒子模型

  box-sizing属性用来设置默认的盒模型对元素的宽高计算方式

  content-box 是默认取值

  border-box 修改为该值后盒子的宽高直接就是宽度跟高度 不再受border跟padding的影响 但是会把盒子中内容压缩

  ​

  ​

  ​

  ​

  ​

  ​

  ​