CSS3 基础（1）—— CSS3选择器2 详解

其他 2018-10-23 10:31:21 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39141044/article/details/80815529

一、基本选择器

CSS的基本选择器

  • 通配符选择器 (* CSS2)
  • 元素选择器 (CSS1)
  • 类选择器 (CSS1)
  • ID选择器 (CSS1)
  • 后代选择器 (CSS2)

CSS3新增层次选择器

  • 子元素选择器 (这个准确的说应该是CSS2的)
  • 相邻兄弟元素选择器
  • 通用兄弟选择器
  • 群组选择器

(一)子元素选择器（直接后代选择器）

概念：
子元素选择器只能选择某元素的子元素

语法：
父元素 > 子元素（father > children）

兼容性：
IE8+、FireFox、Chrome、Safari、Opera

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        section>div{
            color: #F00;    
        }
    </style>
</head>
<body>
    <section>
        <div>这是article标签外的文字1</div>
        <article>
            <div>这是article标签内的文字</div>
        </article>
        <div>这是article标签外的文字2</div>
    </section>
</body>
</html>

这里写图片描述

(二)相邻兄弟元素选择器

概念
相邻兄弟选择器可以选择紧接在元素后的一个元素，而且他们都有一个相同的父元素。

语法
元素 + 兄弟相邻元素（element + sibling）

兼容性
IE8+、FireFox、Chrome、Safari、Opera

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟元素选择器</title>
    <style>
        section+div{
            color: #F00;    
        }
    </style>
</head>
<body>
    <section>
        <div>这是article标签外的文字1</div>
    </section>
    <div>
        section标签外的文字1
    </div>
    <div>
        section标签外的文字2
    </div>
</body>
</html>

这里写图片描述

(三)通用兄弟选择器

概念
选择某元素后面的所有的兄弟元素，而且他们具有相同的父元素。

语法
元素 ~ 所有兄弟元素 （element ~ siblings）

兼容性
IE8+、FireFox、Chrome、Safari、Opera

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟选择器</title>
    <style>
        section ~ article{
            color: #F00;    
        }
    </style>
</head>
<body>
    <div>
        section标签外的文字1
    </div>
    <section>
        <div>section内的文字</div>
    </section>
    <article>
        这是article标签中的文字1
    </article>
    <div>这是div中的内容</div>
    <article>
        这是article标签中的文字2
    </article>
    <article>
        这是article标签中的文字3
    </article>
</body>
</html>

这里写图片描述

(四)群组选择器

概念
将具有相同样式的元素分组放在一起，每个选择器之间使用逗号“,”隔开

语法
元素1、元素2、…元素n（element1、element2、….elementn）

兼容性
IE6+、FireFox、Chrome、Safari、Opera

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群组选择器</title>
    <style>
        section > article,
        section > aside,
        section > div{
            color: #f00;
        }
    </style>
</head>
<body>
    <section>
        <article>article中的文字</article>
        <aside>aside中的文字</aside>
        <div>div中的文字</div>
    </section>
</body>
</html>

这里写图片描述

二、属性选择器

  • Element[attribute] 选择所有带有attribute属性的元素
  • Element[attribute=value] 选择所有使用attribute=“value”的元素
  • Element[attribute~=value] 选择attribute属性包含单词”value”的元素
  • Element[attribute|=value] 选择attribute属性值为”value”或以”value-“开头的元素
  • Element[attribute^=value] 选择attribute属性值以”value”开头的所有元素
  • Element[attribute$=value] 选择attribute属性值以”value”结尾的所有元素
  • Element[attribute*=value] 选择attribute属性值包含”value”的所有元素

1、Element[attribute]

概念
选择所有带有attribute属性的元素

兼容性
IE8+、其他主流浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        input[type]{
            width: 200px;
            height: 30px;
        }
    </style>
</head>
<body>
    <form action="#">
        用户名：<input type="text" />
        <br>
        <br>
        留言：<input type="text" />
        <br>
        <br>
        电话：<input type="tel" />
        <br>
        <br>
        密码：<input type="password" />
    </form>
</body>
</html>

这里写图片描述

2.Element[attribute~=value]

概念
选择attribute属性包含单词“value”的元素

注意：

这里说的包含是指单词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div[class~="two"]{
            color: red;
        }
    </style>
</head>
<body>
    <div class="one two">
        测试1
    </div>
    <div class="two eight">
        测试2
    </div>
    <div class="one">
        测试3
    </div>
</body>
</html>

