css3选择器+css3属性

前端菜鸟的分享
143 阅读5分钟

CSS3选择符

  • 属性选择器 1、E[attr]：只使用属性名，但没有确定任何属性值 2、E[attr=“value”]：指定属性名，并指定了该属性的属性值 3、E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的 4、E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的 5、E[attr*=“value”]：指定了属性名，并且有属性值，而且属值中包含了value

![](2.png)

  • 伪类选择器

    • 结构性伪类选择器X:first-child 匹配子集的第一个元素。IE7就可以支持X:last-child匹配父元素中最后一个X元素X:nth-child(n) 用于匹配索引值为n的子元素。索引值从1开始X:nth-last-child(n) 从最后一个开始算索引。

    X:first-of-type匹配同级兄弟元素中的第一个X元素​ X:last-of-type**匹配同级兄弟元素中的最后一个X元素 ​ X:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素X ​ X:only-of-type匹配属于同类型中唯一兄弟元素的X ​ X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X

  • 目标伪类

    • 目标伪类选择器E:target 选择匹配E的所有元素，且匹配元素被相关URL指向
    • UI 元素状态伪类选择器E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素 E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素 E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E E::selection 匹配E元素中被用户选中或处于高亮状态的部分

  • 动态伪类选择器a :link 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 a :visited 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 E :active 用户行为选择器 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上 E:hover 用户行为选择器 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点

  • 层级选择器E>F 子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素 E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面 E~F 通用选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

CSS3属性

文本阴影属性

  • text-shadow
  • 说明：水平、垂直阴影的位置允许负值 可进行多阴影设置(逗号分隔的方式)

@font-face

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体（@font-face这个功能早在IE4就支持）
@font-face的语法规则:
​


@font-face { 
    font-family: <YourWebFontName>;
     src: url();
    [font-weight: <weight>]; 
    [font-style: <style>]; 
}


iconfont字体图标库的使用

背景属性


Background-origin 背景原点（背景的起始点）
    说明：指定background-origin属性应该是相对位置
    属性值
        padding-box 背景图像填充框的相对位置     默认值
        border-box  背景图像边界框的相对位置
        content-box 背景图像的相对位置的内容框     
        
Background-clip 背景裁切
    说明：background-clip 属性规定背景的绘制区域。
    属性值
        border-box  背景被裁剪到边框盒。
        padding-box 背景被裁剪到内边距框。默认值
        content-box 背景被裁剪到内容框。     
        
Background-size 背景尺寸
    说明：background-size 规定背景图像的尺寸
    属性值
        length  (10px)
            规定背景图的大小。第一个值宽度，第二个值高度。
        Percentage(%)
            以百分比为值设置背景图大小
        cover
            把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
        contain
            把图像图像扩展至最大尺寸，以使其宽度或高度完全适应内容区域。

​ ​ css3多背景图的设置​ eg：background:url(),url()

颜色模式


    1、rgba 颜色模式
    2、 Hsl 颜色模式（了解） 
    3、 Hsla 颜色模式（了解）
    就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色，色调(Hue)色调最大值360，饱和度和亮度有百分比表示0-100%之间。

CSS圆角

Border-radius

  • border-radius: 5px 10px 20px 50px

批注 2022-03-03 194301.png

border-radius: 2em/1em

批注 2022-03-03 194329.png

  • border-radius:10px 20px 30px 40px/40px 30px 20px 10px

批注 2022-03-03 194350.png

盒子阴影

box-shadow 盒子阴影


    h-shadow    必需的。水平阴影的位置。允许负值
    v-shadow    必需的。垂直阴影的位置。允许负值
    blur    可选。模糊距离
    spread  可选。阴影的大小
    color   可选。阴影的颜色。
    inset   可选。从外层的阴影（开始时）改变阴影内侧阴影
    box-shadow: 10px 10px 5px 10px #888888 inset;
  • box-shadow: 10px 10px 5px 10px #888888 inset;

\

avatar
文章
阅读
粉丝