美文网首页
CSS 选择器

CSS 选择器

作者: 大大大老猫 | 来源:发表于2019-04-13 22:24 被阅读0次

    CSS 选择器

    CSS 基本选择器及其扩展

    CSS 基本选择器

    1. 通配符选择器 *
    2. 元素选择器 使用标签的名称
    3. 类选择器 使用 . 进行匹配
    4. ID 选择器 使用 # 进行匹配
    5. 后代选择器 使用空格进行匹配 
    >代码案例

```html
<style>
    * {   /* 通配符选择器 */
        margin: 0;
        padding: 0;
    }

    p { /* 元素选择器 */
        color: pink;
    }

    div {  /* 元素选择器 */ 
        width: 100px;
        height: 100px;
    }

    #test-id{  /* ID选择器 */
        font-size:24px;
    }

    .test-class{ /* 类选择器 */
        color:red;
    }

    .test-class p{  /* 后代选择器 */
        color:pink;
    }

</style>

<body>
    <div id="test-id" class="test-class">
        这是一个 div 块级元素
        <p>这是一个p标签</p>
    </div>
</body>

```

    CSS 扩展选择器

    1. 直接后代选择器 使用 > 匹配

    2. 相邻兄弟选择器 使用 + 匹配

    3. 通用兄弟选择器 使用 ~ 匹配

    4. 选择器分组 使用 , 分组

      代码案例

      <style>
    .container>div {  /* 直接后代选择器 */
        border: purple 1px solid;
    }

    .div1+p { /* 相邻兄弟选择器 */
        color: pink;
    }

    .div1~p { /* 通用兄弟选择器 */
        border: springgreen 1px solid;
    }

    .test1,
    .test2,
    .test3 {  /* 选择器分组 */ 
        font-size: 50px;
        color: yellowgreen;
    }
</style>

<body>
    <div class="container">
        <div class="div1">1</div>
        <p>p1相邻兄弟</p>
        <div>
            div2
            <div>div2-1</div>
        </div>
        <div>3</div>
        <p>p2通用兄弟</p>
        <div class="test1">4</div>
        <div class="test2">5</div>
        <div class="test3">6</div>
        <div>7</div>
    </div>
</body>

    属性选择器

    存在和值选择器

    1. [attr] 该选择器选择包含 arrt 属性的所有元素，不论 attr 的值如何。

    2. [attr=val] 该选择器仅选择 attr 属性被赋值为 val 的所有元素。

    3. [attr~=val] 表示带有 attr 命名的属性的元素，并且该属性是一个以空格作为分割的值列表，其中至少包含一个值为 val。

      代码案例

      <style>
    div[name] {  /* [attr] */
        background: dodgerblue;
    }

    div[name="dalaomao"] { /* [attr=val] */
        border: 1px solid pink;
    }

    div[name~="test"] {/* [attr~=val] */
        color: yellowgreen;
    }
</style>

<body>
    <div class="container">
        <div name="dalaomao">带name属性的div</div>
        <div name="test xss">测试2的div</div>
    </div>
</body>

    子串值属性选择器

    1. [attr|=val] 选择 attr 属性值为 val(包含val)，或者val-开头的元素。

    2. [attr^=val] 选择 attr 属性值以 val(包含 val) 开头的元素。

    3. [attr$=val] 选择 attr 属性值以 val(包含 val) 结尾的元素。

    4. [attr*=val] 选择 attr 属性值中包含字符串 val 的元素。

      代码案例

      <style>
    ul>li[class|="atguigu"] {  /* [attr|=val] */
        border: 1px solid;
    }

    ul>li[class^="atguigu"] {/* [attr^=val] */
        border-color: yellowgreen;
    }

    ul>li[class$="guigu"] {/* [attr$=val] */
        background: deeppink;
    }

    ul>li[class*="-"]{/* [attr*=val] */
        background: deepskyblue;
    }
</style>

<body>
    <ul>
        <li class="atguigu">atguigu</li>
        <li class="atguigu-1">atguigu-1</li>
        <li class="atguigu-2">atguigu-2</li>
        <li class="atguigu-3">atguigu-3</li>
        <li class="atguigu-4">atguigu-4</li>
        <li class="guigu">guigu</li>
        <li class="guigu1">guigu1</li>
        <li class="guigu2">guigu2</li>
    </ul>
</body>

    伪类与伪元素选择器

    链接伪类

    以下三个伪类仅可以作用于 "链接" 上,故叫 “链接伪类”，又叫“锚点伪类”.

    1. :link 表示作为超链接,并指向一个未访问地址的所有锚。

    2. :visited 表示作为超链接,并指向一个已访问地址的所有锚。

    3. :target 表示一个特殊元素，它的 ID 是URI 的片段标识符。

      代码案例

      <style>
    /* link & visited 使用方法 */
    .container a:link {  /* :link */
        color: pink;
    }

    .container a:visited { /* :visited */
        color: green;
    }
</style>

<body>
    <div class="container">
        <a href="#">Click me.</a>
    </div>
