css选择器有哪些,以及它们们的优先级

css(层叠式样式表)作为一种表现标准语言,它能使html的表现更加丰富;作为一名web应用开发人员,css的使我们的工作变的更加有趣,同时也让我们增加了许多头疼的事!现在小编着重讲一下css的常见选择器,以及它们的优先级算法。

操作方法

  • 01

    通配选择器 ,写法 :*{属性:值} html浏览器默认样式:w3c规定了默写浏览器的默认样式权重为0 通配选择器一般用于消除浏览器默认样式

  • 02

    元素选择器  类选择器  id选择器 ;这是三种最常见的选择器,是每一个入门的web开发人员必须熟识的三种选择器。 元素选择器写法: 元素名(例如:div,ul,h1—h6,p等){属性:值}适用于页面内所有相同元素 类选择器 .选择器名{属性:值} id选择器 #选择器名{属性:值}

  • 03

    最常用的组合写法 子集选择器: #nav>li{属性:值}注意:只针对#nav下的儿子元素li; 同胞选择器:h1+p{属性:值}注意:紧跟着h1的p元素继承; 关联选择器:两个以上选择器组合 优先级等于权重之和; 群组选择器,注意:相当于属性相同的选择器并列写在一起;

  • 04

    不常见的选择器(浏览器兼容性低) 伪选择器: ::before相当于在html上增加一个dom节点p::first-letter{font_size:2em}属性选择器:input[name]&&input[title="email"]&&input[条件1][条件2]{属性:值}input中有name属性的继承 (匹配[]内的值) important important紧跟在属性的值的后面一般情况下不适用ie6不支持其属性权重最高无视一切规则

  • 05

    优先级通常我们用1表示元素(标签)名选择器的优先级,用10表示(伪)类选择器的优先级,用100标示ID选择器的优先级,通用选择器权重为0,行内样式权重为1000。important紧跟在属性的值的后面,权重最高无视一切规则

(0)

相关推荐

  • css选择器怎么使用,css有哪些选择器

    css选择器无疑是css代码中最重要的一环,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.HTML页面中的元素就是通过CSS选择器进行控制的. 所以合 ...

  • CSS选择器优先级

    CSS选择器优先级的结论是:id选择器优先级 > 类class选择器优先级 > 标签选择器优先级 本文将通过具体实验来证明. 标签选择器 01 对标签p应用样式,效果图如下: 02 新建一 ...

  • 怎么用css设置一个图片位置并有边框宽度

    在网页设计中常常会用到图片放到一个想要的位置,并制定宽度高度,使得这样图片增加网页的绚丽多姿,怎么设置额.下面讲讲css使用.通过css选择器使用及宽度高度定位等知识组合. 操作方法 01 先写好ht ...

  • jQuery 选择器,jQuery如何选择div元素

    jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 操作方法 01 jQuery 元素选择器 jQue ...

  • 如何使用HTML和CSS制作下拉菜单

    下拉菜单可以在页面上分级显示不同类别的项目.如果用户将鼠标悬停在菜单项上,菜单项下会显示子菜单项目. 我们仅使用HTML和CSS代码就可以制作这样的菜单. 学习这篇指南后,你就能在示例上稍作修改,制作 ...

  • Webstorm常用快捷键备忘(Webstorm入门指南)

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaSscript IDE ...

  • Notepad++快捷键&正则表达式替换字符串&插件使用介绍

    Notepad++绝对是windows下进行程序编辑的神器之一,要更快速的使用以媲美VIM,必须灵活掌握它的快捷键,下面对notepad++默认的快捷键做个整理(其中有颜色的为常用招数): 1. 文件 ...

  • 网页字体我做主 傲游3广告过滤另类应用

    把程序做的好用又好玩,是傲游的传统,傲游3的广告过滤也是如此。从“好用”来说,无论是智能的弹窗过滤系统,还是手动的页面广告屏蔽,都无需用户过多干预,简单易用。而这个看起来简单的系统,还拥有着十分强大的 ...

  • 谷歌浏览器怎么调试js

    首先我们打开开发者工具,你可以直接在页面上点击右键,然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台) ...