精华内容
下载资源
问答
  • 我是网络爬网新手,我正在尝试编写一个简单的脚本,从大学课程目录表获取课程名称:from selenium import webdriverfrom selenium.webdriver.firefox.firefox_binary import FirefoxBinarybinary = FirefoxBinary...

    我是网络爬网新手,我正在尝试编写一个简单的脚本,从大学课程目录表中获取课程名称:from selenium import webdriver

    from selenium.webdriver.firefox.firefox_binary import FirefoxBinary

    binary = FirefoxBinary(r'C:\Program Files\Mozilla Firefox\firefox.exe')

    driver = webdriver.Firefox(firefox_binary=binary)

    url = 'https://courses.illinois.edu/schedule/2018/fall/CS'

    driver.get(url)

    course_names = []

    for i in range(1, 69):

    if(float(i)%2 != 0): #odd row number

    curr_name = driver.find_element_by_css_selector('tr.odd:nth-child(i) > td:nth-child(2) > a:nth-child(1)').text

    else:

    curr_name = driver.find_element_by_css_selector('tr.even:nth-child(i) > td:nth-child(2) > a:nth-child(1)').text

    course_names.append(curr_name)

    print(course_names)

    driver.quit()

    运行此程序时,我收到以下错误:

    ^{pr2}$

    我完全不知道该怎么办。我只是想让它通过桌子。只是看起来不像我。我知道这很管用:tr.odd:nth-child(1) > td:nth-child(2) > a:nth-child(1)

    tr.even:nth-child(2) > td:nth-child(2) > a:nth-child(1)

    tr.odd:nth-child(3) > td:nth-child(2) > a:nth-child(1)

    有什么建议吗?在

    展开全文
  • 于是 对应的: 在CSS 标签选择器不区分大小写 属性选择器中的属性也不区分大小写, 而类选择器 和ID 选择器 本质上是 属性值 需要区分大小写 不要使用 ID 选择器: 没有 任何理由 推荐实际项目使用 ID ...

    CSS 选择器 是否 区分大小写

    CSS 选择器有  那些区分大小写  那些不区分大小写  还有 那些可以设置为不区分

    要搞清楚这个问题, 还要从 HTML 说起:

     在HTML 中:  标签属性 是不区分大小写的, 而属性值是区分 大小写的

    于是 对应的: 在CSS 中  标签选择器不区分大小写  属性选择器中的属性也不区分大小写, 而类选择器ID 选择器  本质上是 属性值 需要区分大小写

    不要使用 ID 选择器: 

    没有 任何理由 推荐在实际项目中使用 ID 选择器:

    虽然 ID 选择器的 性能也不错 可以 和 类选择器 分庭抗衡,但是由于 它存在下面两个 巨大 缺陷,这个 本来就不太重要的 有点就 更加不值一提!

    • 优先级太高; ID选择器的 优先级比较高,如果想 覆盖某些属性样式。 必然 还用使用 ID选择器 进行覆盖,再多的 类名都没用。这样会使得 整个项目的 选择器 优先级会变得 非常混乱。如果非要使用 ID选择器标识   建议使用 属性选择器 如 [id = 'csid']
    • 和 javascriopt 耦合,实际 开发时,元素 ID 主要用在 javascript 中,以便 DOM 元素快速 获取它, 如果 ID 和样式 关联,它的维护性会 大折折扣。 一旦 ID 变化,必须同时修改 CSS  和 javascript.围护难度变高 容易出错

     不要嵌套选择器:

    我见过太多 类似下面的 css 选择器了:

    .nva a {}
    .box > div {}
    .avatar img {}

    还有这样的

    .box .pic .icon {}
    .upbox .input .upbtn {}

    在使用嵌套 更加方便的 Sass less 之类的 预编译工具出现后,5层 6层嵌套的选择器也大量出现其性质 比 javascript 中满屏 全局变量还要糟

    这种不动脑子 偷懒的写法 除了让你在写html 代码时 省电力 ,其他全是缺点 包括

    • 渲染性能糟糕
    • 优先级混乱
    • 样式布局脆弱

       1>  渲染性能糟糕:

         有两方面会对渲染性能造成影响一是标签选择器    二是过深的嵌套

        CSS 选择器 性能排序 如下:

    • ID选择器   如 #foo;
    • 类选择器   如 .foo;
    • 标签选择器 如 div; image;
    • 通配符选择器 如 *
    • 属性选择器, 如 [herf];
    • 部分伪类  如 checked

     其中,ID 选择器 性能最好 类选择器处于 同一级别,差异很小。 比 标签选择器 具有 更加 明显的性能优势; 那么 看似乎 .box > div  也是一个不错的写法,  .box 性能很好, 选中后在匹配 标签为 div 的子元素; 然而 很遗憾 CSS 选择器是 从后向左 进行匹配 渲染的; .box>div  是先匹配 页面所有的 <div> 元素, 在进行  .box 类目元素; 如果页面内容 丰富. HTML 结构复杂  <div> 元素上千个  同时这样的 低效率 选择器 又很多, 则会 带来 明显可感知的 渲染性能 问题

    过深的嵌套 会对 性能产生的影响就更好理解了应为每 加深一层嵌套,浏览器在进行 选择器 匹配的时候  就会多一层计算。 一个两个嵌套 对性能 的消耗 几乎无影响。 但是如果数千航 CSS 都才用了 这种 嵌套!  量变会 引起 质的变化。 此时 光CSS 选择器解析 就需到达 百毫秒的级别

    然而 在大多数 场景下, 讨论 CSS 选择器的性能问题 是一个 伪命题, 首先  我们实际开发的  页面 都比较简单,选择器用的 在不合理,性能差异也不会太大; 其次 再复杂的页面  300毫秒 和 30毫秒 的性能差距 也不会成为 页面性能的 瓶颈。 你付出 千万分的 努力 带来的页面优化,  还不如一张 广告图 的尺寸 来的大

    因此 渲染性能 糟糕 确实是一个缺点,但是只是相对 而言。 并不是很严重的 问题。 大家可以把 注意力 放在 下面两个缺点上; 他们才是最关键的

         

      2>  优先级混乱:

    选择器优先级 有一个原则:那就是 尽可能保持较低的 优先级,这样方便 以较低的成本重置一样样式;

    然而 一旦选择器嵌套优先级就会变得复杂,当我们想要 重置 某些样式的时候,你会发现一个类名不管用。两个类名也不管用。打开控制台一样 你希望的重置样式 居然有 6个选择器 一次嵌套。

    此时 如果想要重置 img 的样式,只有几种方式:

    1>  使用同一优先级的 选择器,但这个选择器的位置 需要重置 的 css 代码后面

    2> 使用 更深层的 层级选择器

    3> 要么直接使用 ID选择器 要么直接 使用 !important

     

     3>  样式布局的脆弱:

    .layer_send_video .layer_upbox dd  .dd_succ  .pic_default img{}

    这段 css 出现了两个 标签选择器  ddimg, 在实际开发维护过程中, 调整 HTML 标签是 非常常见的事情,如果使用的是 dd 和 img 选择器, HTML 标签是不能换的。 如果使用的标签换了。整个样式都无效, 你必须去 CSS 文件中找到会议的 标签进行同步修改 造成维护 成本高

    另外 过多的选择器 将完全限定死  HTML结构, 导致后期 想 修改页面 维护成本高

      

    正确的选择器用法:

    正确的选择器用法是全部  使用无嵌套的 纯类名选择器

    <nav class="nav">
        <a herf>链接1</a>
        <a herf>链接2</a>
        <a herf>链接3</a>
    </nav>
    
    .nva {}
    .nav a {}

      鼓励 替换成下面的

    <nav class="cs-nav">
        <a herf class="cs-nav-a">链接1</a>
        <a herf class="cs-nav-a">链接2</a>
        <a herf class="cs-nav-a">链接3</a>
    </nav>
    
    .cs-nav {}
    .cs-nav-a {}

     

      不要再使用 下面的 HTML 和 CSS 代码了

    <div class="cs-box">
        <figure class="pic"
            <img src="./example.png" alt="示例图片">
            <figcaption>
                <i> class="ico"</i>图片标题       
            </figcaption>
        </figure>
    </div>
    
    .box {}
    .box .pic {}
    .box .pic .ico {}

    替换成:

    <div class="cs-box">
        <figure class="cs-box-pic"
            <img src="./example.png" alt="示例图片">
            <figcaption>
                <i> class="cs-box-pic-ico"</i>图片标题       
            </figcaption>
        </figure>
    </div>
    
    .cs-box {}
    .cs-box-pic {}
    .cs-box-pic-ico {}

    基本布局就使用 没有嵌套, 没有级联的类选择器 就可以了。这样的选择器 代码少性能高拓展性强 ,维护成本低 没有任何不适用的理由;

    然而 要给每个标签命名 很费精力, 所有下面我们将 讲一下 CSS的命名

     

     

    不要歧视面向属性的命名

    不少开发者  不认可下面的这种 基于CSS  属性本身的 命名方式。 尤其是 web 标准 刚刚 新启的那段时期

    .dn { display : none; }
    .db { display : block; }
    .dib { display : inline-block; }
    ...
    
    .m120 { margin-left:20px }
    ...
    .vt { vertical-align:top }
    .vm { vertical-align:middle }
    .vm { vertical-align:vb }
    ...
    .text-ell { text-overflow:ellipsis; white-space:nowrap; overflow:hidden }
    .abs-clip { potion:absolute; clip:rect(0,0,0,0); }

     为什么会不认可呢? 因为这类 命名在本质上 和 HTML 元素上写 style 属性 没有什么 区别

     然而 关键 看你怎么用, 在那里用:

     我习惯  将一个网站的页面归纳 为一下几个模块

    • 公共结构   

    • 公共模块  

    • UI组件   

    • 精致布局和一些细节末节

       其中 公共结构 ,共用模块  UI组件 精致布局不合适 使用 面向属性的命名; 前 3种 属性 属于 页面的公共内容。 如果使用了 面向属性的命名 日后维护起来很不方便, 因为这些内容 散布在 项目的各个角落。 一旦需要修改  则需要找到 所有的 地方进行修改;

       所以 这种使用 面向属性的命名 就很适合 做 精致布局 和一些 细节末节 只针对某些 有特征的页面

     

     

     

    本章补充和总结

    1.  命名的书写

    (1) 命名建议使用 小写, 使用英文单词 或  缩写, 对于专有 名称 可以使用 拼音

    .cs-logo-youku {}
    不建议使用 驼峰来命名 CSS样式;  驼峰是 专门 给 javaScript DOM 用, 以便和 CSS样式区分开来
    .csLogoYouku {}  //不建议哦

    (2) 对于组合 命名;  可以短横线 或 下划线链接, 可以组合使用短横线 和 下划线,  也可以连续短横线 或 下划线; 这两种方式都可以, 只要在项目 保持一致就可以

              但是对于 组合 个数 没有必要超过 5 个, 5个是极限

    .cs-logo-youku { }
    .cs_logo_youku { }
    .cs-logo--youku { }
    .cs-logo__youku { }

    (3)设置统一前缀,强化品牌同时 避免样式冲突:

    .cs-header { }
    .cs-loge { }
    .cs-logo-a { }

     

    2.  选择器类型

    根据选择器的使用类型, 我将网站 CSS 分为 3 个部分, 分别是:  CSS重置样式,  CSS基础样式 和  CSS交互变化样式 ;

    无论那种样式。 都没有任何理由 使用 ID选择器, 实在要用 使用 属性选择器代替,她的优先级 和 类选择器一模一样

    [id = "someID"] {}
    CSS 样式的重置 可以使用标签选择器 或者 属性选择器 等:
    
    bod, p { margin:0 }
    
    [type="radio"],
    [type="checkbox"] {
        position : absolution;
        clip : rescr(0,0,0,0);
    }

    所有的 CSS 基础样式全部使用 类选择器,没有层级, 没有标签(不建议

    .cs-module .img { }       /*  不建议 */
    .cs-module-ul > li { }    /*  不建议 */

    不要偷懒 在HTML 的标签上 写上不会冲突的类名

    .cs-module-img { }
    .cs-module-li { }

     

    3.  CSS 选择器分布

    • 对号 表示需要使用 和 遵循
    • 问好 表示可以使用也可以不使用
    • 禁止 表示不建议使用

     

     

     

     

     

     

     

    展开全文
  • 标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个id命名为“div1”,另外一个命名为“News”,肯定第二个比较易读,而且搜索引擎抓取率要高,团队合作还可以大大提高工作效率。...

    规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个id命名为“div1”,另外一个命名为“News”,肯定第二个比较易读,而且搜索引擎抓取率要高,在团队合作中还可以大大提高工作效率。为了达到这种效果我们就要规范化命名(语义化命名)!

    说个题外话,规范化命名的代码,会显着你更加专业!

    关于CSS命名法,和其他的程序命名差不多,主要有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法。看他们的名字挺不好理解的,不要被吓到了,其实很容易,不信的话继续往下看~

    【骆驼命名法】

    说到骆驼大家肯定会想到它那明显的特征,背部的隆起,一高一低的,我们的命名也要这样一高一低,怎么才能这样,就用大小写字母呗~,大写的英文就相当于骆驼背部的凸起,小写的就是凹下去的地方了,但是这个也是有规则的,就是第一个字母要小写,后面的词的第一个字母就要用大写,如下:

    [html]#headerBlock[/html]

    第一个单词(header)的第一个字母(h)用小写,第二个单词(block)的第一个字母用大写(B),如果第二个单词后面还有单词呢?那就是下面这种情况

    [html].navMenuRedButton[/html]

    第一个单词(nav)的第一个字母(n)用小写,第二个单词(menu)的第一个字母用大写(M),第三个单词(red)的第一个字母也用大写(R),第四个单词(button)的第一个字母还是用大写(B),同样后面所有单词的首字母都要大写。

    【帕斯卡命名法】

    这种命名法同样也是大小写字母混编而成,和骆驼命名法很像,只有一点区别,就是首字母要大写,如下:

    [html]#HeaderBlock[/html]

    和骆驼命名法只有一点区别,就是所有单词的首字母都要大写,当然也包括第一个单词(header)的首字母(h)了,也要大写。

    [html].NavMenuRedButton[/html]

    如果有多个,也是全部单词的首字母均要大写。

    题外话,如果说“骆驼命名法”是单峰驼的话,那么“帕斯卡命名法”就是双峰驼了~

    【匈牙利命名法】

    匈牙利命名法,是需要在名称前面加上一个或多个小写字母作为前缀,来让名称更加好认,更容易理解,比如:

    [html]#head_navigation[/html]

    [html].red_navMenuButton[/html]

    以上三种,前两种(骆驼命名法、帕斯卡命名法)在命名CSS选择器的时候比较常用,当然这三种命名法可以混合使用,只需要遵守有一个原则“容易理解,方便协同工作”就OK了,或者说“即使不懂代码的人看了代码也知道这块起什么作用”,没有必要强调是哪种命名法,根据个人喜好使用就行。

    以下为页面模块的常用命名:

    头:header

    内容:content/container

    尾:footer

    导航:nav

    侧栏:sidebar

    栏目:column

    页面外围控制整体布局宽度:wrapper

    左右中:left right center

    登录条:loginbar

    标志:logo

    广告:banner

    页面主体:main

    热点:hot

    新闻:news

    下载:download

    子导航:subnav

    菜单:menu

    子菜单:submenu

    搜索:search

    友情链接:friendlink

    页脚:footer

    版权:copyright

    滚动:scroll

    小技巧:tips

    展开全文
  • 不能以数字开头命名CSS类请不要以阿拉伯1、...但是可以用字母命名加数字方式命名,切记不能用数字加字母或纯数字方式来命名css选择器。新手div+css开发的时候,需要命名css伪类名称,如.abc,#bcd,这样的格式,很...

    不能以数字开头命名CSS类

    请不要以阿拉伯1、2、3、4开头来命名css伪类,不然将造成浏览器无法解释解析以数字开头命名的css类,最后造成类似css hack样不兼容,或直接以数字开头css名称的类无效(浏览器无法解释)。但是可以用字母命名加数字方式命名,切记不能用数字加字母或纯数字方式来命名css选择器。

    新手在div+css开发的时候,需要命名css伪类名称,如.abc,#bcd,这样的格式,很多人在命名css名称的时候都不知道怎么命名。甚至使用1、2、3、4等数字与英文字母的混合使用来命名。本身使用英文字母与数字混合使用是可以的,但是新手在命名的时候想到简便便直接用数字命名,或以数字开头命名css选择伪类名。

    以下为案例截图及说明

    以下为正确的css选择伪类命名方式(纯英文字母命名选择伪类名、英文字母与数字混合正确方式)

    85126eaea5d73e91504fd8d4ab06549b.png

    以这种方法英文字母开头或纯英文字母开头的css命名规则才是正确,不会造成css属性无效方法规则。

    以下为错误的css选择伪类命名方式(纯数字命名选择伪类名、数字开头与英文字母混合错误方式)

    56ade0f537fcf46415768469a7d0a8c6.png

    以这种方式命名的css选择属性类将使得浏览器不会解释,造成css无效。

    通过div css介绍以上两个截图案例说明相信你对css命名规则有一定了解。

    作者:css5

    展开全文
  • 为什么要规范css选择器命名?2.css选择器命名 1.为什么要规范css选择器命名? 由上到下,如果不规范css选择器命名,就会混乱,而且写代码速度慢很的。写代码时,心理:想清楚它应该命名什么,另一个又应该命名什么 2...
  • 1、W3C规范 W3C CSS2.1的 4.1.3 节提到:标识符...2、选择器命名规则 2.1字符采用 实际项目,建议只采用字符[a-zA-Z0-9],再加连字号(-)和下划线(_)。避免使用中文。 2.2 慎用数字 以字母开头,避免纯数字,
  • 开发软件的简单使用技巧:选择器的介绍:1.JPG开发者工具谷歌(chrome)首先随便打一段代码Documenth {font-size:40px;color:reed;}css介绍其中有两段错误。打开谷歌调试(F12、右击检查)捕获.JPG从上面可以发现什么...
  • 属性选择器在CSS2就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值。从上一节展示的CSS3...
  • 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章。简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来实现相同效果罢了。HTML:ppppppppCSS:div,p{margin:0;padding:0;}#box{width:300px;...
  • 但是,根据个人喜好,我更喜欢能够在CSS文件的每个单词之间切换,并且如果它们之间用下划线分隔并且没有停顿的话,会很烦人。另外,使用连字符允许您利用| =属性选择器,该选择器选择包含文本的任何元素,并可以...
  • 基础选择器:标签选择器、id选择器、类选择器、通配符选择器。2.高级选择器:后代选择器、交集选择器、并集选择器。1.1 标签选择器:通过标签的名字来进行选择。方法:标签名 。选择范围:选中的是整个的HTML文件...
  • 1. CSS初始 1.1 CSS的发展历程 从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长,为了满足页面设计者的...
  • 关于CSS选择器

    2021-08-04 07:15:29
    CSS选择器常见的有几种? 基础选择器 选择器 含义 * 通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用) #id id选择器,匹配特定id的元素 .class 类选择器,匹配class包含(不是等于)特定类的元素 ...
  • Css选择器命名规则

    千次阅读 2013-09-18 10:26:55
    实际项目,因为参与人员个人习惯不一样,导致写出的CSS选择器命名千奇百怪,对项目维护运营、内部技术沟通均产生了不利影响。 实际项目,因为参与人员个人习惯不一样,导致写出的CSS选择器命名千奇百怪,...
  • 简述CSS选择器

    2021-03-27 22:28:16
    目前根据我所学知识,CSS选择器我目前所掌握的分为几大类:基础选择器,层次选择器,伪类选择器,动态伪类选择器等…因为知识储备量目前仅有这些,所以没提到的其他选择器,可以去网上查看 选择器思维导图 选择器的...
  • 原来命名可以这样的前一段时间,某一站点看到了这样的内容:"这也可以?"是我对此的第一印象。不过,稍作调查知道了,这样写确实是有效的。此外,这个?_?的符号表情,看起来是不是相当有存在感?再看看搭配的css...
  • 翻译自sass官方文档: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#css_extensions嵌套规则 (Nested Rules)Sass 允许将一个 CSS 样式嵌套进另一个样式,内层样式仅适用于外层样式的选择器范围内...
  • CSS简介及常用选择器

    2021-04-21 15:24:06
    目录CSS简介HTML的局限性CSS层叠样式表应用CSS的方法CSS语法规范CSS的三大特性CSS的层叠性CSS的继承性CSS的优先级CSS常用选择器选择器及分类基础选择器标签选择器id选择器选择器通配符选择器复合选择器后代选择器...
  • xpath&css选择器

    2021-08-05 04:55:34
    这里放上我的练手文件,大家可以参考,或者挑毛病(__) 嘻嘻……xpath练手项目 XPath ,有七种类型的节点:元素、属性、文本、命名空间、处理指令、注释以及文档节点(或称为根节点)。节点实际上就是各种html标签...
  • :nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择::nth-child(length);/*参数是具体数字*/:nth-child(n);/*参数是n,n从0开始计算*/:nth-child(n*length)/*n的倍数选择,n从0开始算*/:...
  • 本篇博客主要是讲的css基础的引入、选择器与权重问题
  • CSS选择器(CSS Selectors)啥叫选择器?简单来说就是通过一些定义来选中特定的HTML标签。biu~首先我们来看看选择器的分类:基本选择器类型选择器:简单来说就是直接选择HTML标签(不带<>的那种),例如:...
  • 什么是选择器 基本选择器 通配选择器 元素名称选择器选择器 id选择器 类与id的命名规则 总结 复合选择器 常用复合选择器 后代元素选择器 子元素选择器 语法 相邻选择器 交集选择器 并集选择器 ...
  • 小编典典该:是CSS标识符的特殊字符,它代表了一个开始伪类选择一样:hover,:first-child等你将需要转义。#phoneForm\:phoneTable {background: pink;}这仅IE6 / 7不起作用。如果您也想支持这些用户,请\3A改用...
  • css如何命名

    2021-06-19 10:10:41
    一、网页制作规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率。所有的命名最好都小写属性的值一定要用双引号("")括起来,且一定要有值如class="divcss",id="divcss"每个标签都...
  • 标签选择器选中的是当前界面所有的标签, 而不能单独选中某一个标签 ​ 2.标签选择器无论标签藏得多深都能选中 ​ 3.只要是HTML的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....) 1.2id选择器 作用: ...
  • CSS选择器

    2021-10-18 09:31:12
    CSS选择器 CSS选择器标签选择器id选择器类选择器后代选择器子元素选择器交集选择器并集选择器兄弟选择器伪类选择器序选择器(结构伪类选择器)动态伪类选择器a标签的伪类选择器否定伪类伪元素选择器属性选择器通配符...
  • 【前端圭臬】三:详解 CSS 选择器

    热门讨论 2021-03-05 23:03:12
    CSS 第一篇,来看看各式各样的选择器和它们的表亲们。
  • CSSSelector之类型选择器与后代选择器等时间:2012-12-29 08:41来源:未知 作者:admin 点击:次分享到:前面的内容,我们用四篇文章讲了CSS代码结构的一些基础知识: 1、根基的建立使有意义的html标记...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,201
精华内容 14,880
关键字:

在css中选择器命名错误的是