• 属性选择器


    本文地址:http://www.cnblogs.com/veinyin/p/7606802.html 

    在学习了经典的 《 Head First HTML 与 CSS 》 之后,当然要加以拓展,毕竟这本书只是把最常用的一些东西讲了一遍,真正用来排版还是有些不够用的。

      于是我接触到了 《 CSS权威指南 》,有很多人推荐的书哦,当然,我也是按照当初写的学习路线一步步学习的。有计划有目标的学要比盲目的这学一点那学一点效率高不是吗?这一篇要记录我学的属性选择器的,就不废话了,下面开始。

      还得多说一句,如果想要看到效果的话需要自己准备工具和浏览器哦,本文不放效果截图,留给爱学习的你来探索是否能看到我描述的效果。 

    1 选择有class属性的元素

    1 h1[class]{
    2     color: red;
    3 }

    以上语句就把所有拥有class属性的h1颜色设置为红色了~

    1 a[href][title]{
    2     font-weight: bold;
    3 }

    以上语句把同时有href和title的链接文本设置为了粗体 

    2 根据具体属性选择

    1 <p class="a">a</p>
    2 <p class="b">b</p>
    1 p[class="b"]{
    2     color: red;
    3 }

    此时class="b"的文本"b"为红色,看上去下面这条语句效果一样,可以选择自己喜欢的方法,由于入门没有学过上面这种选择方法,我还是比较喜欢下面这种....

    1 p.b{
    2     color:red;
    3 }

    但是要注意如果一个p给了两个class值呢

    1 <p class="a">a</p>
    2 <p class="b">b</p>
    3 <p class="b c">bc</p>

    下面这样这样就会完全匹配,选择class属性值为"b c"的所有p元素,例子中使bc为红色,而其他两个p颜色为默认

    1 p[class = "b c"]{
    2     color: red;
    3 }

    3 根据部分属性值选择

    还是上面给了两个class属性值的例子,如果CSS写成

    1 p[class ~= "b"]{
    2     color: red;
    3 }

    那么class值包含b的p元素文本颜色都变成红色。

    "~="这个属性选项器可以用于任何属性,不仅仅是class

    还有子串选择器需要记忆哦

    1 [foo ^= "bar"]      /* 选择foo属性值中以"bar"开头的所有属性 */
    2 [foo $= "bar"]      /* 以"bar"结尾 */
    3 [foo *= "bar"]      /* 包含"bar" 不一定是完整的属性值,可以是属性值的一部分*/

    突然意识到以前的笔记似乎把注释弄错了,直接打的双斜线,CSS是不识别的,以前的就不改了,今后注意! 

    4 特定属性选择

    1 img[src |= "Figure"]{
    2     border: thin solid gray;
    3 }

    给所有 src 为 Figure 开头或 Figure- 开头的 img 加上一个边框。

    end~

  • 相关阅读:
    CollectionView Header And Footer 的使用
    UICollectionView 的添加自定义高度的区头
    利用SDWebImage 清理缓存
    iOS tableView 中 UITableView中UITableViewStyleGrouped和UITableViewStylePlain的区别
    关于tableview的分割线隐藏问题
    改变输入框的placehould的颜色 和边框颜色
    将代码在有xib得情况下设置到最底层(即执行顺序不是先执行xib) 将图片毛玻璃状态
    通知监听键盘高度变化 自适应键盘高度
    iOS 定义枚举
    iOS 快速存储到本地
  • 原文地址:https://www.cnblogs.com/veinyin/p/7606802.html
Copyright © 2020-2023  润新知