这里写图片描述
而不是这样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        a[href~="#"]{
            text-decoration: none;
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">测试</a>
        <a href="#1">测试1</a>
        <a href="#2">测试2</a>
        <a href="#3">测试3</a>
        <a href="#4">测试4</a>
    </div>
</body>
</html>

这里写图片描述

三、伪类选择器

伪类选择器里分为：

  • 动态伪类（锚点伪类、用户行为伪类）
  • UI元素状态伪类
  • CSS3结构伪类
  • 否定选择器
  • 伪元素

（一）动态伪类选择器

动态伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来
锚点伪类

  • :link 未被访问过
  • :visited 已访问过的

用户行为伪类

  • :hover 鼠标划过时
  • :active 鼠标点击时(就是鼠标按下，但没抬起时)
  • :focus 获取焦点时
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>动态伪类</title>
        <style type="text/css">
            *{margin: 0; padding: 0;}
            div.container{
                width: 600px;
                margin:30px auto;
            }
            div.form-group{
                margin-top: 30px;
            }
            label{
                width: 100px;
                display: inline-block;
            }
            input{
                width: 200px;
                height: 30px;
                border: 2px solid #999;
                outline: 0;
            }
            input:hover{
                border-color: #F00;
            }
            input:focus{
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <form action="#">
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <input type="text" name="username" id="username" />
                </div>
                <div class="form-group">
                    <label for="pwd">密码：</label>
                    <input type="password" name="pwd" id="pwd" />
                </div>
            </form>
        </div>
    </body>
</html>


（二）UI元素状态伪类选择器（CSS3新增）

我们把 :enabled（能够编辑的）、:disabled（不能编辑的）、:checked（选择了的）伪类称为UI元素状态伪类。（一般是使用在表单元素上）

兼容
IE9+、 其他主流浏览器

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>动态伪类</title>
        <style type="text/css">
            *{margin: 0; padding: 0;}
            div.container{
                width: 600px;
                margin:30px auto;
            }
            div.form-group{
                margin-top: 30px;
            }
            label{
                width: 100px;
                display: inline-block;
            }
            input{
                width: 200px;
                height: 30px;
                border: 2px solid #999;
                outline: 0;
            }
            input:enabled{
                border-color: #66ccff;
            }
            input:disabled{
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <form action="#">
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <input type="text" name="username" id="username" />
                </div>
                <div class="form-group">
                    <label for="pwd">密码：</label>
                    <input type="password" name="pwd" id="pwd" disabled />
                </div>
            </form>
        </div>
    </body>
</html>

（三）CSS3结构伪类选择器

我们把CSS3的:nth选择器也称为CSS3结构伪类选择器

选择器 说明 兼容
element:first-child 选择属于它的父元素的首个子元素的每个element元素，并为其设置样式 ie8+、Firefox、chrome、safari、opera；
element:last-child 指定属于它的父元素的最后一个子元素（element元素）的样式（要确保父元素的最后一个元素就是element） 兼容ie8+、Firefox、chrome、safari、opera；
:nth-child(n) 选择器匹配属于其父元素的第n个子元素，不论元素的类型n是一个简单表达式，取值从0开始，这里只能是‘n’，不能用其他字母代替，但是列表项的序号是从1开始而不是从0开始，比如2n为0 2 4…….在列表项的序号上0没有，也就是在第二项开始，n也可以用odd（相当于2n+1)和even代替（相当于2n） 兼容ie9+、Firefox4+、chrome、safari、opera。
element:nth-last-child(n) 匹配属于它的元素的第n个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数 ie9+、Firefox4+、chrome、safari、opera；
element :nth-of-type(n) 选择器匹配属于父元素的特定类型的第n个子元素的每个元素，与nth-child()的区别是，这个只看特定元素（element），忽略其他元素 兼容性ie9+、Firefox4+、chrome、safari、opera；
element:nth-last-of-type(n) 与nth-of-type(n)一样，只是这个是倒着数 兼容性ie9+、Firefox4+、chrome、safari、opera；
element:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素，相当于nth-of-type(1) ie9+、Firefox4+、chrome、safari、opera；
element:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素 兼容ie9+、Firefox4+、chrome、safari、opera；
element:only-child 选择器匹配属于其父元素的唯一子元素的每个元素 兼容ie9+、Firefox、chrome、safari、opera；
element:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素 兼容ie9+、Firefox4+、chrome、safari、opera；
：empty 选择器匹配没有子元素（包括文本）的每个元素。 IE9、Firefox、chrome、safari、opera

ps:简单来说带child的结构选择器在计算第几个的时候是连同其他元素一起计算的，而带type的计算第几个的时候是只针对指定元素进行计算的。

1.E:first-child、E:last-child、E:nth-child（n）

这个三个选择器都是相对于本身的父元素查找的

div:nth-child(3){
    color:red;
}

这会让所有对于div的父元素来说的第三个为div的子元素的文字变为红色

<body>
    <div class="one">1-1
        <div>1-1-1</div>
        <div>1-1-2</div>
        <div>1-1-3</div> <!--这个div相对于它的直接父类div来说是第3个-->
        <div>1-1-4</div>
    </div>
    <div class="one">1-2</div>
    <div class="one">1-3</div> <!--这个div相对于它的直接父类body来说是第3个-->
    <div class="one">
        1-4
        <div>1-4-1</div>
        <div>1-4-2</div>
        <div>1-4-3</div> <!--这个div相对于它的直接父类div来说是第3个-->
        <div>1-4-4</div>
    </div>
</body>

这里写图片描述

上面的写法很容易混淆，而且没达到所期望的效果，所以推荐配好子元素选择器一起使用

div.one>div:nth-child(3){
    color: red;
}

综合案例

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ol>li:first-child{
                color: red;
            }
            ol>li:last-child{
                color: blue;
            }
            ol>li:nth-child(2){
                color: green;
            }
        </style>
    </head>
    <body>
       <ul>
           <li>家用电器
                <ol>
                    <li>冰箱</li>
                    <li>洗衣机</li>
                    <li>空调</li>
                </ol>
           </li>
           <li>清洁用品
                <ol>
                    <li>洗衣液</li>
                    <li>消毒液</li>
                    <li>洗厕液</li>
                </ol>
           </li>
           <li>婴儿用品
                <ol>
                    <li>奶粉</li>
                    <li>纸尿裤</li>
                    <li>奶瓶</li>
                </ol>
           </li>
       </ul>
    </body>
</html>

这里写图片描述

2.结构伪类选择器中的参数n（例如：E:nth-child（n））

n是一个简单的表达式，取值是从“0”开始计算的，这里的只能写“n”，不能用其他字母代替。
参数n的一些用法：

  • e:nth-child(2n+1) 或者 e:nth-child(odd)选择奇数项。
  • e:nth-child(2n) 或者 e:nth-child(even)选择偶数项。

（四）否定选择器（:not）

:not（element/selector）选择器匹配非指定元素/选择器的每个元素。

语法
父元素：not（子元素/子选择器）

兼容
IE9+、其他主流


四、伪元素

CSS伪元素就是伪造一个，但是在HTML文档流中又找不到的元素
语法
元素::伪元素 （Element::pseudo-element）

PS:
CSS3开始伪元素使用::两个冒号，伪类选择器使用:一个冒号来区分。

兼容
IE9+、其他主流

伪元素一共有5个：

伪元素 说明
Element::first-line 根据first-line伪元素中的样式对element元素的第一行文本进行格式化（first-line只能用于块级元素）
Element::first-letter 用于向文本的首字母设置特殊样式（只能用于块级元素）
Element::before 在元素的内容前面插入新的内容，一般配合content属性使用。特点：1、它是element中的第一个子元素。2、行级元素。3、内容通过content写入。4、支持一切css属性(包括转成块级元素)。
Element::after 在元素的内容后面插入新内容，通常配合content使用，最常用的就是用于清除浮动（因为它能保证自己始终是最后一个元素）。
Element::selection 用于设置在浏览器中选中文本后的背景色和前景色,兼容性：IE9+,FireFox中浏览器需要加上前缀”-moz”


（一）::after伪元素清除浮动

<head>
    <meta charset="utf-8">
    <style>
        *{margin:0;padding: 0;}
        .box{width: 300px;height: auto;background-color: #000;
        }
        .subbox1{width: 200px;height: 50px;float: left;background-color: red;
        }
        .subbox2{width: 100px;height: 20px;float: right;background-color: yellow;
        }
        .subbox3{width: 100px;height: 60px;float: right;background-color: blue;
        }
        .footer{width: 100%;height: 60px;background-color: #CCC;text-align: center;
        }

        div.clear::after{
            display: block;
            content: "";    /*这个是必须写的*/
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box clear">
        <div class="subbox1"></div>
        <div class="subbox2"></div>
        <div class="subbox3"></div>
    </div>
    <div class="footer">footer</div>
</body>

这里写图片描述

（二）::selection伪元素

就是设置鼠标选中文本后的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div::selection{
            color: yellow;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧阿西吧
    </div>
</body>
</html>

这里写图片描述

五、CSS权重

当很多的规则被应用到某个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程；

权重等级与权值：
行内样式（1000）>id选择器（100）>类、属性选择器和伪类选择器（10）>元素和伪元素（1）>*(0)

css权重规则：
包含更高权重选择器的一条规则拥有更高的权重
id选择器（#id）的权重比属性选择器[id=”id”]高
带有上下文关系的选择器比单纯的元素选择器权重要高，如section>article{}比article{}权重高
与元素挨得近的规则生效
最后定义的规则会覆盖上面与之冲突的规则
无论多少个元素组成的选择器，都没有一个class选择器权重高
通配符选择器权重是0，被继承的css属性也带有权重，权重也是0

猜你喜欢

转载自blog.csdn.net/weixin_39141044/article/details/80815529
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022