CSS选择的艺术

常用常见的选择器：

类选择器[ .class ]，id选择器[ #id ]，全局选择器[ * ]，元素选择器[ element ]

根据层次关系定位：

(1) element, element

例如:　　div, p 　　【选择：所有的div 和 p】

(2) element  element

例如:　　div p 　　【选择：所有div中的 p】

(3) element > element

例如:　　div>p　　【选择：所有父节点是div的p】

（4）element + element

例如:　　div + p　　【选择：紧邻在div标签之后的一个p标签】

（5）element ~ element

例如:　　div ~ p　　【选择:在div标签之后的所有p标签】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="selector.css">

</head>

<body>

    <div>div

        <p>p</p>

    </div>

    <p>p</p>

    <p>p</p>

    <div>div

        <div>div

            <p>p</p>

        </div>

    </div>

    <div>div

        <span>span

            <p>p</p>

        </span>

    </div>

    <span>span</span>

    <p>p</p>

</body>

</html>

selector.html

div, span, p{

    display: inline-block;

    width: 100px;

    height: 100px;

    padding: 10px;

    border: solid 1px black;

    overflow: hidden;

}

div , p{

    background: red;

}

selector.css

属性相关

（6）[ attribute ]

 例如：　　[ class ]　　【选择：所有含有class属性的标签】

（7）[ attribute = value ]

例如:　　[ class = title ]　　选择:所有 (class属性只有一个值且是 title 的所有元素)

(8) [ attribute ~= value ]

例如:　　[ class ~= title ]　　【选择所有(class属性中含有一个title值的标签)】

(9)[ attribute |= value ]

例如:　　[ class |= title ]　　选择所有(class属性中只有一个值，且这个值开头的单词是title。) 注意：这个值是以 - 分割单词的

（10） [ attribute ^= value ]

例如:　　[ class ^= title ]　　选择所有class属性的第一个值的开头是title的元素

（11） [ attribute $= value]

例如:　　[ class $= title ]　　【选择所有class属性最后一个值的结尾是title的元素】

（12） [ attribute *= value ]

例如:　　[ class *= title ]　　【选择：所有class属性任何一个值中含有title的元素】

div, span, p{

    display: inline-block;

    width: 100px;

    height: 100px;

    padding: 10px;

    border: solid 1px black;

    overflow: hidden;

}

/*

[ class ]{

    background: red

}

[ class = title  ]{

    background: red

}

[ class ~= title  ]{

    background: red

}

[ class |= title  ]{

    background: red

}

[ class ^= title  ]{

    background: red

}

[ class $= title  ]{

    background: red

}

[ class *= title  ]{

    background: red

} */

selector.css

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="selector.css">

</head>

<body>

    <div class="title"> class = title </div>

    <div class="title selector">class = title selector</div>

    <div class="selector title">class = selector title</div>

    <div class="title_selector"> class = title_selector</div>

    <div class="selector_title">class = selector_title</div>

    <div class="title-selector"> class = title-selector</div>

    <div class="selector-title">class = selector-title</div>

</body>

</html>

attr_selector.html

伪类选择

常用于a标签：

(13):active

例如:　　a.active　　【选择：正在被点击的a元素】

(14）:hover

例如:　　a.hover　　【选择：鼠标正在在它上面移动的a元素；也用于实现下拉菜单（drop down manu）】

(15):link

例如:　　a.link　　【选择：尚未被访问的a链接】

(16):visited

例如:　　a.visited　　【选择已经访问过的a链接】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="selector.css">

</head>

<body>

    <a href="#" class="hover">hover</a>

    <a href="#" class="active">active</a>

    <a href="https://www.test.com" class="link">link</a>

    <a href="#" class="visited">visited</a>

</body>

</html>

a_selector.html

div, span, p, a{

    display: inline-block;

    width: 100px;

    height: 100px;

    padding: 10px;

    border: solid 1px black;

    overflow: hidden;

}

a.hover:hover{

    color: orange;

}

a.active:active{

    color:red;

}

a.link:link{

    color:blue;

}

a.visited:visited{

    color:green;

}

selector.css

常用于input文本框：

(17) :check

例如:　　input:checked　　【选择：被选中的radio或checkbox】

(18):disabled

例如:　　input:disabled　　【选择：禁用的文本框】

(19):enabled

例如:　　input:enabled　　【选择：可用的文本框】

(20):focus

例如:　　input:focus　　【选择：被聚焦的文本框】

(21):required

例如:　　input:required　　【选择：必填的文本框】

(22):optional

例如:　　input:optional　　【选择：不必填项（可选择填写）的文本框】

(23):read-only

例如:　　input:read-only　　【选择：只读文本框】

(24):read-write

例如:input:read-write　　【选择：可读可写文本框(disabled也被选择了)】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="selector.css">

</head>

<body>

    <div>

        <input type="radio" name = 'sex' checked>

        <label>checked</label>

    </div>

    <div>

        <input type="radio" name = 'sex'>

        <label>uncheck</label>

    </div>

    <div>

        <input type="text" disabled> disabled

    </div>

    <div>

        <input type="text">enabled

    </div>

    <div>

        <input type="text" required>required

    </div>

    </div>

    <div>

        <input type="text" readonly>readonly

    </div>

</body>

</html>

input_selector.html

div, span, p, a{

    display: inline-block;

    width: 200px;

    height: 100px;

    padding: 10px;

    border: solid 1px black;

    overflow: hidden;

}

/* input:checked + label{

     color: red;

} */

/*

input:disabled{

    border: red 5px solid;

}

input:enabled{

    border: green 5px solid;

}

input:focus{

    border: red 5px solid;

}

input:required{

    border: black 5px solid;

}

input:read-only{

    border: yellow 5px solid;

}

input:read-write{

    border: blue 5px solid;

}

input:optional{

    border: red 5px solid;

}

*/

selector.css

(25):invalid

例如:　　input:invalid　　【选择：输入值不合法的文本框】

(26):valid

例如:input:valid

选择输入值合法的文本框

(27):in-range

例如:　　input:in-range　　【选择：输入值长度或大小在规定范围之内的文本框】

(28):out-of-range

例如:　　input:out-of-range　　【选择：输入值长度或大小在规定范围之外的文本框】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="selector.css">

</head>

<body>

    <div>

        <input type="number" min="5" max="10"> range[5-10]

    </div>

    <div>

        <input type="text" minlength="5" maxlength="10"> length-range[5-10]

    </div>

    <div>

        <input type="email" >email

    </div>

</body>

</html>

input_selector.html

div, span, p, a{

    display: inline-block;

    width: 200px;

    height: 100px;

    padding: 10px;

    border: solid 1px black;

    overflow: hidden;

}

input:in-range{

    border: 5px solid green;

}

input:out-of-range{

    border: 5px solid red;

}

input:valid{

    border: 5px solid green;

}

input:invalid{

    border: 5px solid red;

}

selector.css

文章段落相关：

(29)::after

例如:　　div::after　　【在div内容的后面插入内容】

(30)::before

例如:　　div::before　　【在div内容的前面插入内容】

(31)::first-letter

例如:　　div::first-letter　　【选择：div内容的第一个字母】

(32)::first-line

例如:　　div::first-line　　【选择：div内容的第一行】

若first-letter和first-line不同的style修饰同一个div：

(33)::selection

选择:鼠标选中的一段文字

 新发现 :由::before和::after插入的文字无法被鼠标选中

和父结点相关:

(34):first-child

例如:　　p:first-child　　【选择 ：p元素，满足：它是它父元素的第一个元素】

(35):last-child

例如:　　p:last-child　　【选择： p元素，满足：它是它父结点的最后一个元素】

(36):first-of-type

例如:　　p:first-of-type　　【选择：p元素，满足：它是它父节点的第一个p元素】

(37):last-of-type

例如:　　p:last-of-type　　【选择：p元素，满足：它是它父节点的最后一个p元素】

(38):nth-child(n)

例如:　　p:nth-child(2)　　【选择 ：p元素，满足：它是它父节点的第二个元素】

p:nth-child(2n)　　【选择 ：p元素，满足：它是它父节点的第偶数个元素】

(39):nth-last-child(n)

例如:　　p:nth-last-child(2)　　【选择 ：p元素，满足：它是它父节点的倒数第二个元素】

p:nth-last-child(2n)　　【选择 ：p元素，满足：它是它父节点的倒数第偶数个元素】

(40):nth-of-type(n)

例如:　　p:nth-of-type(2)　　【选择 ：p元素，满足：它是它父节点的第二个p元素】

例如:　　p:nth-of-type(2n)　　【选择： p元素，满足：它是它父节点的第偶数个p元素】

(41):nth-last-of-type(n)

例如:　　p:nth-last-of-type(2)　　【选择： p元素，满足：它是它父节点的倒数第二个p元素】

例如:　　p:nth-last-of-type(2n)　　【选择 ：p元素，满足：它是它父结点的倒数第偶数个p元素】

(42):only-child

例如:　　p:only-child　　【选择：p元素，满足：它是它父结点的唯一元素（独生）】

(43):only-of-type

例如:　　p:only-of-type　　【选择：p元素，满足：它是它父结点的唯一p元素（可能有其它非p元素）】

其它：

(44):root

选择根节点

(45):not(selector)

例如:　　div :not(p)　　【选择:div内所有不是p的元素(div和:之间有空格)】

(46):lang(language)

例如:　　div:lang(zh)　　【选择:属性lang=it的所有div元素】

 
 
测试于Chrome浏览器
 
上面的选择器之间还能相互组合使用，精确定位，在组合的时候也要考虑其优先级和性能等问题。
 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="selector.css">

</head>

<body>

  <div class="main">

      <ul>

          <li>banner</li>

          <li>banner</li>

          <li>banner</li>

          <li>banner</li>

          <li>banner</li>

      </ul>

        <div class="news">

                <ul>

                    <li>新闻</li>

                    <li>新闻</li>

                    <li>新闻</li>

                    <li>新闻</li>

                    <li>新闻</li>

                </ul>

                <ul>

                      <li>新闻</li>

                      <li>新闻</li>

                      <li>新闻</li>

                      <li>新闻</li>

                      <li>新闻</li>

                  </ul>

            </div>

            <div class="notice">

                <ul>

                    <li>公告</li>

                    <li>公告</li>

                    <li>公告</li>

                    <li>公告</li>

                    <li>公告</li>

                </ul>

                <ul>

                      <li>公告</li>

                      <li>公告</li>

                      <li>公告</li>

                      <li>公告</li>

                      <li>公告</li>

                  </ul>

            </div>

  </div>

</body>

</html>

selector.html

li{

    display: inline-block;

    width: 100px;

    height: 100px;

    padding: 10px;

    border: solid 1px black;

    overflow: hidden;

}

.news li:nth-child(2n){

    background: yellow

}

div.main > ul li:nth-child(2n){

    background: green

}

.main > :last-child li:nth-child(2n){

    background: black

}

selector.css

 

JavaScript（4）——CSS选择的艺术的更多相关文章

  1. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  2. 整理CSS选择符

    1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必 ...

  3. JQuery学习笔记【CSS选择符】--02

    Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...

  4. [css选择器]总结：IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

  5. jQuery基础与JavaScript与CSS交互-第五章

    目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Fle ...

  6. 20款有用的JavaScript和CSS库

    Web开发与设计已经发展达到了新的高峰.创建一个网站并不是那么简单了,因为它使用的是几年前.今天是时间创造有吸引力的网站,不仅吸引了游客的关注也让他们订婚.另外,和功能的有吸引力的功能添加到该网站不应 ...

  7. 网站前端性能优化之javascript和css

    之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶 ...

  8. JavaScript修改CSS属性的实例代码

    用原生的javascript修改CSS属性的方法. 用JavaScript修改CSS属性 只有写原生的javascript了.  1.用JS修改标签的 class 属性值:  class 属性是在标签 ...

  9. JavaScript 与 CSS 滚动实现最新指南

    一些(网站)滚动的效果是如此令人着迷但你却不知该如何实现,本文将为你揭开它们的神秘面纱.我们将基于最新的技术与规范为你介绍最新的 JavaScript 与 CSS 特性,(当你付诸实践时)将使你的页面 ...

随机推荐

  1. 关于SendMessage和PostMessage的理解的例子

    对于SendMessage 和 PostMessage 平时口头的解释是 SendMessage 发送消息后等待返回, PostMessage 发送消息后立即返回 . 但是这样解释还是不具体,什么叫等 ...

  2. STMStudio-stm32软件的应用笔记

    上次编写中,已经提到该软件的功能了,可以增加调试手段. 编译出axf文件-keil和out文件-iar,注意keil在output文件名是,不能有"."既NL_ZKTP3_V1.0 ...

  3. 【Android】查看内存

      [文章来源]http://blog.csdn.net/hudashi/article/details/7050897 查看内存使用的方式有很多种,但是各个方式查看到的结果可能会有微略不同. 方式一 ...

  4. 洛谷P2622 关灯问题II

    洛谷题目链接 声明: 本篇文章不讲基础,对萌新不太友好,(我就是萌新),要学状压$dp$的请另寻,这篇文章只是便于本人查看.... 首先看到$n<=10$,就可以考虑状压了,要求最小值,所以初始 ...

  5. 【csp模拟赛1】铁路网络 (network.cpp)

    [题目描述] 在暑假来临之际,小 Z 的地理老师布置了一个暑假作业,让同学们暑假期间 了解一下 C 国的铁路发展史.小 Z 在多番查证资料后发现,C 国在铁路发展初期, 铁路网络有着一个严密规整的结构 ...

  6. 图论小专题C

    3 负环及其应用 3.1 判定算法 判断负环只能用"边松弛"算法,也就是Bellman-Ford和SPFA算法.这两个算法都是\(O(NM)\)级别的.因为负环中一定存在一条负边, ...

  7. bbs-admin

    目录 引入单例----单例补充 admin---url/注册的自定义配置 解析admin源码 django-admin注册账号-----创建超级用户 python manage.py createsu ...

  8. Pycharm下将py文件打包成exe文件

    1. 在PyCharm下安装PyInstaller 1. 首先,打开自己要发布的工程   2. 点击底部的[Terminal]打开终端,中输入命令pip install pyinstaller后回车, ...

  9. single-pass单遍聚类方法

    一.通常关于文本聚类也都是针对已有的一堆历史数据进行聚类,比如常用的方法有kmeans,dbscan等.如果有个需求需要针对流式文本进行聚类(即来一条聚一条),那么这些方法都不太适用了,当然也有很多其 ...

  10. Go程序的一生是怎样的？

    Go 程序是怎样跑起来的 原创: 饶全成 码农桃花源  刚开始写这篇文章的时候,目标非常大,想要探索 Go 程序的一生:编码.编译.汇编.链接.运行.退出.它的每一步具体如何进行,力图弄清 Go 程序 ...