精华内容
下载资源
问答
  • 这30个CSS选择器,你必须熟记(上)

    万次阅读 多人点赞 2019-10-30 07:10:00
    关注前端达人,与你共同进步CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等,我们只需要改几行代码,不需...
    640?wx_fmt=png

    关注前端达人,与你共同进步


    640?wx_fmt=png


    CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等,我们只需要改几行代码,不需要借助任何软件,就能轻而易举的实现,感觉就像魔法师一般,几秒钟就能得到一个想要的效果,是不是很酷呢。

    CSS为我们提供了选择器,这个酷酷的魔法工具,让我们随意能够操作网页元素的样式,CSS选择器众多,我们不可能一次性学完,但是这30个CSS选择器我们必须熟练记忆,可能有的同学觉得没必要学这么多,掌握了id、class、后代选择器就够了,这算完事了吗?如果是这样你就错过了很多灵活运用CSS的机会,虽然这些新属性很多都属于CSS3,但是我们掌握这些新属性后还是有很大的好处的。

    从本篇文章起,我给大家归纳了常用的30个CSS选择器,希望通过我的总结,你能够喜欢上这些常用的选择器,废话不多说,我们这篇文章将介绍前10个。

    在介绍之前,我们先理解下文档结构树的父子关系

    在学习CSS选择器之前,我们需要弄清楚文档结构的父子关系,什么是父元素、子元素以及祖辈元素和后代元素这些概念,清楚了这些逻辑关系后,你才能更好的掌握CSS选择器。如下图所示,我们用树形结构来表示一个文档结构。

    640?wx_fmt=png

    如上图所示,相邻的两个节点(层级是连续的),他们之间是父子关系。如果两个元素之间跨越两个层级以上,它们是祖辈和后代的关系。

    1、*:通用选择器

    针对初学者来说,我们还是从简单的开始学起,首先我们来认识下通用选择器,然后再逐步深入学习其它高级的选择器,加入我们想让文档中的每个元素都显示成红色,我们可以这么做:

    * {color:red;}

    通用选择器,可以匹配页面所有的元素。 许多开发者可能会用这个技巧如下代码所示让元素居中,在开发测试阶段固然是好的,但是我不建议这么做,因为这样做会给浏览器增加很大的负担。

    * {
    margin: 0;
    padding: 0;
    }

    浏览器兼容性:

    • IE6+

    • Firefox

    • Chrome

    • Safari

    • Opera

    2、#X:ID选择器

    ID选择器的开头使用#号,但是你在使用的时候,需要谨慎。

    问问自己:是否真的需要使用ID选择器来定义样式

    id选择器比较局限,不能重用。因此需要慎重考虑。

    #container {
    width: 960px;
    margin: auto;
    }

    浏览器兼容性:

    • IE6+

    • Firefox

    • Chrome

    • Safari

    • Opera

    3、.X:类选择器

    类选择器的开头用.(点)进行表示。与ID选择器的区别就是可以重用。定义多个元素的样式,好比按组进行归类,同一类的样式统一定义。

    .error {
    color: red;
    }

    如果把两个类串在一起,选择的就是同时具有两个类名的元素,类名的顺序则无所谓,比如 class="urgent warning" , css 选择器你也可以这样写 .warning .urgent。

    浏览器兼容性:

    • IE6+

    • Firefox

    • Chrome

    • Safari

    • Opera

    4、X Y:后代选择器

    后代选择器,英文名称:descendant selector,本文的开头我们学习了什么是后代元素,比如我们要选择在li元素中包含a标签的链接(不是所有的链接),取消下划线的默认样式,我们可以这样代码实现:

    li a {
    text-decoration: none;
    }

    经验分享: 如果你的选择器看起来像X Y Z A B.error这样就错了。问问自己是否真的需要加入这么多负荷, 这样写的可读性也太差了。还有一个需要注意的,后代元素的层级问题,可能会很深。

    浏览器兼容性:

    • IE6+

    • Firefox

    • Chrome

    • Safari

    • Opera

    5、X:元素选择器

    假如你想针对Html预定义的标签,比如类似:p,h3,em,a这些标签,我们可以快速为某类标签定义样式。如下段代码所示:

    a { color: red; }
    ul { margin-left: 0; }

    浏览器兼容性:

    • IE6+

    • Firefox

    • Chrome

    • Safari

    • Opera

    6、X:visited and X:link :链接伪类选择器

    :link 伪类来定义所有还没有点击链接的样式,:visited 伪类定义我们曾经点击过或者访问过的链接样式,示例代码如下:

    a:link { color: red; }
    a:visted { color: purple; }

    浏览器兼容性:

    • IE7+

    • Firefox

    • Chrome

    • Safari

    • Opera

    7、 X + Y:紧邻同胞选择器

    若想选择同一个父元素中,相邻的同级别的元素,我们可以使用紧邻同胞选择器(adjacent selector)。如若想把紧跟在h1元素的段落上外边距去掉,你可以这么写:

    h1 + p { margin-top:0 }

    640?wx_fmt=png

    浏览器兼容性:

    • IE7+

    • Firefox

    • Chrome

    • Safari

    • Opera

    8、 X > Y:子元素选择器

    有时候我们并想选择所有的后代元素,而是想缩小范围,只选择一个元素的子元素,比如我们只想选择 #container>ul 定义id为container的div里的ul元素,而不是曾经更深的后代元素比如li里的ul。

    html文档结构:

    <div id="container">
    <ul>
    <li> List Item
    <ul>
    <li> Child </li>
    </ul>
    </li>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
    </ul>
    </div>

    css代码如下:

    div#container > ul {
    border: 1px solid black;
    }

    文档选择树形结构:

    640?wx_fmt=png

    代码效果:

    640?wx_fmt=png

    浏览器兼容性:

    • IE7+

    • Firefox

    • Chrome

    • Safari

    • Opera

    9、 X ~ Y:后续同胞选择器

    后续同胞选择器使用 ~ 表示,选择一个元素后面同属一个父元素的另一个元素。这个选择器和 X + Y 很像,但没那么严格。后续同胞选择器应用会更广泛。比如下面这个例子,我们选择所有ul后面的P元素。

    html文档结构:

       <div id="container">
    <ul>
    <li> List Item
    <ul>
    <li> Child </li>
    </ul>
    </li>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
    </ul>

    <p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do eiusmod tempor. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
    <p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
    </div>

    css代码如下:

    ul ~ p {
    color: red;
    }

    文档选择树形结构:


    640?wx_fmt=png

    代码效果:

    640?wx_fmt=png

    浏览器兼容性:

    IE7+ Firefox Chrome Safari Opera

    10、 X[title]:简单属性选择器

    如果想选择具有某个属性的元素,而不管属性的值是什么,我们可以使用简单属性选择器。例如想让带有title属性的链接标签才会被匹配,没有title属性的标签不会受到影响。你可以这么写代码:

    a[title] {
    color: green;
    }

    浏览器兼容性:

    IE7+ Firefox Chrome Safari Opera

    小节

    今天的内容就和大家分享到这里,CSS选择器是CSS的基础和重要内容,虽然简单,但是灵活掌握可不容易,接下来的文章,我将和大家继续分享CSS选择器的剩余内容。


    专注分享当下最实用的前端技术。关注前端达人,与达人一起学习进步!

    长按关注"前端达人"

    640?wx_fmt=gif
    640?wx_fmt=jpeg


    展开全文
  • python css选择器用法

    千次阅读 2019-07-11 11:52:10
    想优化一下刚刚写的爬虫,改一下...大概就是这么多了,这篇文章主要是写了css选择器的使用。 有时候css , xpath选择器组合使用,可以简单的获取到数据。有时间的话我会再写一篇xpath选择器的用法

    想优化一下刚刚写的爬虫,改一下Selectors
    去看文档 眼花缭乱 ,所以想在这里总结一下Selectors 的简单用法,
    不扯别的,就是学会用 ,简单粗暴的学会用法
    我们不如还拿拉勾网实验可好 滑稽.jpg
    https://www.lagou.com/zhaopin/Java/

    打开这个页面,国际惯例F12
    这里写图片描述

    看到了网页的源代码,我们想从这个里面取到需要的数据,就用到了选择器

    相信用到Selectors的小伙伴们都已经建好scrapy项目了,所以我不做赘述
    只需要在spiders文件夹下面新建一个forth.py文件内容如下:

    import scrapy
    from First.items import FirstItem
    
    class Lagou(scrapy.Spider):
        name = "forth"
        start_urls = [
            "https://www.lagou.com/zhaopin/Java/"
        ]
    
    
        def parse(self , response):
            pass
    
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    这篇文章会讲解到的css选择器有

    1. #container 选择id为container的元素
    2. .container 选择所有class包含container的元素
    3. * 选择所有元素
    4. div a 选取所有div下所有a元素
    5. ul + p 选取ul后面的第一个p元素
    6. ul ~p 选取与ul相邻的所有p元素
    7. a:nth-child(2) 选取下面第二个标签,如果是a的话则选取,不是则不取
    8. a:nth-child(2n) 选取第偶数个a元素
    9. a:nth-child(2n+1) 选取第奇数个a元素
    10. li.multi-chosen > a 选取class为multi-chosen的li的所有a元素
    11. a[title] 选取所有拥有title属性的a元素
    12. a[href=”https://www.lagou.com/jobs/3537439.html”] 选取所有href属性为https://www.lagou.com/jobs/3537439.html的a元素
    13. a[href*=”www.lagou.com”] 选取所有href属性值中包含www.lagou.com的a元素
    14. a[href^=”http”] 选取所有href属性值中以http开头的a元素
    15. div:not(#content-container) 选取所有id为非content-container 的div

    开始测试css选择器

    • #container 选择id为container的元素
    • .container 选择所有class包含container的元素
    • * 选择所有元素

    假如我们想获取到
    这里写图片描述
    中的所有内容
    这里写图片描述
    点击调试工具中的箭头,再点击左侧想获得信息的区域,可以快速的找到这一段html代码的位置
    这里写图片描述
    可以看到所有的信息都在class = .con_list_item 的li标签之中

        def parse(self , response):
            for item in response.css('.con_list_item *'):
                jobMessage = item.css('::text').extract()
                print(jobMessage)
     
    • 1
    • 2
    • 3
    • 4

    修改parse方法中的选择器 ,
    使用 .con_list_item * 来找到class为con_list_item 下的所有节点
    用jobMessage来接收 ::text 是取出标签中的内容
    为了提取真实的原文数据,需要调用 .extract() 方法
    运行名为forth的爬虫~

    scrapy crawl forth
     
    • 1

    结果如下
    这里写图片描述

    拿到数据了~ 虽然很乱但是拿到了对吧~ 说明我们的selectors成功了

    *是拿到所有节点,那么要拿到单独节点呢?
    找一个看起来容易找到的节点
    这里写图片描述
    看! 这个h3正合我们的胃口
    修改parse方法

        def parse(self , response):
            for item in response.css('.con_list_item h3'):
                jobMessage = item.css('::text').extract()
                print(jobMessage)
     
    • 1
    • 2
    • 3
    • 4

    再次运行爬虫 , 结果如下
    这里写图片描述
    获取到了所有的h3

    接下来测试 #container 根据id选择内容
    历尽千辛万苦找到一个id
    这里写图片描述
    基础知识大家已经知道了
    所以直接上代码

        def parse(self , response):
            for item in response.css('#lg_tnav h1'):
                jobMessage = item.css('::text').extract()
                print(jobMessage)
     
    • 1
    • 2
    • 3
    • 4

    获取id 为lg_tnav 下的 h1标签中的内容
    运行爬虫 , 出现吧 皮卡丘
    这里写图片描述

    接着学习别的

    • div a 选取所有div下所有a元素

    只需要修改为

    for item in response.css('div a'):
     
    • 1

    运行出现结果
    这里写图片描述

    • ul + p 选取ul后面的第一个p元素

    经过挑选,我觉得下面这个例子挺不错的
    这里写图片描述
    工作地点是一个span标签 它后面的内容有一大堆,假如我们只想取第一个 那么就是一个a标签
    先取出“工作地点”

     def parse(self , response):
            for item in response.css('.title'):
                jobMessage = item.css('::text').extract()
                print(jobMessage)
     
    • 1
    • 2
    • 3
    • 4

    运行爬虫,结果如下
    这里写图片描述

    接着取出它后面a标签
    只需改动一处

    for item in response.css('.title + a'):
     
    • 1

    运行得到了它后面的a标签中的内容
    这里写图片描述

    • ul ~p 选取与ul相邻的所有p元素

    我们甚至还可以用上面的例子
    改动一处

    for item in response.css('.title ~ a'):
     
    • 1

    运行得到结果
    这里写图片描述

    是不是都得到了呢
    这里写图片描述

    • a:nth-child(2) 选取下面第二个标签,如果是a的话则选取,不是则不取

    接着使用这个例子,需要注意的是在这里
    “2”所指的是第一个子标签,span标签
    “3”所指的是第二个子标签,a标签
    这里写图片描述
    修改代码如下

        def parse(self , response):
            for item in response.css('.multi-chosen'):
                jobMessage = item.css('a:nth-child(2)::text').extract()
                print(jobMessage)
    
     
    • 1
    • 2
    • 3
    • 4
    • 5

    结果如下
    这里写图片描述

    如果我们修改一行代码,取第一个a标签

    jobMessage = item.css('a:nth-child(1)::text').extract()
     
    • 1

    结果如下:
    这里写图片描述
    取出的数据为空,为什么呢? 因为第一个标签不是a标签,而是span标签,所以不取。
    再次修改为以下语句,取出第一个span标签

    jobMessage = item.css('span:nth-child(1)::text').extract()
     
    • 1

    运行,成功获取到了第一个标签
    这里写图片描述
    由此可得,需要同时匹配标签和位置才可以取出元素

    • a:nth-child(2n) 选取第偶数个a元素

    我们叒使用之前的例子,只需要修改一句

    jobMessage = item.css('a:nth-child(2n)::text').extract()
     
    • 1

    运行获得结果
    这里写图片描述
    这里写图片描述
    成功的取出第偶数个a元素
    那么类比可得

    • a:nth-child(2n+1) 选取第奇数个a元素
      测试一下
    jobMessage = item.css('a:nth-child(2n+1)::text').extract()
     
    • 1

    这里写图片描述
    这里写图片描述
    成功的取出的第奇数个a元素中的内容
    为什么没有取出第一条内容“工作经验” 呢?
    当然是因为它是span标签中的内容,而不是a标签中的内容
    如果我们用

    jobMessage = item.css('span:nth-child(2n+1)::text').extract()
     
    • 1

    就可以取出它了

    • li.multi-chosen > a 选取class为multi-chosen的li的所有a元素

    我们叕用上面的例子,修改代码如下

        def parse(self , response):
            for item in response.css('li.multi-chosen > a'):
                jobMessage = item.css('::text').extract()
                print(jobMessage)
     
    • 1
    • 2
    • 3
    • 4

    运行,成功获得了class为multi-chosen的li下的所有a元素
    这里写图片描述
    这里写图片描述

    • a[title] 选取所有拥有title属性的a元素

    又叕用上面的例子,就决定是这一条属性了
    这里写图片描述
    修改代码如下

        def parse(self , response):
            for item in response.css('a[data-lg-tj-no]'):
                jobMessage = item.css('::text').extract()
                print(jobMessage)
     
    • 1
    • 2
    • 3
    • 4

    运行,成功获取到结果
    这里写图片描述

    终于要换一个例子了,请看!
    这里写图片描述
    要取出href=”https://www.lagou.com/jobs/3537439.html”的a标签 下 h3标签中的内容
    代码如下

    for item in response.css('a[href="https://www.lagou.com/jobs/3537439.html"] h3'):
                jobMessage = item.css('::text').extract()
     
    • 1
    • 2

    运行,获得结果
    这里写图片描述

    • a[href*=”www.lagou.com”] 选取所有href属性值中包含www.lagou.com的a元素

    修改代码

    for item in response.css('a[href*="www.lagou.com"] h3'):
     
    • 1

    运行
    这里写图片描述

    • a[href^=”http”] 选取所有href属性值中以http开头的a元素

    修改代码

    for item in response.css('a[href^="http"]'):
                jobMessage = item.css('::text').extract()
     
    • 1
    • 2

    运行获得了一大堆数据
    这里写图片描述

    • div:not(#content-container) 选取所有id为非content-container 的div

    页面的结构分上下两部分,头部的id 为lg_header , 下部的id为content-container
    为了选取上部分,我们有两种方法
    1.#lg_header 或者 div:not(#content-container)

    这里写图片描述
    修改代码如下

    for item in response.css('div:not(#content-container) h1'):
                jobMessage = item.css('::text').extract()
     
    • 1
    • 2

    运行可以得到
    这里写图片描述

    大概就是这么多了,这篇文章主要是写了css选择器的使用。
    有时候css , xpath选择器组合使用,可以简单的获取到数据。有时间的话我会再写一篇xpath选择器的用法

    展开全文
  • CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器。 CSS选择器优先级如下...

    本文章转载于:https://www.cnblogs.com/AIonTheRoad/p/11283100.html

    CSS选择器分类:

    CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器。

    用法如下:

    选择器e.g.说明
    id选择器#id#header选择id="header"的所有元素
    类选择器.class.message选择class="message"的所有元素
    标签选择器eldiv选择所有的div元素

    其中他们又可以以不同的方式进行组合,如下:

    选择器e.g.说明
    后代选择器el eldiv p选择div元素内部的所有p元素
    子代选择器el>eldiv>p选择div元素的第一子代的所有p元素
    相邻兄弟选择器el+el.msg+p选择与class为"msg"的元素同级且紧跟其后的第一个p元素
    通用兄弟选择器el~el.msg~p选择class为"msg"的元素后面的所有p元素
    群组选择器el,elp, span, .blue,#box选择所有的p元素、span元素、class为"blue"的元素以及id为"box"的元素
    伪类选择器:link,:visited, :hover, :active, :focusa:hover选择鼠标指针位于a标签之上的链接
    伪元素选择器:before, :afterp:before在每个p元素内容之前插入内容
    属性选择器[attribute][target]选择带有target属性的所有元素
    通用选择器**选择所有的元素

    优先级:!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器

    权 重: !important:10000

    内联: 1000

    id选择器:100

    类、伪类、属性选择器:10

    标签、伪元素选择器:1

    通用选择器(*)、子选择器(>)、相邻兄弟选择器(+)、通用兄弟选择器(~)权重值为0

    展开全文
  • css选择器(css1-css3) 学习css最基础也是最重要的就是学好css的选择器,它不仅能帮助你提高效率,还可以简化代码; 选择器 例子 说明 css .class .className 选中类名为className的元素 1 #id .ID_Name ...

    css选择器(css1-css3)

    //css基础,以下是本人学习前端期间,总结的css选择器,希望对大家有帮助

    学习css最基础也是最重要的就是学好css的选择器,它不仅能帮助你提高效率,还可以简化代码;

    css1

    选择器例子说明css
    .class.className选中类名为className的元素1
    #id.ID_Name选中ID名为ID_Name的元素1
    elementdiv选中所有div元素1
    element,element.div,p选中所有div标签和p标签1
    element elementdiv p选中div内部的所有p标签1
    :linka:link选中所有未被访问的链接。1
    :visiteda:visited选中所有已被访问的链接。1
    :activea:active选择活动链接。1
    :hovera:hover选择鼠标指针位于其上的链接。1
    :first-letterp:first-letter选中每个 p元素的首字母。1
    .:first-linep:first-line选中每个 p 元素的首行。1

    css2

    选择器例子说明css
    **选中所有元素2
    element>elementdiv>p选择父元素为 div 标签的所有 p 标签。2
    element+elementdiv+p选中紧接在 div 标签之后的所有 p 标签2
    [attribute][target]选中带有 target 属性所有标签。2
    [attribute=value][target=_blank]选中target="_blank" 的所有元素。2
    [attribute~=value][title~=flower]选中title 属性包含单词 “flower” 的所有元素。2
    [attribute=value][lang=en]选中lang 属性值以 “en” 开头的所有元素。2
    .focusinput:focus选中获得焦点的 input 元素。2
    :first-childp:first-child选中属于父元素的第一个子元素的每个 p元素。2
    :beforep:before在每个 p元素的内容之前插入内容。2
    :afterp:after在每个 p 元素的内容之后插入内容。2
    :lang(language)p:lang(it)选择带有以 “it” 开头的 lang 属性值的每个 p元素。2

    css3

    选择器例子说明css
    element1~element2p~ul选择前面有 p 元素的每个 ul 元素。3
    [attribute^=value]a[src^=“https”]选择其 src 属性值以 “https” 开头的每个 a 元素。3
    [attribute$=value]a[src$=".pdf"]选择其 src 属性以 “.pdf” 结尾的所有 a 元素。3
    [attribute*=value]a[src*=“abc”]选择其 src 属性中包含 “abc” 子串的每个 a 元素。3
    :first-of-typep:first-of-type选择属于其父元素的首个 p元素的每个 p 元素。3
    :last-of-typep:last-of-type选择属于其父元素的最后 p 元素的每个 p 元素。3
    :only-of-typep:only-of-type选择属于其父元素唯一的 p元素的每个 p 元素3
    :only-childp:only-child选择属于其父元素的唯一子元素的每个 p 元素。3
    :nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 p元素。3
    :nth-last-child(n)p:nth-last-child(2)同上,从最后一个子元素开始计数。3
    :nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 p 元素的每个 p 元素。3
    :nth-last-of-type(n)p:nth-last-of-type(2)同上,但是从最后一个子元素开始计数。3
    :last-childp:last-child选择属于其父元素最后一个子元素每个 p 元素。3
    :root:root选择文档的根元素。3
    :emptyp:empty选择没有子元素的每个 p 元素(包括文本节点)。3
    :target#news:target选择当前活动的 #news 元素。3
    :enabledinput:enabled选择每个启用的 input 元素。3
    :disabledinput:disabled选择每个禁用的 input 元素3
    :checkedinput:checked选择每个被选中的 input元素。3
    :not(selector):not§选择非 p元素的每个元素。3
    ::selection::selection选择被用户选取的元素部分。3

    //客官,临走不得点个赞 👍

    展开全文
  • css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容。 在看css选择器优先级...
  • css选择器

    千次阅读 多人点赞 2018-07-12 23:28:59
    学习了css选择器,在此做一个知识梳理:一、基本选择器1、id选择器(优先级最高 0100)如:#id{...}2、类选择器(优先级次之 0010)如:.class{...}3、标签选择器 (优先级最低 0001,涉及最广)如: div{...}二、...
  • css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容。 打造全网web前端全栈...
  • 文章目录CSS简介CSS样式编写1、内联样式2、内部样式3、外部样式CSS语法选择器常用的选择器元素选择器id选择器选择器选择器分组(并集选择器)通配选择器复合选择器(交集选择器)后代元素选择器子元素选择器伪类...
  • css选择器的主要作用

    千次阅读 2020-09-07 16:45:00
    每一个css样式由两部分组成,形式:css选择器{设置样式} css选择器指向需要添加样式的对象,设置样式就是设置自己需要的想要的样式 css选择器主要作用 如果想要用css为html页面中的元素添加样式,就需要用到css选择...
  • 本章我们给大家讲解一下什么是css选择器?css3中5种常见的基本选择器。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一:什么是css选择器? CSS是一种用于屏幕上渲染html,xml等一种语言,...
  • css选择器& 选择器的优先级

    万次阅读 2018-06-08 08:40:28
    一、选择器1.元素选择器 语法,作用给元素名为你设置的那个元素的元素名设置样式 元素名 { 样式列表 } 2.id选择器。通过元素的 id 属性给id赋值, #开始加上id名称。id名称在整个页面里是唯一的 id选择器语法 #...
  • CSS选择器及优先级 总结

    万次阅读 多人点赞 2018-03-14 22:02:18
    id选择器选择器 元素选择器 通配符选择器 浏览器自定义或继承 总结排序:!important &amp;amp;gt; 行内样式 &amp;amp;gt; ID选择器 &amp;amp;gt; 类选择器 &amp;amp;gt; 元素 &amp;amp;gt;...
  • css选择器除了第一个 描述 (Description) This pseudo-class matches an element only if it’s the first child element of its parent element. For instance, li:first-child matches the first list item in an ...
  • CSS选择器的优先级

    千次阅读 2019-06-19 14:15:06
    MDN上关于CSS选择器优先级的介绍 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity ID、class、元素 、属性 优先级排名为: ID[属性][伪类] ID[属性] --或-- ID[伪类]; 看声明顺序, 后声明的优先级更...
  • css选择器---组合选择器

    万次阅读 2019-05-20 17:52:48
    2、组合选择器 (1)包含选择器 格式:包含选择符名 选择符{样式} 例:<html> <head> <meta charset="utf-8"> <title>CSS基础</title> <style type="text/css"> #header p { ...
  • css选择器详解

    万次阅读 多人点赞 2016-05-23 11:08:10
    1、元素选择器最常见的css选择器当属元素选择器了,在HTML文档中该选择器通常是指某种HTML元素,例如:p,h2,span,a,div乃至html。用法十分简单,例如:html {background-color: black;} p {font-size: 30px; ...
  • CSS选择器的权重计算

    千次阅读 2017-02-28 16:42:55
    刚好是在做面试题的时候,发现有一个题目时关于CSS选择器的权重计算,当时脑海中只知道:id>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,至于权重的计算其实没有多大的印象,所以...
  • 学习Python写爬虫的时候,遇到css定位问题,故小结一下css选择器定位的方式通配符选择器:* {color:red;}CSS 类选择器匹配所有class = ‘important’*.important {color:red;}去掉前面通配符也是一样的。结合元素...
  • css选择器在css的学习中无疑是十分重要的,所以,什么是css选择器css选择器有哪些类型?这是我们必须要掌握的,本篇文章将给大家来介绍关于css选择器的基本定义,以及css选择器有哪些类型。 我们话不多说,直接...
  • 1、类型选择器CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器),可以向这种元素类型的每个实例上应用声明。例如,以下简单规则的选择器是H1,因此规则作用于文档中所有的H1元素。2、简单属性...
  • CSS选择器命名规则

    千次阅读 2019-12-22 13:17:49
    在实际项目中,因为参与人员个人习惯不一样,导致写出的CSS选择器命名千奇百怪,对项目维护运营、内部技术沟通均产生了不利影响。因此在项目实施前,网页重构人员有必要统一CSS选择器命名规则,以期将更多精力放在...
  • Css选择器

    千次阅读 2016-05-26 16:40:56
    CSS3 选择器CSS 中,选择器是一种模式,用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。) 选择器 例子 例子描述 CSS ...
  • 爬虫之CSS选择器的使用(BeautifulSoup)

    千次阅读 2018-08-19 15:23:35
    CSS选择器的使用(BeautifulSoup) 1、CSS选择器概述 BeautifulSoup支持大部分的CSS选择器。 语法为:向tag对象或BeautifulSoup对象的.select()方法中传入字符串参数,选择的结果以列表形式返回,即返回类型为list...
  • 选择器类型: 1、ID #id 2、class .class 3、标签 p 4、通用 * 5、属性 [type="text"] 6、伪类 :hover 7、伪元素 ::first-line 8、子选择器、相邻选择器   权重计算规则: 1、第一等:代表内联...
  • CSS选择器和CSS权重

    千次阅读 2018-07-01 17:59:24
    一 、CSS作用 CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 它主要用来修饰网页。对网页...
  • 2 解决方案 标签的属性值中凡是出现空格的地方,在写CSS选择器的时候,都用.代替,即本例的CSS选择器应该写成: 'div.book-intro.readmore' 接下来给出完整的代码: # iTuringScrape.py # 2020-08-27 import ...
  • CSS选择器中的空格

    千次阅读 2020-08-17 11:58:35
    今天工作时同事问写css选择器时加空格与不加空格的区别。由于我一直用的后代选择器,于是就以为没有任何区别。为保险起见查了一下百度,竟然是有区别的。 div.contain .blue{color:blue;} div.contain.blue{color:...
  • CSS选择器之兄弟选择器(~和+)

    千次阅读 2020-06-29 17:32:25
    今天在改以以前人家写的网页的样式的时候,碰到这个选择器,‘~’,当时我是懵逼的,傻傻分不清 ‘+’ 跟 ‘~’的区别,虽然我知道他们都是兄弟选择器。  后来网上查了下,也许是我查找的方式不对,没有找到我想要...
  • CSS选择器的语法规则

    千次阅读 2018-09-16 22:23:57
    选择class=”intro”的所有节点 id firstname 选择id=”firstname”的所有节点 * * 选择所有节点 element p 选择所有p节点 element,element div,p 选择所有div节点和所有p节点 element element ...
  • css选择器权重及其计算规则

    千次阅读 2019-04-23 08:38:40
    css选择器 文章目录css选择器选择器类型css选择器权重值权重计算方法案例 选择器类型 ID #id class .class 标签 p 通用 * 属性 [type=“text”] 伪类 :hover 伪...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 379,432
精华内容 151,772
关键字:

css选择器