新增css3选择器，css3常用边框属性，box-shadow --盒子阴影

会玩代码的猫

已于 2023-04-01 09:56:38 修改

阅读量137

点赞数

文章标签： html5 css html 前端 Powered by 金山文档

于 2023-03-20 23:25:11 首次发布

本文链接：https://blog.csdn.net/weixin_43465508/article/details/129673926

版权

浏览器的私有前缀

火狐 --内核（Gecko) -- -moze-

谷歌 -- 内核（webkit）-- -webkit-

欧朋 -- 内核（persto）-- -o-

IE -- 内核（Trident）-- -ms-

div{
-webkit-border-image://webkit就是私有前缀
boder-radius:50%;
}

css选择器

属性选择器

E:element - 元素 attr - 属性

E[attr]:指定了属性名，但没有指定属性值

E[attr='value']：指定了属性名，并且指定了了该属性的属性值

E[attr~='value']：指定了一个属性名，并且属性值是一个词列表，包含了Value值

css3新增的三个

E[attr^='value']：指定属性名字以及属性值，但是是以value开头

    <style>
        div[class^="box"]{
            background-color: tomato;
        }
    </style>
<body>
    <div class="box" id="div1" title="标题">box</div>
    <div class="abox">abox</div>
    <div class="boxa">boxa</div>
    <div class="aboxa">aboxa</div>
    <div id="div">id</div>
</body>

E[attr$='value']：指定属性名字以及属性值，但是是以value结尾

    <style>
        div[class$="box"]{
            background-color: tomato;
        }
    </style>
<body>
    <div class="box" id="div1" title="标题">box</div>
    <div class="abox">abox</div>
    <div class="boxa">boxa</div>
    <div class="aboxa">aboxa</div>
    <div id="div">id</div>
</body>

E[attr*='value']：指定属性名和属性值，匹配属性值含有value在任何位置的元素（但是要慎用）

    <style>
        div[class*="box"]{
            background-color: tomato;
        }
    </style>
<body>
    <div class="box" id="div1" title="标题">box</div>
    <div class="abox">abox</div>
    <div class="boxa">boxa</div>
    <div class="aboxa">aboxa</div>
    <div id="div">id</div>
</body>

结构性伪类选择器

:first-child()

用户获取属于其父元素的第一个子元素

:last-child()

用户获取属于其父元素的最后一个子元素

:nth-child()

括号中写第几个，就选择第几个子元素

:nth-last-child()

匹配属于其元素的第N个子元素的每个元素，无论元素的类型，从最后一个元素开始计数，n可以是数字

（1）规定属于其元素的每个li元素，从最后一个子元素开始

li::nth-last-child(3){
    backgroud-color:red;
}

（2）为奇数偶数，指定两种不同的样式，从最后一个子元素开始计数

奇数
li::nth-last-child(odd){
    backgroud-color:red;
}
偶数
li::nth-last-child(even){
    backgroud-color:red;
}

（3）为奇数偶数，指定两种不同的样式，从最后一个子元素开始计数使用公式

li::nth-last-child(3n){
    backgroud-color:red;
}

:nth-of-type

(1)选择器匹配属于父元素的特定类型的第n个元素，n可以是数字，关键词，或者公式

在所有的元素中把h2提取出来，重新排序
.wrap h2:nth-of-type(2){
backgroud-color:red;
}

(2)为奇数和偶数的p标签添加不同的背景色

*在所有的子元素中把 p 提取出来，重新排序/
.wrap p:nth-of-type(odd){background-color: red;}
.wrap p:nth-of-type(even){background-color: blue;}

(3)使用公式

.wrap p:nth-of-type(2n){background-color: red;}

:nth-last-of-type()

需要从后面开始计数，n可以数字，关键词，公式

.wrap h2:nth-last-of-type(1){background-color: red;}

状态伪类选择器

：checked :匹配用户页面上处于选中状态元素

: enabled:匹配用户状态上处于可用状态的元素(表示任何被启用的（enabled）元素)

: disabled:表示任何被禁用的元素

/* 属性选择器 */
input[type=text]:enabled{
background-color: red;
}
input[type=text]:disabled{
background-color: blue;
}
input[type=checkbox]:checked{
background: green;
color: red;}

其他选择器

.class:

.cheng{
color:red;
}

#id:

#top{
color:red;
}

element:

div{
color:red;
}.

element,element:

h1,p
{ 
background-color:yellow;
}

element element:

div p
{ 
background-color:yellow;
}

element > element:

div>p
{ 
background-color:yellow;
}

element + element:

div+div2
{ 
background-color:yellow;
}

[attribute ]:属性选择器

[attribute=value].

[attribute=value]:

[attribute^=value]:

[attribute$=value]

[attribute*=value]

:hover:

:focus: 聚焦

.first-child:

:last-child:

:before

:after

:first-of-type（）

:last-of-type（）:

:nth-ast-child（）

:nth-child（）:

:nth-of-type()

:nth-last-of-type(n):

:enabled:

:disabled:

:ehcecked:

css3常用边框属性

1、border-radius 圆角

在CSS2中如果使用圆角，需要使用图片，在CSS3中，可以使用border-radius

语法:

border-radius: top-left top-right bottom-left bottom-right

一个值: 同时设置四个角的圆角大小，都是同一个值

两个值: 设置左上和右下右上和左下角的圆角大小

三个值: 设置左上右上和左下右下的角大小

四个值: 设置左上右上右下左下的圆角大小

/*一个值*/
/* border-radius: 10px; */
/*两个值“/
/+ border-radius: 30px 60px;“/
/*三个值*/
/* border-radius: 3px 6epx 1Bpx; */
/*四个值*/
border-radius: 30px 60px 100px 200px;
border-top-right-radius: 20px 30px;
border-bottom-left-radius: 4px 5epx;
border-bottom-right-radius: 60px 70px;
border-top-left-radius: 8epx 9epx;

box-shadow --盒子阴影

用于给边框添加一个或者多个阴影

语法：

box-shadow:h-shadow v-shadow blur spread color inset

h-shadow :必需的参数水平阴影的位置允许负值

v-shadow : 必需的参数垂直阴影的位置允许负值

blur: 可选模糊距离

spread : 可选阴影的尺寸

color: 可选阴影影的颜色

inset: 可选将外部阴影影改为内部阴影

/* box-shadow: h-shadow y-shadow blur spread color inset */
box-shadow: 1px 1px 40px 20px blue inset;

会玩代码的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