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. python pip 出现locations that require TLS/SSL异常处理方法

    python pip 出现locations that require TLS/SSL异常处理方法 转载 郑才华 发布于2018-03-24 21:41:16 阅读数 51844 收藏 展开 最近在r ...

  2. BZOJ1791 [Ioi2008]Island 岛屿[基环树+单调队列优化DP]

    基环树直径裸题. 首先基环树直径只可能有两种形式:每棵基环树中的环上挂着的树的直径,或者是挂在环上的两个树的最大深度根之间的距离之和. 所以,先对每个连通块跑一遍,把环上的点找出来,然后对环上每个点跑 ...

  3. Idea中Module is not specified解决办法

    打开idea,想跑一个类,但是,给我报了一个红叉: 当我点击run的时候,弹出来一个框: “Error:Module not specified”  Module 未指定 “这个原因是项目文件夹有修改 ...

  4. RunTime.getRunTime().addShutdownHook 添加钩子

    Runtime.getRuntime().addShutdownHook(shutdownHook); google了一下它的含义:在jvm中增加一个关闭的钩子,当jvm关闭的时候,会执行系统中已经设 ...

  5. 牛客国庆集训派对Day6 && CCPC-WannaFly-Camp #1 F. kingdom（DP）

    题目链接:https://www.nowcoder.com/acm/contest/206/F 题意:一棵 n 个点的树,根为 1,重儿子到父亲的费用为 0,其余为 1,问所有点到 1 的最大总费用是 ...

  6. .net 中跨域问题

    1.ashx跨域接口 context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); 2.w ...

  7. 在maven项目中如何引入另外一个项目（转）

    原文链接:https://blog.csdn.net/jianfpeng241241/article/details/52654352 1  在Myeclipse中准备两个maven demo. , ...

  8. py操作mongodb总结

    python使用的版本 python3. python操作mongodb使用的是pymongo,安装方法: pip install pymongo 测试 PyMongo 接下来我们可以创建一个测试文件 ...

  9. Luogu P1951 收费站_NOI导刊2009提高（2） 二分 最短路

    思路:二分+最短路 提交:1次 题解: 二分最后的答案. $ck()$: 对于每次的答案$md$跑$s,t$的最短路,但是不让$c[u]>md$的点去松弛别的边,即保证最短路不经过这个点.最后$ ...

  10. PHP mysqli_fetch_all() 函数

    从结果集中取得所有行作为关联数组: <?php // 假定数据库用户名:root,密码:123456,数据库:RUNOOB $con=mysqli_connect("localhost ...