| CSS

CSS查漏补缺（一）

最近在图书馆借了一本CSS方面的书想巩固下CSS基础，书名是《CSS设计指南》,看完感觉是一本还错的CSS基础书籍，然后我便把自己CSS方面还比较薄弱的地方写到了笔记里，以后自己还可以复习下，嘻嘻~

特殊的上下文选择符

子选择符>

标签1>标签2
标签1是标签2的父元素，不能是祖先元素

紧邻同胞选择符+

选择符合条件的紧跟在后面的同胞元素（兄弟元素）

一般同胞选择符~

选择所有符合条件的同胞元素（兄弟元素）

ID和类选择符

标签带类选择符

p.special
即表示选择P标签且类名为special的元素

多类选择符

.special.featured 两个类名之间没有空格！
即表示选择同时具有special和featured类名的元素

属性选择符

属性名选择符

img[title]
选择带有title属性的img元素

属性值选择符

是楼上选择符的增强版= 。 =
img[title ="red flower]"
选择title属性为xxx的img

伪类

UI伪类

:focus伪类

e:focus
当用户单击元素e（e表示任何元素）时会获得焦点，然后添加相应样式

:target伪类

e:target
如果用户点击一个指向指定页面中其他元素的链接，则那个元素就是目标 target ,可以用target伪类选中它

1
2
3
4
5
<a href="#more_info">more_info</a>
<p id="more_info">点击A标签跳转到这里了，并激活了target属性</p>
     #more_info:target {
      	background-color: #eee;
      }

表示当点击a标签会跳到p元素，此时p元素添加样式背景颜色

结构化伪类

类似于JQ的选择器语法
e:frist-child 和 e:last-child
选择e元素的第一个/最后一个子元素
e:nth-child(n)
n表示数值，选择e元素的第n个子元素
nth-child伪类常用于提高表格的可读性

伪元素

  • ::first-letter 选择首字符
  • ::first-line 选择文本段落的首行
    （简直良心选择器啊T_T，以前不知道，一直用span标签给首字符加特效）

  • ::before 和 ::after伪元素
    可用于在特定元素前面和后面添加内容，比如可以这样：

    1
    2
    3
    <p class="age">25<p>
        p.age::before{content:"Age:  ";}
        p.age::after{content:"years  ":}

    这样可以根据数据库动态的改变age的数字，但前后格式都不会变化

CSS规则声明

数字值

相对值 em ex %

  • em表示一种字体中字母M的宽度
  • ex表示一种字体中字母X的高度
    使用em，ex则可以根据字体的变化动态改变字体的行距
  • %非常适合设定被包含元素的宽度

    颜色值

    列举几个以前很少用到的颜色值设定方法、
  • RGB百分比值（R%,G%,B%)
  • HSL(色相，饱和度%，亮度%)
  • Alpha通道（用于设置颜色的不透明度）