11.3 css

11.31 基本选择器

11.311 id选择器

根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {color: red;}               引用id一定要加#
        #p2 {color: green;}
        #p3 {color: blue;}
    </style>
</head>
<body>
<p id="p1">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p id="p2">而我,不仅具备外表帅,内心更是帅了一逼</p>
<p id="p3">就是我,我就是</p>
</body>
</html>
11.312 类选择器

作用:根据指定的类名称,在当前界面中找到对应的标签,然后设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1 {color: red;}           #引用class一定要加点.
        .p2 {font-size: 50px;}
        .p3 {text-decoration: underline;}
    </style>
</head>
<body>
<p class="p1">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p class="p2">而我,不仅具备外表帅,内心更是帅了一逼</p>
<p class="p3">那就是我</p>
<!--
第一行与第三行的颜色都是红色
第一行与第二行的字体大小都是50px
第二行与第三行内容有个下划线
-->
<p class="p1 p2">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p class="p2 p3">而我,不仅具备外表帅,内心更是帅了一逼</p>
<p class="p3 p1">那就是我</p>
</body>
</html>
11.313 标签选择器

作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {color: red;}
    </style>
</head>
<body>
<p>美丽的外表下其实隐藏着一颗骚动的心</p>
<ul>
    <li>
        <p>这颗心叫做七巧玲珑心,男人吃了会流泪,女人吃了会怀孕</p>
    </li>
</ul>
</body>
</html>

注意: 1、只要是HTML的标签都能当做标签选择器 2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签 3、标签选择器,无论嵌套多少层都能选中

11.314 通配符选择器

作用:选择所有标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {color: red;}             #把所有的标签设置相同的属性
    </style>
</head>
<body>
<h1 >我是标题</h1>
<p >我是段落</p>
<a href="#">我是超链接</a>
</body>
</html>

11.32 组合选择器

11.321 后代选择器

作用:找到指定标签的所有后代(儿子,孙子,重孙子、、、)标签,设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .part1 p {color: red;} # 1 找到part1下的所有p标签,添加属性
        #id1 ul p {color: red;} # 2 找到一个id='id1'下的ul下的所有p标签
    </style>
</head>
<body>
  <p>我是body下的段落1</p>
    <div id="id1" class="part1">
        <p>我是div下的段落1</p># 1
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p># 1   2
            </li>
        </ul>
    </div>
    <div>
        <p>hahahahah</p>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>

注意:1、后代选择器必须用空格隔开 2、后代不仅仅是儿子,也包括孙子、重孙子 3、后代选择器不仅仅可以使用标签名称,还可以使用其他选择器比如id或class 4、后代选择器可以通过空格一直延续下去

11.322 子元素选择器

作用:找到指定标签的所有特定的直接子元素,然后设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1>p {color: red;}      # 1 找到id='id1'下的子标签p,添加属性
        .part1 ul .aaa>a {color: red;}
    </style>                     #2 找到class='part1'下的所有标签ul下的class=aaa的子标签a,添加属性
</head>
<body>
  <p>我是body下的段落1</p>
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>            # 1
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <a href="">点我啊1</a>     # 2
                <p> <a href="">点我啊2</a> </p>
            </li>
            <li>
                <a href="#">点我啊3</a>
            </li>
        </ul>
    </div>
    <div>
        <p>hahahahah</p>
    </div>
  <p>我是body下的段落2</p>
  <a href="#">百度一下</a>
</body>
</html>

注意: 1、子元素选择器之间需要用>符号链接,并且不能有空格,比如div >p会找div标签的所有后代标签,标签名为">p" 2、子元素选择器只会查找儿子,不会查找其他嵌套的标签 3、子元素选择器不仅可以用标签名称,还可以使用其他选择器,比如id或class 4、子元素选择器可以通过>符号一直延续下去

11.323相邻兄弟与通用兄弟选择器

相邻兄弟选择器:只能选中紧跟其后的那个标签,不能选中被隔开的标签

通用兄弟选择器:给指定选择器后面的所有选择器中的所有标签设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        #相邻兄弟选择器
        h1+p {color: red;}#相邻兄弟选择器必须通过+号链接  x
        #通用兄弟选择器
        h1~p {color: red;}#通用兄弟选择器必须用~来链接   y
    </style>
</head>
<body>
    <h1>我是标题1</h1>
    <a href="">有了这个标签,p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a>
    <p>我是段落</p> #y
    <p>我是段落</p> #y
    <h1>我是标题2</h1>
    <p>我是段落</p> #x      y
</body>
</html>

11.33 交集与并集选择器

11.331 并集选择器

作用:给所有满足条件的标签设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p,a {color: red;}               #找到所有p标签和a标签,添加属性
    </style>
</head>
<body>
    <h1>哈哈啊</h1>
    <p class="part1">我是段落1</p>
    <a href="#" class="part2">a标签</a>
</body>
</html>

注意: 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>

python 之 前端开发(基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器)的更多相关文章

  1. 【CSS】伪类和伪元素选择器

    伪类 基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果. a:link  规定所有未被点击的链接: a:visited  匹配多有已被点击过的链接: a:active  匹配所有鼠标按下 ...

  2. 以css伪类为基础,引发的选择器讨论 [新手向]

    作为第一篇技术干货,来写哪个方面的内容,我着实考虑了很久. 经过了整整30秒的深思熟虑,我决定就我第一次发现新大陆一样的内容,来进行一次讨论. 伪类:伪类对元素进行分类是基于特征(characteri ...

  3. 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄

    做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...

  4. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  5. 【从0到1学Web前端】CSS伪类和伪元素 分类: HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  6. css 为元素选择器,css目标状态伪类,结构化选择器,多媒体选择器,清除表默认样式、属性选择器

    伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...

  7. python 全栈开发,Day19(组合,组合实例,初识面向对象小结,初识继承)

    一.组合 表示的一种什么有什么的关系 先来说一下,__init__的作用 class Dog: def __init__(self, name, kind, hp, ad): self.name = ...

  8. 后端码农谈前端(CSS篇)第四课:选择器补充(伪类与伪元素)

    一.伪类: 属性 描述 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接 ...

  9. 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

    一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...

  10. css3伪类、伪元素选择器---nth-child()和nth-of-type()选择器的区别

    p:nth-child(2) 要满足两个条件,1:选择的是p元素的父元素的第二个子元素   2:选择的第二个子元素必须是p元素,如果不满足,则将不显示 p:nth-of-type(2) 选择父元素下的 ...

随机推荐

  1. Ubuntu下通过SSH远程登录服务器的方法

    1. 首先在服务器上安装ssh的服务器端.$ sudo aptitude install openssh-server 2. 启动ssh-server.$ /etc/init.d/ssh restar ...

  2. selenium RC+JAVA 笔记 一

    selenium 常用操作有:open,type,click,select,selectFrame. package com.example.tests; import com.thoughtwork ...

  3. Oracle创建/删除表空间和用户(2014-3-10 记)

    /*创建表空间名为:DB_NAME*/ create tablespace DB_NAME datafile 'E:\oracle_data\db_name.dbf' size 100M autoex ...

  4. js “+” 连接字符串&amp;数字相加 数字相加出现多位小数 函数调用单引号双引号嵌套和转义字符的使用

    一.机制 JavaScript中,加号不仅表示相加还表示字符串连接 当加号两边存在字符串时,加号代表连接,实际上是将两侧都转为了字符串,如 "1" + 1 = "11&q ...

  5. ORA-01461: 仅可以为插入 LONG 列的 LONG 值赋值”解决办法

    ORA-01461: 仅可以为插入 LONG 列的 LONG 值赋值”解决办法 今天遇到的一个问题: 直接修改数据表中的某些字段数据内容时报错: ORA-01461: 仅可以为插入 LONG 列的 L ...

  6. Java面试题之五

    二十一.super()与this()的区别? (1)用this的情况: 1.在构造方法中,通过this调用另一个构造方法,用法:this(参数列表). 2.在函数参数或函数的局部变量与成员变量同名,即 ...

  7. VC6.0 导入资源崩溃

    等我以后挣钱了一定买正版! 最近学习Win32编程,为了锻炼自己,在网上下载了一个VC6.0作为开发工具,应该是兼容性的问题吧,VC6 经常闹毛病. 今天导入资源的时候VC6出现崩溃的现象. 马上寻求 ...

  8. table问题汇总

    平时要使用 table 的次数说多不多,说少不少,但每次使用必定会被几个问题"坑"一下,所以这篇博客用来记录下table那些"小坑".但 table 也会有很多 ...

  9. Angular2学习笔记2

    每个angular2应用程序默认使用app目录来创建(可以自己制定,但是eclipse插件生成的会自动使用app) 每个程序应当至少有一个angular模块即根模块.根模块使用@NgModule({} ...

  10. [ SSH框架 ] Spring框架学习之二(Bean的管理和AOP思想)

    一.Spring的Bean管理(注解方式) 1.1 什么是注解 要使用注解方式实现Spring的Bean管理,首先要明白什么是注解.通俗地讲,注解就是代码里的特殊标记,使用注解可以完成相应功能. 注解 ...