手机网站后台管理系统,计算机专业学什么,本地做织梦网站,北京金融网站建设css选择器、css的三大特性 文章目录 css选择器、css的三大特性一、css介绍二、css选择器2.1 基本选择器2.2 组合选择器2.3 交集并集选择器2.4序列选择器2.5属性选择器2.6伪类选择器2.7伪元素选择器 三、css三大特性3.1 继承性3.2 层叠性3.3 优先级 一、css介绍
CSS全称为Casca…css选择器、css的三大特性 文章目录 css选择器、css的三大特性一、css介绍二、css选择器2.1 基本选择器2.2 组合选择器2.3 交集并集选择器2.4序列选择器2.5属性选择器2.6伪类选择器2.7伪元素选择器 三、css三大特性3.1 继承性3.2 层叠性3.3 优先级 一、css介绍
CSS全称为Cascading Style Sheet层叠样式表是专门用来为HTML标签添加样式的。样式指的是HTML标签的显示效果比如换行、宽高、颜色等等。 在没有css以前html的样式都需要在每个标签后面设置属性这样非常的繁琐有了scc以后只需要完成统一的样式设置就可以批量化的设置标签的样式。
css引入有四种方式
#内行式
p stylecolor:redhello/p#嵌入式
headstylep{color: red;}/style
/head
bodyphello/p
/body#导入式
#css文件中为p{color: red;}
headstyleimport css/mystyle.css;#或者import url(css/mystyle.css);/style
/head
bodyphello/p
/body#外链式
#css文件中为p{color: red;}
headlink relstylesheet hrefcss/mystyle.css
/head
bodyphello/p
/body导入式的方式存在一些问题
导入式是css2.1特有的对于不兼容css2.1的浏览器来说就是无效的导入式会先加载页面再加载样式因此如果页面内容很大可能会先出现无样式的页面隔一段时间再出现完整的页面从而降低用户体验
在css中可以使用如下的方式进行注释
/*这是注释*/二、css选择器
选择器的目的是通过某种方式选中标签从而完成对标签样式的修改。
2.1 基本选择器
id选择器以#开头p1为标签的id名。但需要注意的是id名是唯一的标签的id名不能重复因此id资源十分珍贵一般留给js代码使用css样式不推荐使用。另外id名由字母、数字、部分特殊字符组成且不能以数字开头更不能是html关键字如paimg。
!--id选择器--
style#p1{color: red;}
/style类选择器以.开头p1为标签的类名。类名的命名规则和id相同一个标签可以有多个类例如p class“p1 p2”/p。
!--类选择器--
style.p1{color: red;}
/style标签选择器只需直接写标签名即可。标签选择器会选择页面所有相同类型的标签但是只有html的标签才能作为标签选择器。
!--标签选择器--
stylep{color: red;}
/style通配符选择器可以选中页面的所有标签需要注意的是通配符选择器使用时会遍历页面的所有标签如果页面内容非常大会导致效率降低的问题。
!--通配符选择器--
style*{color: red;}
/style2.2 组合选择器
后代选择器以空格作为间隔空格前后可以是基本选择器的任意一种。后代选择器可以选中某个标签的所有满足要求的子标签如下代码中后代选择器选中的是类为p1的标签中子标签为p并且子标签p中所有id为p2的子标签。
!--后代选择器--
style.p1 p #p2{color: red;}
/style相邻选择器以号作为间隔前后可以是基本选择器的任意一种。相邻选择器的作用是选择某个标签相邻的下一个标签如下代码中相邻选择器选中的是类为p1的标签相邻的下一个p标签。
!--相邻选择器--
style.p1p{color: red;}
/style下级选择器以作为间隔前后可以是基本选择器的任意一种。下级选择器可以选中某个标签下一层嵌套中满足要求的子标签如下代码中下级选择器选中的是类为p1的标签中下一层嵌套中子标签为p并且子标签p中的下一层嵌套的所有id为p2的子标签。
!--下级选择器--
style.p1p#p2{color: red;}
/style向后选择器以作为间隔前后可以是基本选择器的任意一种。向后选择器可以选中某标签后面所有满足要求的标签。如下代码中向后选择器选中的是类为p1的标签后面所有的p标签。
!--向后选择器--
style.p1~p{color: red;}
/style2.3 交集并集选择器
交集并集选择器前后同样可以为基本选择器的任意一种。 交集选择器将多个基本选择器连在一起写(不过有标签选择器的话标签选择器要写在前面)其功能是选中满足多个条件的标签如下代码中交集选择器选中的是标签为p且类为p1p2的标签。
!--交集选择器--
stylep.p1.p2{color: red;}
/style并集选择器将多个基本选择器用,分隔写在一块其功能是选中多个标签如下代码中并集选择器选中的是所有p标签或者类为p1的标签或者类为p2的标签。
!--并集选择器--
stylep,.p1,.p2{color: red;}
/style2.4序列选择器
序列选择器可以加在任何基本选择器后面作用是给基本选择器一个筛选条件。
!--选中所有层级中第一个且为p的标签--
p:first-child
!--选中所有层级中最后一个且为p的标签--
p:last-child
!--选中所有层级中正数第n个且为p的标签--
p:nth-child(n)
!--选中所有层级中倒数第n个且为p的标签--
p:nth-last-child(n)
!--选中所有层级中的第一个p标签--
p:first-of-type
!--选中所有层级中的最后一个p标签--
p:last-of-type
!--选中所有层级中正数第n个p标签--
p:nth-of-type(n)
!--选中所有层级中倒数第n个p标签--
p:nth-last-of-type(n)
!--选中所有层级中只有一个标签且为p--
p:only-child
!--选中所有层级中只有一个p标签--
:only-of-type
2.5属性选择器
属性选择器的地位相当于基本选择器可以代替上面选择器中需要使用基本选择器的位置。 属性选择器会把属性中的内容作为字符串对其进行匹配表示完全匹配*表示含有^表示以其开头$表示以其结尾。
!--选中含有class属性的标签--
[class]
!--选中class中完全匹配为p1的标签--
[classp1]
!--选中class中含有p1字符的标签--
[class*p1]
!--选中class中以p1字符开头的标签--
[class^p1]
!--选中class中以p1字符结尾的标签--
[class$p1]
!--选中a标签且a标签中的href属性以https字符开头这本质是a的标签选择器和属性选择器经过交集选择器拼接在了一起--
a[href^https]2.6伪类选择器
!--a标签初始状态文字颜色为红色--
a:link{color: red;}
!--a标签被访问过后文字颜色为蓝色--
a:visited {color: blue;}
!--鼠标悬停a标签上时背景颜色为绿色--
a:hover {background-color:green;}
!--鼠标点击a标签时文字颜色为黄色--
a:active {color: yellow;}
!--input文本框聚集时框线消失背景颜色为粉色--
input:focus{outline: none;background-color:pink;}a标签的伪类选择器可以单独出现也可以一起出现一起出现时有严格的顺序要求linkvisitedhoveractive。 hover是所有其他标签都可以使用的focus只给input标签使用。
2.7伪元素选择器
!--选中p标签的首个字母常用于杂志类文字首字母的调节大小--
p:first-letter {font-size: 48px;}
!--p标签内容前面插入新内容且文本颜色为红色--
p:before {content: *;color: red;}
!--p标签内容后面插入新内容且文本颜色为红色--
p:after {content: ?;color: red;}选择器的组合使用示例p .p1:first-child~#qq:last-child,div[class]:last-child p[class$qq]
三、css三大特性
3.1 继承性
继承性指子标签可以继承父标签的样式但是只有以color、font-、text-、line-开头的属性才可以继承a标签的文字颜色和下划线是不能继承别人的h标签的文字大小是不能继承别人的如果继承则会在原来字体大小的基础上变大。
3.2 层叠性
层叠性是指如果多个选择器选中了同一个标签且设置的属性产生冲突时会有覆盖效果。例如打开浏览器开发者面板时会看到有效属性被划掉了。
3.3 优先级
当多个选择器选中同一标签且设置的属性产生冲突时就会涉及到优先级的问题了。 优先级遵守以下的规则
行内式嵌入式和外部式(引入css文件的样式)。直接选中 间接选中(即继承而来的)。如果都是间接选中那么谁离目标标签比较近就用谁的。如果都是直接选中并且都是同类型的选择器那么谁写的在后面就用谁的。如果都是直接选中并且是不同类型的选择器那么id 类 标签 通配符(也算直接选中) 继承 浏览器默认即没有设置任何属性。如果都是直接选中并且混杂了一系列其他的选择器一起使用时则需要通过计算机权重来判定优先级id数多的优先级高id数相同则判定类数多的优先级高id数、class数均相同则判定标签数多的优先级高若id数、class数、标签数均相同则无需继续往下计算了谁写在后面谁的优先级高。
另外可以通过important将优先级提升到最高但是这种方法容易产生代码难以维护的问题。
.p1{color:red !important;}
