day10-CSS-选择器

标签选择器

• 作用：找到界面中的所有标签，然后修改其属性
• 格式：

标签名称{
      属性：
}

• 注意点：
  • 1️⃣所有标签都会更改，并不能更改某一个
  • 2️⃣无论标签位置，都可以被选择到
  • 3️⃣所有HTML标签都能作为标签选择器
• 缺陷：所有标签都会被更改，特例标签只能用id选择器或类选择器

id选择器

• 作用：根据id名称，找到对应标签，设置其内容
• 格式：

#id名称{
      属性：
}

• 注意点：
  • 1️⃣同一界面中id不能重复
  • 2️⃣所有HTML标签都有id属性
  • 3️⃣一定要加#
  • 4️⃣id命名规范：
    • ①只能是字母、数字、下划线
    • ②不能以数字开头
    • ③名称不能与HTML标签同名
    • ④id是留给js使用的，不要乱用---推荐类选择器

类选择器

• 作用：根据类名称，找到对应标签，设置其内容
• 格式：

.类名称{
      属性：
}
<标签名称 class="类名1 类名2 类名3 ........">

• 注意点：
  • 1️⃣同一界面中class能重复，
  • 2️⃣所有HTML标签都有class属性
  • 3️⃣一定要加.
  • 4️⃣class命名规范：
    • ①只能是字母、数字、下划线
    • ②不能以数字开头
    • ③名称不能与HTML标签同名
  • 5️⃣类名是给某一个特定的标签设置样式的 --- id给js使用，clas给css使用
  • 6️⃣一个标签类名可以有多个class

id和class的区别

• id：相当于人的身份证，不可重复
• class：相当于人的名称，可重复
• 一个html标签只可以有一个id，但可以有多个class
• id是以#开头
• class是以.开头
• id给js使用,除非特殊情况,否则不要使用id设置样式
• class可以排除一些冗余代码

后代选择器（可以找到嵌套较深的标签）

• 作用:找到指定标签的所有后代(儿子 孙子被嵌套等标签)标签,设置属性
• 注意点
  • 1️⃣后代选择器必须用空格隔开
  • 2️⃣后代不仅仅是儿子还有孙子和重孙
  • 3️⃣可以和纯id和纯类或纯标签一起使用--效果是一样的
  • 4️⃣可以多次使用后代---嵌套较深时

子元素选择器

• 作用：找到指定标签中所有特点的直接子元素，然后设置属性
• 标签1>标签2{ 属性：值 }
• 注意点：
  • 1️⃣只会查找儿子，不会查找孙子等
  • 2️⃣以>连接，前后不能有空格
  • 3️⃣标签可以用id、class、类选择器
  • 4️⃣可以多次使用---嵌套较深时

后代选择器和子元素选择器异同

• 区别
• 1️⃣后代使用空格；子元素使用>
• 2️⃣后代会选择指定标签的所有后代（儿子孙子重孙等）；子元素只会选中指定标签的指定后代（只会选定儿子）
• 共同点
• 1️⃣后代和子元素都可以使用id、class、标签名称作为选择器
• 2️⃣后代和子元素可以通过连接符号一直延续
  • 选择器1>选择器2>选择器3>选择器4>选择器5
• 如何选择
• 若想选定所有标签则用后代；若只想选定某个特定标签则用子元素

交集选择器

• 作用：给所有选择器选中的标签中，相交的部分设置属性
• 注意点
  • 1️⃣选择器和选择器之间没有连接符号
  • 2️⃣选择器可以是id、class、类标签---随意配合使用

并集选择器

• 作用：给所有选择器选中的标签并集部分设置属性
• 注意点
  • 1️⃣选择器和选择器之间逗号连接符号
  • 2️⃣选择器可以是id、class、类标签---随意配合使用

兄弟选择器

• 作用：只能选中同级关系的标签
• 1.相邻兄弟选择器CSS2
  • 指定标签后面紧跟的标签，隔开的无法选中
  • 必须通过加号连接
• 2.通用兄弟选择器CSS3
  • 指定标签后面的指定的所有选择器选中（无论有没有被隔开都可以被选中）的所有标签设置属性
  • 必须通过~连接
• 注意点
  • 1️⃣选择器和选择器之间加号+连接符号
  • 2️⃣选择器可以是id、class、类标签---随意配合使用

序选择器（个数选择器CSS3）--不需要id class

• CSS3新增选择器，最具代表性的是序选择器
• 1.同级别的第几个
  • first-child -- 同级别的第一个标签
    • 注意点：不会自动区分类型是否一致
  • last-child -- 同级别的最后一个标签
    • 注意点：不会自动区分类型是否一致
  • nth-child（n） --- 同级别第n个
    • 注意点：不会自动区分类型是否一致
  • only-child -- 只拥有一个子元素的标签--无论类型
    • 注意点：不会自动区分类型是否一致
• 2.同类型的第几个
  • first-of-type -- 同级别中同类型的第一个
  • last-of-type -- 同级别中同类型的最后一个
  • nth-of-type（n） -- 同级别中同类型的第n个
  • nth-last-of-type（n） -- 同级别中同类型的倒数第n个
  • only-of-type -- 同级别中只拥有唯一类型的标签
• 3.选择所有的奇数或偶数标签

• nth-child（odd） --- 同级别所有奇数标签
• nth-child（even） --- 同级别所有奇数标签
• nth-of-type（odd） --- 同级别中同类型所有奇数标签
• nth-of-type（even） --- 同级别中同类型所有奇数标签
• nth-child（xn+y） --- 同级别所有自定义标签
• 用户自定义格式 x和y
• n从0开始到指定标签中总个数n

属性选择器

• 作用：根据指定的属性名称找到对应的标签，设置其属性
• [attribute]
  • p[id] -- 所有p标签，并设置有id属性的p标签
• [attribute=value]
  • 找到指定属性，并且属性的取值=value的标签，设置其属性
  • p[class=abc] -- 所有p标签，并且class值为abc的p标签
• 最主要的用途：设置表单的type
• 1.属性是以什么开头的
  • [attribute|=value] CSS2
  • [attribute `=value] CSS3
  • 区别：CSS2只能找到有字符隔开的，并不能找到粘合包含在一起的；CSS3只要以value开头的都可以找到
• 2.属性的取值是以什么结尾
  • [attribute $=value] CSS3
• 3.属性的取值是否包含某个特定的值
  • [attribute ~=value] CSS2
  • [attribute *=value] CSS3
  • 注意：CSS3中只要包含value，无论如何隔开或者哪个位置都可以被选中；CSS2中只能找到value被空格隔开的
• 注意掌握CSS3新出的

通配符选择器

• 作用：给当前界面上所有的标签设置属性
• 以星号开头*
• 注意点：若当前界面上标签很多的时候，通配符选择器性能会很差，慎用