CSS3：属性选择器、结构性伪类选择器、边框圆角、文本属性、背景属性、字体图标概念、浏览器前缀

最新推荐文章于 2022-05-27 15:45:00 发布

skt__

最新推荐文章于 2022-05-27 15:45:00 发布

阅读量225

点赞数 2

文章标签： css css3

本文链接：https://blog.csdn.net/skt__/article/details/119134997

版权

常用属性选择器：

1、标签名称[属性]、选中带有其属性的标签！

2、标签名称[属性="属性值"]、选中属性，并规定带有其属性值！

需了解的选择器：

1、标签名称[属性~="value"]、选中属性，并规定包含在内的任意属性值都可以！

2、标签名称[属性^="value"]、选中属性，并规定以属性值第一个字符为开头的即可！

3、标签名称[属性$="value"]、选中属性，并规定以属性值最后一个字符为结尾的即可！

4、标签名称[属性*="value"]、选中属性，并规定带有其属性值的任意字符都可以！

5、标签名称[属性|="value"]、选中属性，并规定带有其所有属性值即可（如以value-xx等）！

结构性伪类选择器：

X:first-child 其父元素的首个子元素
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:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素
X:only-of-type匹配属于同类型中唯一兄弟元素的X

总结常用的选择器：X:nth-child(n)、X:nth-of-type(n)

目标伪类选择器
:target 选择匹配E的所有元素，且匹配元素被相关url指向

UI 元素状态伪类选择器
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
::selection 匹配E元素中被用户选中或处于高亮状态的部分

动态伪类选择器
:link :hover :visited :active
E:focus 用户行为选择器选择匹配的E元素，而且匹配元素获取焦点
语言伪类选择器:E:lang(en)
否定伪类选择器 E:not(选择器) 匹配所有不匹配简单选择符s的元素E

层级选择器：

>：选择直接自己元素、+：选择同级元素（相邻）、~：选择所有同级元素（除本身）

浏览器前缀：

语法-x-。ms IE浏览器、moz 火狐、o opera浏览器（已淘汰）、webkit 谷歌、Safari

文本属性：

文字阴影：text-shadow、盒子阴影：box-shadow。属性值 px水平位置+px垂直位置+px模糊程度+颜色

@font-face的语法规则：字体图标
@font-face {
   font-family: 'icomoon';
   src:url('fonts/icomoon.eot');
   src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
   url('fonts/icomoon.svg#icomoon') format('svg'),
   url('fonts/icomoon.woff') format('woff'),
   url('fonts/icomoon.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}