前端开发（基本选择器、组合选择器、交集与并集选择器、序列选择器、属性(2)

当前位置:

首页 > Python基础教程 >

前端开发（基本选择器、组合选择器、交集与并集选择器、序列选择器、属性(2)

注意： 1、选择器与选择器之间必须用逗号来链接 2、选择器可以使用标签名称、id、class

11.332 交集选择器

作用：给所有选择器选中的标签中，相交的那部分标签设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a.part2 {color: red;}           #找到同时有a标签且class="part2"，添加属性
    </style>
</head>
<body>
    <h1>哈哈啊</h1>
    <p class="part2">我是段落2</p>
    <a href="#" class="part2">a标签1</a>  #此处文本变成红色
    <a href="#">a标签2</a>
</body>
</html>

注意： 1、选择器与选择器之间没有任何链接符号 2、选择器可以使用标签名称、id、class

11.34 序列选择器

#2.1 同级别
:first-child    p:first-child    同级别的第一个
:last-child    p:last-child      同级别的最后一个
:nth-child(n)                    同级别的第n个
:nth-last-child(n)               同级别的倒数第n个
#2.2 同级别同类型
:first-of-type                   同级别同类型的第一个
:last-of-type                    同级别同类型的最后一个
:nth-of-type(n)                  同级别同类型的第n个
:nth-last-of-type(n)             同级别同类型的倒数第n个
#2.3 其他
:only-of-type                    同类型的唯一一个
:only-child                     同一级别唯一一个

11.341同级别序列选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-child {color: red;}     #同一级别第一个p  x
        p:last-child {color: red;}      #同一级别倒数第一个p  y
        p:nth-child(3) {color: red;}    #同一级别第3个p  z
        p:nth-last-child(3) {color: red;}#同一级别倒数第3个p  w
    </style>
</head>
<body>
<h1>我是标题1</h1> 
<p>我是段落1</p>        
<a href="">aaaaa</a>
<p>我是段落2</p>
<p>我是段落3</p>        #w
<p>我是段落4</p>
<p>我是段落5</p>        #y
<div>
    <p>我是段落6</p>    #x  w
    <a href="">我是a标签</a>
    <h1>我是标题2</h1>
</div>
</body>
</html>

11.342同级别同类型序列选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-of-type {color: red;}           # 同级别同类型的第一个p  x
        p:last-of-type {olor: red;}             # 同级别同类型的倒数第一个p  y
        p:nth-of-type(3) {color: red;}          # 同级别同类型的第3个p   z
        p:nth-last-of-type(3) {color: red;}      # 同级别同类型的倒数第3个p  u
        p:only-child {color: red;}              # 同一级别唯一一个p 不存在
        p:only-of-type {color: red;}            # 同类型的唯一一个 不存在
    </style>
</head>
<body>
<h1>我是标题1</h1>
<p>我是段落1</p>    #x
<a href="">aaaaa</a>
<p>我是段落2</p>
<p>我是段落3</p>    #z  u
<p>我是段落4</p>
<p>我是段落5</p>    #y
<div>
    <a href="">我是a标签</a>
    <p>我是段落6</p>#x   u
    <p>我是段落7</p>
    <p>我是段落8</p>#y z
    <h1>我是标题2</h1>
</div>
<div>
    <p>我是独生子</p>#x
    <p>我是独生子</p>#y
    <a href="">我是二胎</a>
    <a href="">我是二胎</a>
</div>
</body>
</html>

11.35 属性选择器

作用：根据指定的属性名称找到对应的标签，然后设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [id] {color: red;}                         #找到所有包含id属性的标签  x
        h1[id] {color: red;}                       #找到所有包含id属性的h1标签  y
        [value] {width: 200px;height: 200px;}       #找到所有包含value属性的标签 z
        [class="part1"] {color: red;}               #找到所有class属性值为part1的标签 u
        [class^="part"] {color: red;}               #找到所有class属性值以part开头的标签 v
        [class*="part"] {color: red;}               #找到所有class属性值包含part的标签 w
        [class$="yyy"] {color: red;}                #找到所有class属性值以yyy结尾的标签 o
        [value*="male"] {width: 200px;height: 200px;}#找到所有value属性值包含male的标签 p
        [type="radio"] {width: 200px;height: 200px;}#找到所有type属性值为radio的标签 q
    </style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>#x  y
<p id="id2" class="part3">我是段落22222</p>#x v w
<p class="part1">我是段落1111</p>#u v w
<p class="xxx part2 yyy">我是段落</p>#w o
<input type="radio" name="gender" value="male">#z   p   q
<input type="radio" name="gender" value="female">#z p   q
</body>
</html>

11.36 伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link {color: blue;}                       #没有访问的超链接a标签样式
        a:hover {color: chocolate;}                  #鼠标悬浮在元素上应用样式：
        a:active {color: mediumvioletred;}            #鼠标点击瞬间的样式：
        a:visited {color: green;}                     #访问过的超链接a标签样式：

        div {width:200px; height:200px; background-color:green;}
        div:hover {background-color: red;}             #hover ，div等标签也可以使用
        
        input:focus {outline:none;background-color:dark;}#input输入框获取焦点时样式：
    </style>
</head>
<body>
<a href="https://www.tmall.com">这是一个好的网站</a>
<div></div>
用户名:
<input type="text" name="username">
</body>
</html>

注意： 1、a标签的伪类选择器可以单独出现，也可以一起出现 2、a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效 3、hover是所有其他标签都可以使用的 4、focus只给input标签使用

11.37 伪元素选择器

伪元素选择器(CSS3中新增的伪元素选择器):伪元素选择器的作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

格式：

标签名称:before{属性名称：值；}
标签名称:after{属性名称：值；}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:before {content: "alex is BigSB";color: green;}  #用于在元素的内容前面插入新内容
        p:first-letter {font-size: 200px;}                #杂志类文章首字母样式调整
        a:after {content:"?";color:red;}#用于在元素的内容后面插入新内容,在所有a标签的内容后面加上一个?
    </style>
</head>
<body>
<p>英雄不问出处，流氓不论岁数</p>        #alex is BigSB英雄不问出处，流氓不论岁数
<a href="#" class="help">你是干什么的</a>
<a href="#" class="help">你是干什么的</a>
<a href="#" class="help">你是干什么的</a>
</body>
</html>