分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

css选择器

发布时间:2023-09-06 01:17责任编辑:郭大石关键词:选择器

一、类选择器:

1.点号开始

2.包含字母、数字、连字符、下划线

3.点后面必须是字母开始

4.区分大小写

5.一个类选择器可以应用到多个标签

二、伪类选择器:

元素名称-伪类名称:

a:link(未访问)

a:visited(已访问)

a:hover(鼠标悬停)

a:active(点击时)

三、后代选择器:(可越级)

父级元素名称+空格+子级元素名称{声明块}

四、子级选择器:(不可越级)

父级元素名称+“>”+子级元素名称{声明块}

五、属性选择器:input type=“text”

格式一:元素名称[属性名称+属性值]{声明块}

             input[type=“text”]{color:red;} 【设置input属性值为text的样式】

input::-webkit-input-placeholder{color:green;}【设置placeholder提示信息的样式】

格式二:选择以属性值开始的标签

元素名称[属性名称+“^=”+属性值]{声明块}

input[name^=“si”]{color:green;}

格式三:选择以属性值结束的标签

元素名称[属性名称+“$=”+属性值]{声明块}

input[name$=“chuan”]{color:green;}

格式四:选择包含属性值的标签

元素名称[属性名称+“*=”+属性值]{声明块}

input[name*=“chuan”]{color:green;}

格式五:选择box4里类型为p的第三个p元素

. box4 p:nth-of-type(3){color:red;}

六、css两个核心概念:

1.继承:(1)是应用在某个标签/元素上的css属性传递给了内部嵌套的标签

            (2)通常来说文本类的会被继承(字体、字号、颜色)

            (3)chrome里面是灰色的表示没继承

2.层叠:(1)继承

            (2)一个标签可能有一个或多个样式的来源,当属性发生冲突时,按照加载顺序和权重大小决定

            (3)对比权重:样式不冲突:同时作用      

                                      样式冲突:对比权重①权重相同,后覆盖前

                                                                ②权重不同,权重大的生效

七、

1.border:1px solid red;边框

2.font-size:20px;字体大小,字号

3.font-family:Algerian;字体类型

4.font-weight:400;加粗

5.text-align:center;水平居中

6.text-indent:2px;

7.text-decoration:none;下划线

8.line-height:20px;行高

9.vertical-align:middle;垂直居中

10.text-shadow:-11px -11px 2px red;字体阴影

11.letter-spacing:10px;字间距

12.word-spacing:10px;词间距

13.font-weight:500;字体加粗

14.font-variant  字体大小写

css选择器

原文地址:http://www.cnblogs.com/aswd/p/7671305.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved