美文网首页
元素选择器

元素选择器

作者: 鬼会画符 | 来源:发表于2018-08-07 22:40 被阅读0次
  • 选择器:会告诉浏览器,网页上的那些元素需要什么样的样式。

选择器都存在<html>--<head>--<style>中

元素选择器

  • 根据标签的名字选取制定元素
    语法:
    标签名{}

比如:

p{
        background-color:red;
    }
(选中页面中所有p标签,改变背景颜色)

类选择器

  • 根据元素的class属性值选取指定元素
    语法:
    .classname{}

比如:

.p2{
            color: green;
        }      (存在于style中)

<p class="p2">哈哈,我是</p>     (存在体标签中)

ID选择器

  • 根据元素的id属性值选取指定元素
    语法:
    #id{}

比如:

#abc{
                color:green;
            }

<p id="abc">娃哈哈</p>

复合选择器 (交集选择器)

  • 同时使用多个选择器,选择同时满足多个选择器的元素
    语法:
    选择器1 .选择器2{}

比如:

div.p{
      color:red;
}

(满足div下属于p标签的颜色设置为红色)

群组选择器(并集选择器)

  • 同时使用多个选择器,多个选择器同时指定的样式
    语法:
    选择器1,选择器2,选择器3{}

比如:

div,p,#abc{
      color:red;
}
(div元素,p元素,id为abc的元素 颜色设置为红色)

通用选择器

  • 同时选中页面中所有的元素
    语法:
    *{}

比如:

*{
    color:red; 
}
(所有元素设置为红色)
祖先元素 后代元素 父元素 子元素 兄弟元素
直接或间接包含后代元素的元素 直接或间接被祖先元素包含的元素 直接包含子元素的元素 直接被父元素包含的元素 拥有相同父元素的元素

后代选择器

  • 根据标签的关系,为处在元素内部的代元素设置样式
    语法:
    祖先 后代{}

比如:

div p{
    color:red;
}
(div父元素下的p元素颜色设置为红色)

伪类和伪元素

  • 有时候需要选择本身没有标签,但是仍然能够轻易被识别的网页部位,CSS 为他们提供了此类选择器
给链接定义样式
  • 正常连接(没有被访问过的网页)
    a:link
  • 访问过得链接
    a:visited
  • 鼠标划过的链接
    a:hover
  • 正在点击的链接
    a:active
输入文本框
<input type="text">
  • 获取焦点(输入点击文本框内时)
    :focus
  • 指定元素前
    :before
  • 指定元素后
    :after
  • 选中的元素
    ::selection

相关文章

  • jquery学习笔记(一)

    选择器 元素选择器 jQuery元素选择器基于元素名选取元素。选取页面中所有 元素: #id选择器 jQuery ...

  • 餐厅练习题

    plate 元素选择器 bento 元素选择器 #fancy ID选择器 plate apple 后代元素选择器 ...

  • CSS选择器

    选择器类型 元素选择器 类选择器 ID 选择器 属性选择器 伪类 伪元素 选择器组 后代选择器 子元素选择器 相邻...

  • CSS选择器

    CSS选择器规定了CSS规则会作用到哪些元素上。 基本选择器 元素选择器:根据元素名称匹配元素 类选择器:根据元素...

  • CSS选择器详解

    元素选择器 类选择器 ID选择器 属性选择器 派生选择器 1. 元素选择器 最常见css选择器当属元素选择器,在H...

  • css选择器详解

    元素选择器 类选择器 ID选择器 属性选择器 派生选择器 元素选择器 最常见的css选择器当属元素选择器了,在HT...

  • CSS学习笔记(一):选择器

    选择器 1.元素选择器 元素选择器:文档(HTML、XML)的元素就是最基本的选择器,html所有元素如html ...

  • 选择器、CSS(层叠样式表)语法、块和内联

    选择器 元素选择器 作用:通过元素选择器可以选择页面中的所有指定元素 语法:标签名{} id选择器 作用:通过元素...

  • CSS3选择器

    一、基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素语法格式:父元素 > 子元素 (Father...

  • css选择器

    元素选择器 id选择器 类选择器 后代选择器 元素选择器 文档中的元素是最基本的选择器其选择器通常是某个 HTML...

网友评论

      本文标题:元素选择器

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