</body>

      target 面试题(用CSS实现选项卡)

      <style>
    * {
        padding: 0;
        margin: 0;
    }

    a {
        text-decoration: none;
        color: deeppink;
    }

    div {
        width: 200px;
        height: 200px;
        background: pink;
        display: none;
        font: 50px/200px "Copperplate";
    }

    :target{
        display: block;
    }

</style>
<body>
    <a href="#div1">div1</a>
    <a href="#div2">div2</a>
    <a href="#div3">div3</a>
    <div id="div1">DIV1</div>
    <div id="div2">DIV2</div>
    <div id="div3">DIV3</div>
</body>

    动态伪类

    1. :hover 表示鼠标悬浮到元素上时。

    2. :active 表示匹配被用户激活的元素(鼠标按下未抬起时)。

      代码案例

       <style>
     .container a:hover {  /* :hover */
         color: deeppink;
     }

     .container a:active {/* :active */
         color: deepskyblue;
     }
 </style>

 <body>
     <div class="container">
         <a href="#">Click me.</a>
     </div>
 </body>

    表单伪类

    1. :enabled 匹配可编辑的表单

    2. :disabled 匹配被禁用的表单

    3. :checked 匹配被选中的表单

    4. :focus 匹配获取焦点的表单

      代码案例

       <style>
     .container input:enabled {  /* 可编辑的表单 背景色改为 粉色 */
         background: pink;
     }

     .container input:disabled { /* 禁用的表单 背景色改为 绿色 */
         background: green;
     }

     .container input:focus {  /* 表单获取焦点时背景颜色改为 深粉色 */
         background: deeppink;
     }
 </style>

 <body>
     <div class="container">
         <input type="text">
         <input type="text" disabled>
     </div>
 </body>

      自定义单选按钮案例

       <style>
     * {
         margin: 0;
         padding: 0;
     }

     label {
         float: left;
         width: 100px;
         height: 100px;
         border: 1px solid;
         border-radius: 50%;
         position: relative;
     }

     input {
         position: absolute;
         top: -50px;
         left: -50px;
         display: none;
     }

     span {
         position: absolute;
         border-radius: 50%;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
     }

     input:checked+span {
         background: pink;
     }
 </style>

 <body>
     <label>
         <input type="radio" name="test" checked>
         <span></span>
     </label>
     <label>
         <input type="radio" name="test">
         <span></span>
     </label>
     <label>
         <input type="radio" name="test">
         <span></span>
     </label>
 </body>

    结构性伪类

    注意：

    ① index 的值从 1 开始计数.

    ② index 可以为变量 n (只能是 n)

    1. :nth-child(idnex) 系列

      :first-child

      :last-child

      nth-last-child(idnex)

      only-child 相当于 :first-child:last-child 或者 :nth-child(index):nth-last-child(index)

      代码案例

      <style>
    /*
        获取 ul 下边的所有子元素，并且匹配到第一个子元素，并且 这个子元素必须是 li.
    */

    /* 第一个是 li标签 的时候生效 */
    ul>li:nth-child(1) {
        color: palegreen;
    }

    /* 第一个标签是 p标签 的时候生效 */
    ul>p:first-child {
        color: deeppink;
    }

    /* 最后一个标签是 li标签 的时候生效 */
    ul>li:last-child {
        color: green;
    }

    /* 倒数第二个标签是 li标签 的时候生效 */
    ul>li:nth-last-child(2) {
        color: deepskyblue;
    }

    /* 只有一个 p标签 的时候生效 */
    ul>p:only-child {
        color: violet;
    }
</style>

<body>
    <ul>
        <p>我是 ul 的第一个 p 儿子</p>
        <li>1</li>
        <p>我是 ul 的第二个 p 儿子</p>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <a href="#">我是a标签</a>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>

    2. :nth-of-type(index) 系列

      :first-of-type

      :last-of-type

      :nth-last-type(index)

      only-of-type

      代码案例

      <style>
    /* 我要选择的是第二个 li标签 */
    ul>li:nth-of-type(2) {
        color: deeppink;
    }

    /* 我要选择的是倒数第二个 li标签 */
    ul>li:nth-last-of-type(2) {
        color: blueviolet;
    }

    /* 我要选择的是第一个 li标签 */
    ul>li:first-of-type {
        color: greenyellow;
    }

    /* 我要选择的是最后一个 li标签 */
    ul>li:last-child {
        color: hotpink;
    }

   
    /* 我要选择的是仅有的一个 a标签 */
    ul>a:only-of-type {
        color: yellowgreen;
    }
</style>

<body>
    <ul>
        <p>我就是一个 p1 .</p>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <a href="#">我是一个 a标签 </a>
        <li>7</li>
        <li>8</li>
        <p>我就是一个 p2 .</p>
    </ul>
</body>

    3. :not

    4. :empty 内容必须是空的，有空格都不行，有 attr 没关系。

    伪元素选择器

    未完待续.

    CSS 声明的优先级

    相关文章

      网友评论

          本文标题：CSS 选择器

          本文链接：https://www.haomeiwen.com/subject/rekdwqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|CSS 选择器|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！